Question

只是想了解以下两种使用vanilla JS实现拖放的方法的权衡

将侦听器应用于document.body级别
将侦听器应用于特定类本身

JSfiddle here

总体方法包括

var activeDraggedElement; //ADE
var ADE_X, var ADE_Y, var ADE_offsetX, var ADE_offsetY
var startX, startY

function onMouseDown(){}
function onMouseUp(){}
function onMouseMove(){}

https://jsfiddle.net/46m5uxod/

据我所知，拥有听众会更便宜，因为我们将较少的听众附加到DOM，但这也意味着事件将不必要地激活很多次（用户点击可拖动范围之外的div）。

思考？还有更好的方法吗？

Answer 1

如果我们谈论的是纯粹的“拖放”，那么我们谈论的是现有元素。

如果我们想要扩展答案，我们会得到一个可能会改变的元素列表，在这种情况下，我认为委托事件是你的朋友（如果考虑到列表已存在且未动态加载到页面中）。）

在你的情况下，我会传递一个rootElement，它尽可能接近你要排序的列表（列表容器div可能？）而是运行查找并限制“误报”的数量

var onmousedown, onMouseUp;

    onmousedown = function(){...}
    onMouseUp= function(){...}

    function InitDragDrop(rootElement){
      Array.from(rootElement.getElementsByClassName('draggable')
           .forEach(item => {
                    item.addEventListener('onmousedown', onMouseDown)
              item.addEventListener('onmouseup', onMouseUp)     
           });
           )
    }

拖放 - 冒泡或委托？权衡

1 个答案: