Javascript 如何使div可拖放

我的项目中剩下的一件事是使两个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);
        }
    });
});

---

问题在于，一旦拖放项目，它就会被克隆。此克隆没有在其上实例化

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);
    }
});

仅当其从目标复制时，才应克隆它，否则它应移动它

要实现这一点，您需要删除克隆的可拖动元素中的

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);
    }
});

---

你想实现什么？我已经更新了你的提琴：当你说“分配”时，你的意思是移动div而不是复制它们吗？@Gavriel我想从目标拖动div（div的克隆）并将其放到用户身上（单个或多个）然后，如果用户需要，他可以从用户1拖动一个div，然后将其放到用户2、3、4或其他任何地方，然后再放到服务器上。不，不，只是应该将div的克隆分配给不同的用户确定，这是最好的，有一点，当我从用户拖动时，它不应该被克隆。我怎么能这样做？只有当它来自目标时才应该克隆它，否则它应该移动它。他想将div从一个用户移动到另一个用户，这只是解决方案的一半。我从$item.draggable（$mycustomvariable）中删除了helper克隆选项但它并不能很好地工作。要做到这一点，你需要改变逻辑，这样你就可以识别出哪些元素是全新的克隆，哪些元素以前被删除过，然后又被移动过。查看我的更新以了解更多详细信息。没问题，很乐意提供帮助。