Demo: 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(); })
});
My goal here is when an item is taken from .source and dropped on to .target, I want to disable the draggable that was dropped so that I can only have a single instance of an item from .source end up in .target. Conversely, I am also trying to re-enable the item once it is removed from .target.
Given that your creating a clone of the original you need to track this and be able to tie back to the original when you close the clone.
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(); })
});
I've created an updated fiddle at http://jsfiddle.net/xmltechgeek/FCj2a/ that show a way to do this using a tracking array for your old item when you create the clone. You can just use the enable/disable functionality from jquery for the actual task of enabling or disabling.
use this code inside droppable -
deactivate: function( event, ui ) {
var item = ui.draggable;
item.draggable('disable');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.