jquery - 按需拖放：如何在单个 mousedown 事件中启用、开始和继续拖动所有内容？

Question

所以我有超过 9000 个元素，每个元素都应该能够被拖动。通过直接应用 jQueryUI 插件将它们中的每一个都变成可拖动的似乎并不可行。我正在考虑通过侦听文档的鼠标按下事件并检查事件的目标是否是元素之一来使元素可拖动以响应鼠标按下事件。一旦鼠标按下一个元素，我就会把它变成一个可拖动的同时使其已被捕获和拖动，以便拖动继续进行，就好像鼠标按下启动了拖动一样。一旦拖动完成（通过放下或取消），可拖动的插件被破坏并且元素返回到未绑定状态。这样，一次只能拖动一个元素，使该解决方案轻巧且可扩展。

我怎样才能做到这一点？

Answer 1

这可以使用 和 的组合来trigger()完成draggable("destroy")：

function downHandler(event)
{
    var target = $(event.target);
    target.off("mousedown", downHandler); // prevents infinite recursion
    target.on("mouseup", upHandler);
    target.draggable();
    target.trigger(event);
}

function upHandler(event)
{
    var target = $(event.target);
    target.draggable("destroy");
    target.off("mouseup", upHandler);
    target.on("mousedown", downHandler);
}

$(".draggable-on-mousedown").on("mousedown", downHandler);

演示：http: //jsfiddle.net/jPjKN/