Javascript 使用jquery拖放移动或排序内部

我有以下jquery拖放代码。我已经嵌套了拖放功能

尝试在内部移动丢弃的项目时，它不起作用

我已尝试使用以下行更改连接

connectWith: \".ui-sortable\",

见下图

---

但不起作用。请帮助。

我刚刚检查了小提琴中的HTML，我发现如果我们将列表2移出工作区，它就会工作

请查收

---

检查这个…我修改了你的代码一点…你现在可以删除你在你的图片中描述的项目

$(function () {
    //Radix: Added layout list
    $("#list3 li").draggable({
        start: function(event, ui) {
        console.log('started dragging layout')
        },
        connectToSortable: "#list2",
        helper: "clone",
        revert: "invalid",
        stop:function(){
        }
    });

    //Radix End
        $("#list1 li").draggable({
            connectToSortable: "#list2 .drop-container,#list2",
            helper: "clone",
            revert: "invalid",
            greedy: true
        });

        $("#list2").sortable({
            connectWith: "#list1",
            over: function () {
                removeIntent = false;
                $(this).css("background-color", "green");
            },
            out: function () {
                removeIntent = true;
                $(this).css("background-color", "orange");
            },
            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", '530px').addClass("ui-state-default").height('auto');
                $(itemContext).html(preview);

                $("#list2 .drop-container").sortable({
                    connectWith: ".drop-container",
                    over: function () {
                        removeIntent = false;
                        $(this).css("background-color", "pink");
                    },
                    out: function () {
                        removeIntent = true;
                        $(this).css("background-color", "blue");
                    },
                    beforeStop: function (event, ui) {
                        itemContext = ui.item.context;
                        if (removeIntent == true) {
                            //ui.item.remove();
                            //disp($("#list2").sortable('toArray'));
                        }
                        //console.log(itemContext);

                    }

                }); //.disableSelection()
            }       
        }); //.disableSelection()

     $("#list2").bind("sortupdate", function (event, ui) {
        //console.log($('#list2'));
        var result = $('#list2').sortable('toArray');
        var str='';
        for(var i=0;i<result.length;i++){
                str+=result[i]+"|";
                var tmp="#"+result[i]+" .drop-container";
            if($(tmp).length>0){
                $(tmp).each(function(){
                    if($(this).children("li").length){
                        str+=$(this).parent()[0].id+"|";
                        $(this).children("li").each(function(){
                            str+=this.id+"|";

                        })
                    }
                })
            } 
        }       //console.log(result);
        //alert(str);
    });
});

名称 ->布局1 添加媒体左添加媒体右添加媒体前-> ->布局2 添加媒体左添加媒体右添加媒体ASD-> ->布局3 添加新媒体-> 媒体 文件名 组 上传时间 预览 ->test.jpg -> 测试介质 2015年3月11日 ->test.jpg -> 测试介质 2015年3月26日 ->testimg.jpg -> 测试介质 2015年3月26日 ->testimg1.jpg -> 测试介质 2015年3月25日 你的名单

---

尝试使用jQueryUISortable-like

另外，试着把它建起来

HTML:

CSS:

---

您必须在特定事件中的元素之间建立精确的连接，因为在不同的父级之间有大量的元素拖放

当它们进入所有接收事件的列表2中时，需要在*.jpg上调用draggable

$("#list2").find("#test\\.jpg,#testimg\\.jpg,#testimg1\\.jpg").draggable({
    connectToSortable: "#list2 .drop-container,#list2",
    revert: "invalid",
    stop:function(){
    }
});

然后正确使用connectWith选项

---

请检查我的答案。很难理解你想要什么。很多细节，但没有具体的。排序、拖动和更多的拖动，但每一点都需要大量的细节。@DaveAlperovich：如果您查看演示，它太容易理解了。我只想允许将删除的内容移动到我现在尝试移动时，内容被删除的区域。@Bhumisah，我认为引用有问题，请尝试调试。@HP's411:您能提供解决方案吗。我不明白引用是什么意思？我想允许将删除的内容从放置容器移动到列表2，反之亦然，我想将放置在放置容器中的内容移动到列表2这是一个基本示例，不是嵌套级别。如果你可以创建演示，因为我需要那么我将是有用的

<h3>Name</h3>
<ul id="sortable1" class="droptrue">
    <li class="ui-state-default">Layout 1</li>
    <li class="ui-state-default">Layout 2</li>
    <li class="ui-state-default">Layout 3</li>
</ul>

<h3>Media</h3>
<ul id="sortable2" class="droptrue">
    <li class="ui-state-default">test.jpg</li>
    <li class="ui-state-default">test.jpg</li>
    <li class="ui-state-default">testimg.jpg</li>
    <li class="ui-state-default">testimg.jpg1</li>
</ul>

<h3>Your List</h3>
<ul id="sortable3" class="droptrue">
    <li class="ui-state-default">Drop here</li>
</ul>

<br style="clear:both" />

$(function() {
    $("ul.droptrue").sortable({
        connectWith: "ul"
    });

    $("ul.dropfalse").sortable({
        connectWith: "ul",
        dropOnEmpty: false
    });

    $("#sortable1, #sortable2, #sortable3").disableSelection();
});

#sortable1,
#sortable2,
#sortable3 {
  list-style-type: none;
  margin: 0;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

$("#list2").find("#test\\.jpg,#testimg\\.jpg,#testimg1\\.jpg").draggable({
    connectToSortable: "#list2 .drop-container,#list2",
    revert: "invalid",
    stop:function(){
    }
});