2

我想要一个具有多个级别的可排序列表。我在这个博客上试过，因为它很容易描述事情

但是当我尝试多层次时它不起作用:(

这是我需要的结构

<div class='sortable'>
    <div class='item1'>aa</div>
    <div class='item1'>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'>ee</div>
</div>

还有剧本

$(".sortable").sortable();
$(".item1").sortable();

当我分配sortable()tosortable class和子级时item1 class，所有item1和item2类都将分配该draggable="true"属性，我不能将子级拖到下面item1。item2元素只需要拖拽到父元素内部item1

有什么好的解决方案可以同时使两个级别都可排序

谢谢

4

2 回答 2

2

这是您需要的行为吗？

http://jsfiddle.net/JKqrX/1/

这个想法是使“item1”成为一个单独的可排序对象，它具有子元素并具有所有“item1”的句柄，以便您可以轻松地对两个级别进行排序。您可以将任何图像或拖动图标放在处理程序的位置以进行拖动

//HTML
<div class='sortable'>
    <div class='item1'><span class="handle">handle   </span>aa</div>
    <div class='item1 has-child'>
        <span class="handle">handle   </span>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'><span class="handle">handle   </span>ee</div>
</div>

//JS
$(".has-child").sortable({
    items: ".item2"
});
$(".sortable").sortable({
    handle: ".handle"
});
于 2013-07-22T13:56:27.790 回答
0

你可以尝试这样的事情：

<div class='sortable'>
    <div class='item1'>aa</div>
    <div class='item3'>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'>ee</div>
</div>

$(".item3").sortable({
    connectWith: ".sortable"
});
$(".sortable").sortable({
    connectWith: ".item3"
}).disableSelection();
于 2013-07-04T18:57:28.723 回答