我已根据示例shopping cart demo实现了jQuery的draggable和droppable。我希望能够从droppable中删除<li>
。我认为这可能与droppable out event有关,但ui参数为空。有谁知道解决方案?
答案 0 :(得分:4)
这是一个完整的工作解决方案,未经过完整测试,您仍应调试它: {重新分配可拖动到丢弃的元素到触发的退出事件} {你应该重新分配droppable!}
$(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");
}
});
});
答案 1 :(得分:0)
您可以使用CSS更改列表样式。 这样的事情应该有效:
.ui-droppable .ui-sortable ol { list-style: none outside none; }
或更好
#cart ol { list-style: none outside none; }
希望这有帮助!
答案 2 :(得分:0)
A.Wolff的解决方案让我走上正轨,但是通过Drew的解决方案使用sortable.out函数: How to remove an item that is pulled away from it's list? 是一个更好的解决方案
$(function () {
var removeIntent = false;
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
}).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");
},
over: function () {
removeIntent = false;
},
out: function () {
removeIntent = true;
},
beforeStop: function (event, ui) {
if(removeIntent == true){
ui.item.remove();
}
}
});
});
&#13;