如何使 div 可拖动和可放置

Posted 2023-05-08

【中文标题】如何使 div 可拖动和可放置

【英文标题】：how to make a div draggable and droppable

【发布时间】：2016-05-07 06:19:58

【问题描述】：

我的项目中剩下的一件事是让两个 div 同时可拖放。现在我有了可以拖放的 div 的工作代码，但例如我可以从目标区域拖动一个 div 并将其放在用户区域，但我似乎无法找到一种方法从用户那里拖动这些 div 并分配给不同的用户。

$(document).ready(function()
    $(".dragable").draggable(
        cancel: "a.ui-icon",
        revert: true,
        helper: "clone",
        cursor: "move",
        revertDuration: 0
    );

    $('.droppable').droppable(
        accept: ".dragable",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) 
            // clone item to retain in original "list"
            var $item = ui.draggable.clone();
            $(this).addClass('has-drop').append($item);
        
    );
);

http://jsfiddle.net/coder880/TpbZk/31/

【问题讨论】：

你想达到什么目的？

我已经更新了你的小提琴：jsfiddle.net/TpbZk/33

当您说“分配”时，您的意思是移动 div 而不是复制它们？

@Gavriel 我想从目标中拖动 div（div 的克隆）并将其放在用户（单个或多个）上，然后如果用户愿意，他可以从 user1 中拖动一个 div 并将其放在用户 2 或 3 或 4 或任何其他用户，反之亦然。

不不应该只是将 div 的克隆分配给不同的用户

【参考方案1】：

问题是因为一旦项目被拖/放，它就会被克隆。此克隆没有实例化 draggable() 插件。您需要再次致电$item 上的draggable()。试试这个：

var draggableOptions = 
    cancel: "a.ui-icon",
    revert: true,
    helper: "clone",
    cursor: "move",
    revertDuration: 0


$(".dragable").draggable(draggableOptions);

$('.droppable').droppable(
    accept: ".dragable",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) 
        var $item = ui.draggable.clone();
        $item.draggable(draggableOptions);
        $(this).addClass('has-drop').append($item);
    
);

Updated fiddle

它应该只在它来自目标时被克隆，否则它应该移动它。

要实现这一点，您需要删除克隆的可拖动元素中的helper: 'clone' 选项，并在元素上维护一个标志，以确定它是全新的克隆还是之前已被拖动并再次移动。为此，您可以使用一个类，如下所示：

$(".dragable").draggable(
    cancel: "a.ui-icon",
    revert: true,
    helper: "clone",
    cursor: "move",
    revertDuration: 0
);

$('.droppable').droppable(
    accept: ".dragable",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) 
        var $item = $(ui.draggable)
        if (!$item.hasClass('clone')) 
            $item = $item.clone().addClass('clone');
            $item.draggable(
                cancel: "a.ui-icon",
                revert: true,
                cursor: "move",
                revertDuration: 0
            );
        
        $(this).addClass('has-drop').append($item);
    
);

Example fiddle

【讨论】：

好的，这是最好的，一件事，当我从用户那里拖动它时，它不应该被克隆。我怎么能这样做？只有当它来自目标时才应该克隆它，否则它应该移动它。

他想将 div 从一个用户移动到另一个用户，这只是解决方案的一半

我从 $item.draggable($mycustomvariable) 中删除了辅助克隆选项，但它不能正常工作。

要实现这一点，您需要更改逻辑，以便您可以识别哪些元素是全新的克隆，哪些元素之前已被删除并再次移动。请参阅我的更新了解更多详情。

没问题，很乐意提供帮助。