[英]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.