如何使div可拖動和可拖放

Question

我項目中剩下的一件事就是讓兩個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/

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

更新了小提琴

它只應該從目標克隆，否則它應該移動它。

要實現此目的，您需要刪除克隆的draggable元素中的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);
    }
});

示例小提琴