gpt4 book ai didi

jquery 拖出时从 droppable 中移除

转载 作者:行者123 更新时间:2023-12-01 03:15:55 24 4
gpt4 key购买 nike

我已经根据示例shopping cart demo实现了jQuery的可拖放功能。 。我希望能够删除 <li>当您将其拖出 droppable 时,从 droppable 中删除。我认为这可能与 droppable out event 有关。但 ui 参数为空。有谁知道解决办法吗?

最佳答案

这是一个完整的工作解决方案,尚未完全测试,您可能仍然应该调试它:{将可拖动元素重新分配给已放置的元素以触发退出事件}{您也应该重新分配 droppable!}

SEE DEMO

EDITABLE DEMO

$(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");
}
});


});

关于jquery 拖出时从 droppable 中移除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16305713/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com