使用jQuery UI实现嵌套拖放

Question

使用jQuery UI实现嵌套拖放

10

将物品拖放到已投放的物品中。

<table id='list1' >
</table>

<ul id="list2" >
</ul>

<table id='list3' >
<tr><td>test<ul style="min-height: 100px;border:1px solid red" class="drop-container"></ul></td></tr>
</table>

我有以下代码

$( "#list3 li" ).draggable({
            connectToSortable: "#list2",
            helper: "clone",
            revert: "invalid"
});
$( "#list1 li" ).draggable({
        connectToSortable: "#list2",
        helper: "clone",
        revert: "invalid",
        greedy: true
});

如何使用jQuery的拖放API将列表1的项目直接拖放到来自列表3的列表2的

Fiddle: http://jsfiddle.net/bhumi/nkvzdwk9/1/

- Bhumi Shah

你想要对项目进行排序并在列表之间拖放吗？还是其他的需求？ - Irvin Dominin

我想在列表之间进行拖放，这意味着我首先从列表3中将项目拖到列表2中，然后再将其从列表1中的已拖动项目的内部区域放下。 - Bhumi Shah

首先拖动layout1，然后在其中拖动媒体。 - Bhumi Shah

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bugwheels94 · Accepted Answer

所以，您想要实现的目标可以总结如下：

第一步：从 #list3 拖放一些布局（位于 li 标签内）到 #list2 中。

第二步：直接从 #list1 拖放一些媒体（也位于 li 标签内）到 #list2 中，并且也要拖动已经被拖到 #list2 的布局的 ul 标签 .drop-container。

目前，您正在将 #list1 li 拖放到 #list2 中，但应该将其拖放到 #list2 的 .drop-container 或 #list2（如果您想直接将 #list li 添加到 #list2 中）。

因此，#list1 li 应该连接到 .drop-container of #list2 和 #list2。

$("#list1 li").draggable({
    connectToSortable: "#list2 .drop-container,#list2",//both element should be connected
    helper: "clone",
    revert: "invalid",
    greedy: true
});

在此之后，需要将sortable API添加到#list2的.drop-container中，但仅在#list3向其传递了一些布局之后才能执行。因此，在list2的sortable的receive方法中调用#list2 .drop-container上的sortable。现在，#list2的receive函数如下：

receive: function (event, ui) {
        console.log(ui);
        console.log(event);
        var this_id = $(ui.item).attr("id");
        var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

        $(itemContext).attr("id", this_id);
        $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
        $(itemContext).html(preview);

 //Modified code starts here, the sortable should be added here

        $("#list2 .drop-container").sortable({//call sortable to every element which you want to drop to.
            connectWith: "#list1",
            over: function () {
                removeIntent = false;
            },
            out: function () {
                removeIntent = true;
            },
            beforeStop: function (event, ui) {
                itemContext = ui.item.context;
                if (removeIntent == true) {
                    ui.item.remove();
                    disp($("#list2").sortable('toArray'));
                }
                //console.log(itemContext);

            },
            receive: function (event, ui) {
                console.log(ui);
                console.log(event);
                var this_id = $(ui.item).attr("id");
                var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

                $(itemContext).attr("id", this_id);
                $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
                $(itemContext).html(preview);

                //console.log(this_id);
                //console.log(preview);

            }
        }); //.disableSelection()

    //end of modified code

        //console.log(this_id);
        //console.log(preview);

    }
});

演示效果，完整代码