jquery - 如何使无序列表可拖动多行

Question

如何使无序列表可拖动多行如下（使用ul-li）

下面的代码用于将列表项拆分为行....如何可以拖动和排序

    <script type="text/javascript">
        debugger;
        jQuery(function ($) {
            var size = 5,//Change number for the rows you want to display
          $ul = $("ul"),
          $lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
          loop = Math.ceil($lis.length / size),
          i = 0;

            $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");

            for (; i < loop; i = i + 1) {
                $ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + 5)).insertAfter($ul); ////Change number for the rows you want to display
            }
        });

    </script>

<div>
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
<li>12</li>
    </ul>
</div>

上面的代码用于将列表项拆分为行....如何可以拖动和排序

Answer 1

不知道为什么要包含那么多用于排序的 js 代码。您需要做的就是为列表分配一些 id/class 并将其标记为可排序函数。

请检查下面的修改代码：

修改后的代码：

$（函数（）{

$( "#sortable" ).sortable();

$( "#sortable" ).disableSelection();

});

检查下面的 js fiddle 链接以获取实时示例：

jsfiddle.net/mxMKs/

Answer 2

您可以使用jQueryUI 可排序框架。

参考上面的链接，你会发现一个使用列表的现场演示。