[英]Can not remove draggable from droppable
根据Stackoverflow post的答案,我有jQuery的1.6.4可拖放对象。 一切似乎都正常,但是当您将其拖到可放置区域之外时,我无法将其从可放置区域中删除。
请看一下JSfiddle: http : //jsfiddle.net/tzp1560b/
注意,我将“ .live('mouseover',function(){“)用于可拖动项目,因为它们是通过ajax加载的。
HTML:
<div id="drop">
<div class="box">
<ol class="box_drop"><span class="drop-placeholder">Drop Items Here!</span></ol>
</div>
</div>
<div id="search_result">
<ul class="list-entity">
<li id="object-22684">
<div class="clearfix">
<div class="body">
<h4>9032</h4>
<div class="content"></div>
</div>
</div>
</li>
<li id="object-22684" class="ui-draggable">
<div class="clearfix">
<div class="body">
<h4>9033</h4>
<div class="elgg-content"></div>
</div>
</div>
</li>
</ul>
</div>
jQuery的:
$(function () {
$('#search_result li').live('mouseover',function(){
$(this).draggable({
cursor: "move",
//revert: "invalid",
opacity: 0.8,
appendTo: "body",
helper: "clone",
start: function(event, ui) {
$(ui.helper).width($(this).width());
}
});
});
$("#drop ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
if (ui.draggable.is('.dropped')) return false;
$(this).find(".drop-placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
appendTo: "body",
helper: "clone"
}).addClass('dropped');
}
}).sortable({
items: "#drop ol",
sort: function () {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
},
out: function () {
ui.item.remove();
$(this).remove();
}
});
});
有人可以帮忙吗? 谢谢。
使用$(ui.draggable).remove();
在放置事件中删除元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.