拖出时,jquery从droppable中删除

时间:2013-04-30 17:31:38

标签: jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

我已根据示例shopping cart demo实现了jQuery的draggable和droppable。我希望能够从droppable中删除<li>。我认为这可能与droppable out event有关,但ui参数为空。有谁知道解决方案?

3 个答案:

答案 0 :(得分:4)

这是一个完整的工作解决方案,未经过完整测试,您仍应调试它: {重新分配可拖动到丢弃的元素到触发的退出事件} {你应该重新分配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");
        }
    });


});

答案 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? 是一个更好的解决方案

&#13;
&#13;
$(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;
&#13;
&#13;