使用 JQuery“模拟”拖放的简单方法？

Posted 2023-05-08

【中文标题】使用 JQuery“模拟”拖放的简单方法？

【英文标题】：Easy way to "simulate" a drag-and-drop using JQuery?

【发布时间】：2012-10-16 01:54:57

【问题描述】：

我有一个网页，允许用户将元素拖到可放置的 div 中。我正在使用 JQuery UI Draggable 和 Droppable。我想添加一个功能，如果您双击其中一个可拖动元素，它会“模拟”该元素的拖放 - 即它将元素拖动到屏幕上并将其放在可放置的 div 上。这样，用户可以选择拖放或双击。有什么方法可以轻松实现吗？ （如果太麻烦的话，我可能只是编写双击代码来执行代码，然后弹出一个提示它已经完成。）

【参考方案1】：

没有一段代码很难为你开发一些东西，但这里有一个想法：

您可以使用元素“双击”事件触发的.animate() 函数将可拖动元素移动到放置区域。

使用.offset() 功能计算目标位置应该不难。

然后，使用 .animate() 回调来执行放置动作。

【参考方案2】：

我在这里发现了一个类似的问题：jQuery: How Do I simulate Drag and Drop in Code? 我使用 Patrick McElhaney 提出的解决方案解决了：

    $(".mainpanel").droppable(
        drop: function (event, ui) 
            onDragAndDrop($(ui.draggable), $(event.target));
        
    );

    button.dblclick(function () 
        onDragAndDrop($(this), $(".mainpanel"));
    );

    function onDragAndDrop(dragged, droppable) 
        // ...