禁用/啓用可拖動jQuery中

Question

演示：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中移除項目後重新啓用該項目。

Answer 1

使用此代碼裏面投擲的 -

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

Demo Fiddle

Answer 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中的啓用/禁用功能來實現啓用或禁用的實際任務。