ondragover equivalent in Vue.Draggable (sortable.js)

Question

Is there a way to detect if something is being dragged over an element? Or trigger the hover event? Found something about adding a class to the dragged over element via onMove, but it doesn't seem to work for me.

Mckenney

What was the onMove solution and in what way did it not work for you? – Triumph

I looked at it after posting that and it was apparently to track what sortable element was being dragged over, which explains why it wouldn't work. – Mckenney

Answer 1

I made a JSBin with a solution: https://jsbin.com/xuwocis/edit?html,js,output

var sorting = false;

new Sortable(el, {
    onStart: function() {
        sorting = true;
    },
    onEnd: function() {
      sorting = false;
      // remove styling
      targetElement.style.backgroundColor = '';
    },
//     forceFallback:true
});

// For native drag&drop
targetElement.addEventListener('dragover', function(evt) {
    evt.preventDefault();
});

targetElement.addEventListener('dragenter', function(evt) {
    if (sorting && !targetElement.contains(evt.relatedTarget)) {
        // Here is where you add the styling of targetElement
        targetElement.style.backgroundColor = 'red';
    }
});

targetElement.addEventListener('dragleave', function(evt) {
    if (sorting && !targetElement.contains(evt.relatedTarget)) {
        // Here is where you remove the styling of targetElement
        targetElement.style.backgroundColor = '';
    }
});


// For fallback
targetElement.addEventListener('mouseenter', function(evt) {
  if (sorting) {
    // Here is where you change the styling of targetElement
    targetElement.style.backgroundColor = 'red';
  }
});

targetElement.addEventListener('mouseleave', function(evt) {
  if (sorting) {
    // Here is where you remove the styling of targetElement
    targetElement.style.backgroundColor = '';
  }
});

el.addEventListener('touchmove', function(evt) {
  if (!sorting) { return; }
  var x = evt.touches[0].clientX;
  var y = evt.touches[0].clientY;
  var elementAtTouchPoint = document.elementFromPoint(x, y);
  if (elementAtTouchPoint === targetElement ||
      // In case of a ghost element, the element at touch point
      // is the ghost element and thus we need to check if the parent 
      // of the ghost element is the targetElement.
      elementAtTouchPoint.parentNode === targetElement) {
    targetElement.style.backgroundColor = 'red';
  } else {
    // Here is where you remove the styling of targetElement
    targetElement.style.backgroundColor = '';
  }
});

Basically, if Sorting with SortableJS, you do mouseenter & mouseleave events for the fallback, and dragenter & dragleave events (ignore bubbles) for native drag&drop. You will want both if you do not have forceFallback: true.

Triumph

@Owen M have you found any examples of something like this working with the JQuery Sortable widget? – Hyperkeratosis

@Hyperkeratosis The same code should work, just pass the options to the jQuery-SortableJS function instead of to Sortable – Triumph

@OwenM but then I lose sortable on my list. I have 2 lists, both should be sortable within themselves. When I drag an item from list 2 into list 1, it should push that item to a separate list. That separate list is built but is not visible on the screen. Really I want to be able to fire the dragenter event on a sortable element, but I don't know if that can be done. – Hyperkeratosis

Maybe I should just use SortableJS. – Hyperkeratosis