我已经根据示例实现了 jQuery 的可拖放购物车演示 http://jqueryui.com/droppable/#shopping-cart。我希望能够删除<li>当您将其拖出 droppable 时，从 droppable 中删除。我认为这可能与可退出事件 http://api.jqueryui.com/droppable/#event-out但 ui 参数为空。有谁知道解决方案吗？
这是一个完整的工作解决方案，尚未经过完全测试，您仍然应该调试它：
{将可拖动元素重新分配给已放置的元素以触发退出事件}
{你也应该分配 droppable！}
SEE DEMO http://jsfiddle.net/RR6z5/1/embedded/result/
可编辑演示 http://jsfiddle.net/RR6z5/1
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
out: function (event, ui) {
var self = ui;
ui.helper.off('mouseup').on('mouseup', function () {
$(this).remove();
self.draggable.remove();
});
},
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(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
appendTo: "body",
helper: "clone"
}).addClass('dropped');
}
}).sortable({
items: "li:not(.placeholder)",
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");
}
});
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
