拖出时，jquery从droppable中删除 [英] jquery remove from droppable when dragged out

问题描述

我已根据示例购物车演示实现了jQuery的可拖动和可放置。我希望能够在将dropxable拖出droppable时从droppable中删除< li> 。我认为这可能与可放弃事件有关，但是ui参数是空。有没有人知道解决方案？

I have implemented jQuery's draggable and droppable based on the example shopping cart demo. I would like to be able to remove the <li> from the droppable when you drag it out of the droppable. I thought this might have something to do with the droppable out event but the ui parameter is empty. Does anyone know the solution?

推荐答案

这是一个完整的工作解决方案，没有经过全面测试，你仍然可以调试它：
{重新分配可拖动到丢弃的元素到被解雇的退出事件}
{你应该重新分配droppable！}

This is a complete working solution, not completly tested, you should still debug it maybe: {reassign draggable to dropped element to fired drop out event} {you should reassign droppable too!}

SEE 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中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！