1

演示：http: //jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
    start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
});

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
    drop: function(ev, ui){
        var item = ui.draggable;
        if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
        this.innerHTML = '';                                                        // clean the placeholder
        item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
    }
});

$(".target").on('click', '.closer', function(){
    var item = $(this).closest('.item');
    item.fadeTo(200, 0, function(){ item.remove(); })
});

我的目标是当一个项目从 .source 中取出并放到 .target 上时，我想禁用被拖放的可拖动对象，这样我只能将 .source 中的一个项目实例放在 .target 中。相反，一旦从.target中删除该项目，我也试图重新启用它。

4

2 回答 2

2

鉴于您创建了原始的克隆，您需要跟踪它并在关闭克隆时能够与原始连接。

var mapOrig = [];

$(".source .item:not(.added)").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
    start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
});

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
    drop: function(ev, ui){
        var item = ui.draggable;
        if (!ui.draggable.closest('.empty').length) {
            var orig = item;           
            item = item.clone().draggable();// if item was dragged from the source list - clone it
            orig.draggable('disable');
            mapOrig.push({item: item, orig: orig});
        }
        this.innerHTML = ''; // clean the placeholder
        item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
    }
});

$(".target").on('click', '.closer', function(){
    var item = $(this).closest('.item');
    for(var i = 0; i < mapOrig.length; ++i){
        if(item.is(mapOrig[i].item)){
            mapOrig[i].orig.draggable('enable');
            mapOrig.splice(i, 1);
        }
    }
    item.fadeTo(200, 0, function(){ item.remove(); })
});

我在http://jsfiddle.net/xmltechgeek/FCj2a/创建了一个更新的小提琴，它展示了一种在创建克隆时使用跟踪数组来处理旧项目的方法。您可以只使用 jquery 的启用/禁用功能来执行启用或禁用的实际任务。

于 2013-05-28T23:34:48.807 回答
-1

在 droppable 中使用此代码 -

    deactivate: function( event, ui ) {
    var item = ui.draggable;
    item.draggable('disable');
    }

演示小提琴

于 2013-05-28T23:22:51.293 回答