Question

我已经制作了这个示例代码来说明我的问题：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>

        <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

        <script language="javascript">
                function InitSortable() {
                    $('.sortable').sortable();
                }    
        </script>

        <style>           
            .sortable { width: 200px; padding: 10px; border: solid 1px black; } 
            .sortable div { float: left; width: 80px; border: solid 1px black; margin-left: 4px; margin-bottom: 4px; background-color: White; padding: 2px; } 
        </style>    
    </head>
    <body onload="InitSortable()">            
        <div class="sortable">   
            <div>Process A</div>
            <div>Process B</div>
            <div>Process C</div>

            <div>File A</div>
            <div>File B</div>
            <div>File C</div>   
        </div>            
    </body>
</html>

我希望能够对进程A，进程B和进程C进行排序，而不会弄乱文件A，文件B和文件C上的排序。如果我尝试对任何文件进行排序，我希望它以相反的方式工作元件。

我试图将这两个列表放在他们自己的div中，但这会破坏设计，所有元素都应该向左浮动。

我也玩过jquery中的items选项，但我只设法让其中一个列表工作。

Answer 1

你说你已经尝试将2个列表放在他们自己的div中但是“打破了设计”。我倾向于争辩 - 你可以创造几乎任何你喜欢的视觉外观，无论是分为2个div还是只有一个。尝试添加包装器div来封装您的float: left样式，然后为每个可排序列表使用不同的子div。这应该可以解决你的问题。

Answer 2

每次要进行某些排序时，您需要初始化/销毁sortable，每次初始化它时，您都会对所需的元素类型进行操作。

因此，为要分组的每种元素添加一个不同的类..

    <div class="sortable">
        <div class="process">Process A</div>
        <div class="process">Process B</div>
        <div class="process">Process C</div>

        <div class="file">File A</div>
        <div class="file">File B</div>
        <div class="file">File C</div>   
    </div>

在你的脚本中使用

function InitSortable() {
    $('.sortable > div').mousedown(function(){
        $(this).closest('.sortable').sortable({
            items:'.'+this.className,
            stop:function(){
                $(this).sortable('destroy');
            }
        });
    });
}  

$(InitSortable);

http://jsfiddle.net/gaby/h6aPj/

演示

同一列表中的2种不同的排序

2 个答案: