使用jquery ui嵌套拖放

To Drop items into dropped items

将项目拖放到已删除的项目中

<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>

I have following code

我有以下代码

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

How can i drop list1 item into list2 directly and list2's ul Layout tag which will come from list3 by drag and drop API of jquery?

我如何直接将list1项目放入list2和list2的ul Layout标签，它将通过拖放jquery的API来自list3？

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

小提琴：http：//jsfiddle.net/bhumi/nkvzdwk9/1/

1 个解决方案

#1

So what you want to achieve can be summarized like this

所以你想要实现的目标可以这样概括

Step 1 : Drag and drop some Layout(which is inside li tag) from #list3 to #list2.

步骤1：将一些布局（位于li标签内）从＃list3拖放到＃list2。

Step 2 : Drag and drop some media(which is also inside li tag) from #list1 to #list2 directly and also #list2 Layout's ul tag .drop-container which is now has been dragged to #list2 .

步骤2：将一些媒体（也在li标签内）从＃list1直接拖放到＃list2，并将＃list2布局的ul标签.drop-container拖放到＃list2。

Currently , you are dropping #list1 li into #list 2 , but it should be dropped into .drop-container of #list2 or #list2(if you want to add #list li to #list2 directly)

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

so #list1 li should be connected to .drop-container of #list2 and #list2

所以＃list1 li应该连接到＃list2和＃list2的.drop-container

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

After that, the sortable API needs to be added to .drop-container of #list2 only after #list2 has received some Layout from #list3 of

之后，只有在＃list2从＃list3收到一些布局之后，才需要将可排序的API添加到＃list2的.drop-container中。

So call sortable on #list2 .drop-container inside receive method of sortable of list2. Now your receive function of #list2 becomes

所以在＃list2 .drop-container里面调用可排序的list2的sortable接收方法。现在你的＃list2的接收功能变成了

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);

    }
});

WORKING DEMO, full code

工作演示，完整代码

#1