jquery可排序javascript DOM

我有一组嵌套的对象要排序。下面的第一个例子是我的原型/测试。它工作得很好。外部组排序，内部组排序。内部组被锁定在内部-无法移动到外部。就像我想要的一样

<div id="example5">
    <ul class="table">
        <li class="group" style="width:300px;">Group 1
            <ul style="padding:0px;">
                <li class="field">Group 2</li>
                <li class="field">Group 3</li>
            </ul>
        </li>
        <li class="group">Group 2</li>
        <li class="group">Group 3</li>
        <li class="group">Group 4</li>
    </ul>
</div>

这就是我在我的程序中试图传授的结构。在我看来，一切都是一样的，只是增加了一些复杂性。很明显，我不知怎么打破了它。外部组排序，而内部组不排序

我认为需要注意的是，在前面的示例中，脚本和html位于同一个文件中。在下面的第二个示例中，html是使用createElement（）函数动态创建的

接下来，这个网站。。。从“检查元素”输出复制。它和我想要的一模一样。是我生成它的网站。基本上，向字段名添加一个值，它将生成一个新字段。在第一个文本框中输入值将启动字段的“分组”。我不明白这为什么不起作用

---

因此，如果我静态地重新创建页面，但在动态创建的页面上无法正常工作，那么它就可以正常工作。在第二个示例中，字段容器是一个

li

，字段名是

div

标记。第一个示例中，字段容器作为

ul

标记，字段作为

li

。我想这可能是你的问题

---

请参见此处的fiddle

您可以尝试将自定义类添加到要排序的元素中，然后在可排序的

项

选项中使用该类

演示：

HTML:

---

经过大量的修改和麻烦，将可排序函数重新定位到创建DOM对象的函数中解决了这个问题。我认为按照最初的结构，一些DOM对象是在sortable函数之后创建的，而sortable并不知道它们的存在

---

所以，是的，我的代码在结构上还有一些问题。谢谢大家的帮助

日志表分区也被关闭了。由于某种原因没有显示在这里。您是否在创建“container”元素后执行

sortable

调用？是。在本例中，元素div“logtable”和ul“ultable”是html。其他一切都是创造出来的。创建元素后，在链接文件的最末端是sortable函数。您的代码肯定有其他问题。下面的fiddle演示了动态添加元素或容器的方法。谢谢kamlesh。我试过定制商品。出于某种原因，它在li元素而不是ul元素上工作——而且这种行为很奇怪。我在问题中添加了几个链接，显示了从静态html创建的工作模型，以及一个指向动态可创建表的链接

$("#example5 ul").sortable({

});

<div id="logtable">
    <ul id="ultable" class="table ui-sortable">
        <li id="" class="groupcontainer" style="width:auto; margin:2px;">
            <ul>
                <li class="fieldcontainer">
                    <div class="fieldname"></div>
                    <div class="fieldgroup"></div>
                    <div class="fieldname"></div>
                    <div class="fieldname"></div>
                    <div class="fieldname"></div>
                </li>
            </ul>
        </li>
        <li id="a" class="groupcontainer" style="margin: 2px;"></li>
        <li class="groupcontainer" style="margin: 2px;"></li>
    </ul>
</div>

$(function() {
    var fieldstart;
    var fieldend;
    $("#logtable ul").sortable({
        start: function(event, ui) { 
            fieldstart = ui.item.index();   
        },
        update: function(event, ui) { 
            fieldend = ui.item.index();
            var fieldcount = jsonstring.tracelog.fields.length;
            var fieldobjects = jsonstring.tracelog.fields;
            var placed = false;

            jsonstring.tracelog.fields.move(fieldstart, fieldend);

            writejson();    
        }
    });
});

<div id="logtable">
    <ul id="ultable" class="table ui-sortable">
        <li id="" class="groupcontainer item" style="width:auto; margin:2px;">Z
            <ul>
                <li class="fieldcontainer">
                    <div class="fieldname item">A</div>
                    <div class="fieldgroup item">B</div>
                    <div class="fieldname item">C</div>
                    <div class="fieldname item">D</div>
                    <div class="fieldname item">E</div>
                </li>
            </ul>
        </li>
        <li id="a" class="groupcontainer item" style="margin: 2px;">F</li>
        <li class="groupcontainer item" style="margin: 2px;">G</li>
    </ul>
</div>

$(function () {
    var fieldstart;
    var fieldend;
    $("#logtable ul").sortable({
        items: '.item',//Custom class of items which needs to be sorted.
        start: function (event, ui) {
            fieldstart = ui.item.index();
        },
    });
});