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>

以上代码用于将listitems拆分为行....如何可以拖放和排序

Answer 1

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

请在下方查看修改后的代码：

修改后的代码：

$（function（）{

$（“＃sortable”）。sortable（）;

$（“＃sortable”）。disableSelection（）;

}）;

查看以下js小提琴链接以获取实例：

jsfiddle.net/mxMKs /

Answer 2

您可以使用jQueryUI sortable框架。

请参阅上面的链接，您将在那里找到使用列表的现场演示。

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

2 个答案: