问题
I have a html page with some images that are dragggable and a set of divs that are droppable. It all works fine using the below code but I can't figure out how i can REMOVE AN ITEM from the droppable area after its been dropped. (lets say the user changes their mind . .)
I want some behavior that if you drag an item out of the droppable area that it gets removed from the droppable area. I expected this to be the behavior out of the box but apparently not.
$(".draggable").draggable({ cursor: "move", revert: "invalid", helper: "clone" });
$(".droppable").droppable({
hoverClass: "ui-state-active",
drop: function (ev, ui) {
$(this).append($(ui.draggable).clone());
}
});
Is there anyway to support the behavior so I can remove items from a droppable (do i need to make it a draggable as well? that would seem odd and overkill for such a simple and basic feature I think . .
回答1:
I would use droppable's out event to remove the draggables like so:
Working Example
$(".draggable").draggable({
cursor: "move",
revert: "invalid",
helper: "clone"
});
$(".droppable").droppable({
accept: '.draggable',
hoverClass: "ui-state-active",
drop: function (ev, ui) {
if ($(ui.draggable).hasClass('new')) {
$('.new').draggable({
revert: true
});
} else {
$(this).append($(ui.draggable).clone().draggable({
helper: "original"
}).addClass('new'));
}
},
out: function (event, ui) {
$(ui.draggable).fadeOut(1000, function () {
$(this).remove();
});
}
});
回答2:
I don't believe this is a feature that comes standard with jQuery UI
the following are a couple examples though. (Assuming you want your original images to be cloned when dragged)
HTML
<div id="test">
<div class="draggable">Image</div>
<div class="draggable">Image2</div>
<div class="draggable">Image3</div>
<br>
<br>
<div class="droppable"></div>
<div class="droppable"></div>
<div class="droppable"></div>
</div>
jQuery
var original = true;
var droppable = false;
$( ".draggable" ).draggable({
helper : "clone",
stop: function( event, ui ) {
original = false;
},
start: function( event, ui ) {
original = true;
}
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
droppable = true;
if(original){
ui.helper.removeClass('ui-draggable-dragging');
var newDiv = $(ui.helper).clone();
newDiv.draggable({
stop: function( event, ui ) {
if(!droppable)
ui.helper.remove();
},
start: function( event, ui ) {
droppable = false;
}
});
$(this).append(newDiv);
}
else
$(this).append(ui.helper);
}
});
FIDDLE
http://jsfiddle.net/Bkk5F/3/
Alternative - Snappy version
http://jsfiddle.net/Bkk5F/2/
回答3:
It truly depends on what you want to do. Currently, when you're dropping the draggable, you're creating a clone that doesn't have any functionality behind it - that's why it won't move afterwards.
I think what you're trying to do, I've accomplished here: http://jsfiddle.net/RDg9B/1/ - user drags the draggable to container; if he changes his mind, he drags it outside the container.
Generally however, when designing an UI, I've been using a trash container, to which user can move unwanted items - they can either disappear, or return to their original position (adding droppable functionality to document.body
is tricky)
As an add-on here's the fiddle with clones (which is rather logical and expected behavior :D)! http://jsfiddle.net/RDg9B/2/
回答4:
You can try implemeting sortable() on your droppable container. I tried some thing like this: http://jsbin.com/axegem/105/
Hope this helps
来源:https://stackoverflow.com/questions/20025169/when-using-jquery-ui-droppable-how-can-you-remove-an-item-from-the-droppable-ar