Vue.Draggable (sortable.js) 中的 ondragover 等价物

Question

有没有办法检测是否有东西被拖动到元素上？或者触发悬停事件？找到了一些关于通过 onMove 向拖过的元素添加 class 的东西，但它似乎对我不起作用。

Answer 1

我用一个解决方案做了一个 JSBin：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 = '';
  }
});

基本上，如果使用 SortableJS 排序，您会为回退执行 mouseenter 和 mouseleave 事件，并为本地拖放执行 dragenter 和 dragleave 事件（忽略气泡）。如果你没有 forceFallback: true.

，你会想要两者

Vue.Draggable (sortable.js) 中的 ondragover 等价物

ondragover equivalent in Vue.Draggable (sortable.js)

javascript

sortablejs

vuejs2