我已经基于示例购物车演示实现了 jQuery 的可拖动和可放置。<li>
当您将其拖出可放置对象时,我希望能够将其从可放置对象中删除。我认为这可能与droppable out 事件有关,但 ui 参数为空。有谁知道解决方案?
问问题
8283 次
3 回答
5
这是一个完整的工作解决方案,没有经过完整的测试,你仍然应该调试它:{reassign draggable to dropped element to fired drop out event} {you should reassign droppable too!}
$(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");
}
});
});
于 2013-04-30T18:06:26.163 回答
0
您可以使用 CSS 更改列表样式。像这样的东西应该工作:
.ui-droppable .ui-sortable ol { list-style: none outside none; }
或者更好
#cart ol { list-style: none outside none; }
希望这可以帮助!
于 2013-04-30T17:40:37.040 回答
0
A.Wolff 的解决方案让我走上了正轨,但是通过 Drew 的解决方案使用了 sortable.out 函数,来自这篇文章: 如何删除从列表中拉出的项目? 是一个更好的解决方案
$(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();
}
}
});
});
于 2015-04-10T16:17:42.740 回答