jQuery UI 在使用 .droppable 放入 div 时删除元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9796934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI remove element when dropped into a div using .droppable
提问by Wyck
I'm trying to figure out the logic of how to do this.
我试图弄清楚如何做到这一点的逻辑。
I have many images with only a CSS class name, they are created dynamically.
我有很多只有一个 CSS 类名的图像，它们是动态创建的。
These images are draggable using jQuery UI's .draggable.
这些图像可以使用 jQuery UI 拖动 .draggable.
I need to have a "trash can" that when an element is dragged into , it is removed.
我需要一个“垃圾桶”，当一个元素被拖入时，它会被删除。
Example: http://jsfiddle.net/KWdcU/3/(This is set to remove all elements and not the one dragged into it)
示例：http: //jsfiddle.net/KWdcU/3/（设置为删除所有元素而不是拖入其中的元素）
Code:
代码：
<div class ="box">
<div class="stack">one</div>
<div class="stack">two</div>
</div>
<div id="trash">trash</div>?
$(function() {
$( ".stack" ).draggable();
});
$('#trash').droppable({
over: function() {
//alert('working!');
$('.box').remove();
}
});
?
?
回答by Simen Echholt
You can find the item being dragged by using .draggableproperty of the uielement being passed to the callback function of over, as specied in the docs. Like this:
您可以使用传递给 的回调函数.draggable的ui元素的属性来找到被拖动的项目over，如文档中所述。像这样：
$(function() {
$(".stack").draggable();
$('#trash').droppable({
over: function(event, ui) {
ui.draggable.remove();
}
});
});
从可用性的角度来看，我建议使用
dropdrop事件而不是overover事件，因为通过无意中将项目拖到垃圾桶上来删除项目会很烦人。回答by kdureidy
Better to use drop in stead of over
最好使用 drop 而不是 over
$(function() {
$(".stack").draggable();
$('#trash').droppable({
drop: function(event, ui) {
$(ui.draggable).remove();
}
});
});
回答by Shubham Gupta
Delete the elements in droppable area by implementing the following JS Code :-
通过实现以下 JS 代码删除可放置区域中的元素：-
$(document).on('click', '.ui-draggable', function(){
if(confirm('Do you want to delete ?')){
$(this).remove();
}
});
See the result :
查看结果：
