[英]disable/enable draggable on drop in jQuery
演示: 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中刪除了該項目,我還將嘗試重新啟用它。
假設您創建了原始副本,則需要對其進行跟蹤,並在關閉該副本時能夠將其綁定到原始副本。
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的啟用/禁用功能用於啟用或禁用的實際任務。
在droppable中使用此代碼-
deactivate: function( event, ui ) {
var item = ui.draggable;
item.draggable('disable');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.