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

【问题标题】：Drag&Drop on demand: How can I enable, start and continue dragging all within a single mousedown event?按需拖放：如何在单个 mousedown 事件中启用、开始和继续拖动所有内容？
【发布时间】：2013-09-22 11:51:09
【问题描述】：

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

我该怎么做？

【问题讨论】：

@undefined，就是这个意思，我不能把它们都做成可拖动的，请仔细阅读问题
我已经仔细阅读了这个问题，同一页面中存在9000个元素本身就是一个问题。
9000 是象征性的数字，确切的数字并不重要，重要的是我不能将可拖动的元素应用于每个元素，因为它们的数字很大

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable

【解决方案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/

【讨论】：

太棒了！我不知道一个事件可以通过这样的触发方法接收。