Javascript复杂的拖放排序

标签 javascript jquery ajax jquery-ui

我有一个问题,我尝试进行复杂的排序:示例

    without group
    -child0

    -- GROUP1
    -child1
    -child2

    -- GROUP2
    -child3
    -child4

我需要对组进行排序(将所有组向下移动),以及组中的所有子项和子项(使 child4 高于 child3),以及组之间的子项(将 child4 移动到 group2 ),或者使子项脱离组,我可以使用 jquery ui 可排序或任何现成的解决方案来实现此目的吗?

最佳答案

试试这个代码:http://jsfiddle.net/lotusgodkk/28nMJ/201/

$(function () {
$('ul.mainlist').sortable({
    connectWith: 'ul',        
});
$('ul.sublist').sortable({
    connectWith: 'ul'
 });
});

HTML:

<ul class='mainlist'>
 <li>One (a)</li>
 <li>Two (a)</li>
 <li class="hasItems">Three (a)
     <ul class="sublist">
         <li>subitem1-1</li>
         <li>subitem1-2</li>
         <li>subitem1-3</li>
         <li>subitem1-4</li>
     </ul>
 </li>
 <li>Four (a)</li>
 <li class="hasItems">Five (a)
     <ul class="sublist">
        <li>subitem2-1</li>
        <li>subitem2-2</li>
        <li>subitem2-3</li>
        <li>subitem2-4</li>
    </ul>
 </li>
 </ul>
 <ul class='mainlist'>
  <li>1</li>
  <li>Two (b)</li>
  <li>Three (b)</li>
 </ul>

关于Javascript复杂的拖放排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23386163/

相关文章:

jquery - ajax 成功函数未触发 MVC

javascript - 如何将剪切面渲染为实体对象

javascript - 将滚动条添加到 DataTable 的一侧(封装 DT)

javascript - 共享服务: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

javascript - 如何通过具有特定选定值的选择返回 div 中的表?

javascript - 将文本框的父名称和 id 附加到新生成的文本框

javascript - XMLHttpRequest.open第三个参数false在iPad上不给出php mysql查询结果

javascript - AngularJS promise 不使用 FileReader 解析文件

javascript - 如何使用rails自定义鼠标指针?

ajax - Sencha ExtJS。无法使用 Ext.Ajax.request 跨域发送 POST 请求