ondragover эквивалент в Vue.Draggable (sortable.js)

Question

Есть ли способ обнаружить, если что-то перетаскивается на элемент? Или вызвать событие парения? Нашел что-то о добавлении класса в перетаскиваемый элемент через onMove, но, похоже, он не работает для меня.

Answer 1

Я сделал JSBin с решением: https://jsbin.com/ruqidid/1/edit?html,js,output

var sorting = false;

new Sortable(el, {
    onStart: function() {
        sorting = true;
    },
    onEnd: function() {
      sorting = false;
      // remove styling
      targetElement.style.backgroundColor = 'lightblue';
    },
//     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 = 'lightblue';
    }
});


// 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 = 'lightblue';
  }
});

По сути, при сортировке с помощью SortableJS вы делаете события mouseenter и mouseleave для запасного варианта, а события dragenter и dragleave (игнорируете пузырьки) для встроенного перетаскивания. Вы будете хотеть оба, если у вас нет forceFallback: true,