Sortable.js：可排序列表的实现

Sortable.js是一个简单易用的JavaScript库，它允许我们实现可排序列表功能。无论是拖动条目，改变条目顺序还是对列表进行排序，Sortable.js都可以轻松处理。

一、基本使用

首先，我们需要引入Sortable.js库文件到我们的项目中：

<script src="path/to/sortable.js"></script>

接下来，创建一个简单的可排序列表。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

在JavaScript代码中，我们可以这样初始化我们的技能列表：

var myList = document.getElementById('myList');
new Sortable(myList);

上面的代码将创建一个Sortable.js实例，并将它应用到id为“myList”的ul元素上。现在，我们就可以通过拖动我们的列表项来改变它们的顺序了。

二、配置选项

Sortable.js提供了许多配置选项，使我们能够对拖动、排序和动画等行为进行自定义。

1. 支持排序的元素

我们可以使用draggable类指定可排序的元素。默认情况下，Sortable.js将可拖动元素的子元素识别为可排序元素。例如，以下代码将为li元素启用拖放功能：

<ul id="myList">
  <li><span class="draggable">Item 1</span></li>
  <li><span class="draggable">Item 2</span></li>
  <li><span class="draggable">Item 3</span></li>
</ul>

在初始化Sortable实例时，我们需要使用draggable选项指定可拖动的元素类：

var myList = document.getElementById('myList');
new Sortable(myList, {
  draggable: '.draggable'
});

2. 排序方式

我们可以使用direction选项设置列表的排序方式。默认情况下，Sortable.js将列表项从上到下排序。以下代码将使列表项从左到右排列：

<ul id="myList">
  <li><span class="draggable">Item 1</span></li>
  <li><span class="draggable">Item 2</span></li>
  <li><span class="draggable">Item 3</span></li>
</ul>

var myList = document.getElementById('myList');
new Sortable(myList, {
  draggable: '.draggable',
  direction: 'horizontal'
});

3. 拖动和排序的限制

我们可以使用handle选项设置拖拽手柄，以控制哪些部分可以被拖拽。

<ul id="myList">
  <li><span class="drag-handle"><i class="fa fa-bars"></i></span> Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

var myList = document.getElementById('myList');
new Sortable(myList, {
  handle: '.drag-handle'
});

我们还可以使用group选项将多个列表组合在一起，并定义哪些列表可以同时拖动。

<ul id="list1" class="connected-sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="list2" class="connected-sortable">
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

new Sortable(document.getElementById('list1'), {
  group: 'shared'
});

new Sortable(document.getElementById('list2'), {
  group: 'shared'
});

4. 动画效果

我们可以使用animation选项启用列表项移动的动画效果。默认情况下，Sortable.js会降低列表项的不透明度来表示它们正在移动。

var myList = document.getElementById('myList');
new Sortable(myList, {
  animation: 150
});

三、事件处理

Sortable.js还提供了各种事件，可以用于在排序过程中响应用户的交互。

1. Sortable.js事件列表

Sortable.js提供了几个事件，可以用于管理拖放过程。下面是部分事件列表：

事件名称	描述
`sort:start`	拖动操作开始时触发的事件。
`sort:move`	拖动操作中触发的事件。
`sort:stop`	拖动操作结束时触发的事件。
`sort:sorted`	排序完成后触发的事件。

2. 事件处理实例

我们可以使用这些事件处理拖动和排序过程中的各种行为。

var myList = document.getElementById('myList');
new Sortable(myList, {
  onMove: function (evt) {
    // 只允许拖动li元素
    var element = evt.related;
    return element.tagName === 'LI';
  },
  onEnd: function (evt) {
    // 操作完成后发送Ajax请求
    var order = Sortable.toArray(myList);
    $.ajax({
      url: '/save-order',
      type: 'POST',
      data: {order: order},
      dataType: 'json'
    });
  }
});

上面的代码使用了onMove和onEnd事件，分别用于控制拖动操作和完成操作后的后续处理。

四、总结

遵循上述方法，我们可以很容易地实现一个可排序的列表，并在拖动和排序过程中触发各种事件来响应用户的行为。Sortable.js作为一个非常流行和易于使用的排序库，可以广泛应用于各种Web应用程序中，提高用户体验。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/233804.html