什么是sortable及sortablejs？如何使用它们实现拖拽排序功能？

在现代网页开发中，拖拽排序是一个非常常见的功能。而Sortable及Sortablejs便是能够帮助我们快速实现拖拽排序功能的JS库。Sortable是一个基于原生JavaScript库的拖拽排序插件，而Sortablejs则是基于Sortable开发的一种更加轻量的拖拽排序库。

要使用这两个库实现拖拽排序功能，首先需要在HTML文件中引入相关的JS文件，然后要指定想要实现拖拽排序的元素的类名或ID。具体代码如下：

```

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

var sortable = new Sortable(document.getElementsByClassName("sortable")[0]);

这个例子中的JS代码就是使用Sortable库实现拖拽排序的核心代码。我们调用了`new Sortable()`方法，并将想要实现排序的元素传递给它，这里是使用了`getElementsByClassName()`方法来获取这个元素。

使用了Sortable或Sortablejs之后，我们还可以通过一些配置项来自定义拖拽排序的样式和行为。我们可以设置一些回调函数来监听拖拽排序过程中的各个事件，包括拖拽开始、拖拽结束、拖拽过程中元素位置发生改变等。在配置项中，还有一些属性可以帮助我们控制拖拽时的样式、限制拖拽元素的范围等。

例如：

var sortable = new Sortable(document.getElementsByClassName("sortable")[0], {

animation: 150,

ghostClass: "ghost",

onSort: function (event) {

console.log("sorted!", event);

},

});

在这个例子中，我们设置了一个`ghostClass`属性来指定拖拽时的元素样式，同时也设置了一个`onSort`回调函数来监听元素排序的过程。当排序完成后，控制台就会输出一个"sorted!"的消息。

使用Sortable及Sortablejs来实现拖拽排序功能非常方便。只需要简单地引入相关JS文件，指定想要实现排序的元素，然后就可以使用各种配置项来自定义拖拽排序的样式和行为。无论是在PC端还是移动端，都可以轻松实现拖拽排序功能，为用户提供更好的交互体验。