Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/78.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/bash/15.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 拖放;按需拖放:如何在一个mousedown事件中启用、启动并继续拖动所有内容?_Jquery_Jquery Ui_Drag And Drop_Jquery Ui Draggable - Fatal编程技术网

Jquery 拖放;按需拖放:如何在一个mousedown事件中启用、启动并继续拖动所有内容?

Jquery 拖放;按需拖放:如何在一个mousedown事件中启用、启动并继续拖动所有内容?,jquery,jquery-ui,drag-and-drop,jquery-ui-draggable,Jquery,Jquery Ui,Drag And Drop,Jquery Ui Draggable,所以我有9000多个元素,每个元素都应该可以被拖动。通过直接应用jQueryUI插件将它们中的每一个都变成可拖动的似乎是不可行的。我正在考虑通过监听文档的鼠标按下事件并检查事件的目标是否是其中一个元素,从而使一个元素可以作为鼠标按下事件的响应而拖动。一旦鼠标落在某个元素上,我会将它变成一个可拖动的,,同时使其被捕获并拖动,以便继续拖动,就好像鼠标落下启动了拖动一样。一旦拖动完成(通过删除或取消),可拖动的插件将被销毁,元素将返回到未绑定状态。这样,一次只能拖动一个元素,从而使此解决方案轻量级且可

所以我有9000多个元素,每个元素都应该可以被拖动。通过直接应用jQueryUI插件将它们中的每一个都变成可拖动的似乎是不可行的。我正在考虑通过监听文档的鼠标按下事件并检查事件的目标是否是其中一个元素,从而使一个元素可以作为鼠标按下事件的响应而拖动。一旦鼠标落在某个元素上,我会将它变成一个可拖动的,同时使其被捕获并拖动,以便继续拖动,就好像鼠标落下启动了拖动一样。一旦拖动完成(通过删除或取消),可拖动的插件将被销毁,元素将返回到未绑定状态。这样,一次只能拖动一个元素,从而使此解决方案轻量级且可扩展


如何执行此操作?

可以使用和的组合来执行此操作:


演示:

@未定义,这正是重点,我无法将所有内容都拖拽出来,请仔细阅读问题我已经仔细阅读了问题,同一页中9000个元素的存在本身就是一个问题。9000是一个数字,确切的数字并不重要,重要的是,我不能将draggable应用于每个元素,因为它们的数量很大,这很好!我不知道这样的触发器方法可以接收事件。
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);