sortable用法
时间: 2023-07-16 17:15:39 浏览: 59
Sortable是一个JavaScript库,用于实现可排序的列表或表格。它提供了一个易于使用的API,允许您轻松地将拖放排序功能添加到您的网站中。
以下是Sortable的基本用法:
1.引入Sortable库
在您的HTML文件中,使用script标签引入Sortable库。
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
```
2.创建可排序的列表或表格
在您的HTML文件中,创建一个包含可排序元素的列表或表格。
```html
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
3.初始化Sortable
使用JavaScript代码初始化Sortable。
```javascript
var myList = document.getElementById('myList');
new Sortable(myList);
```
4.自定义Sortable
您可以使用Sortable提供的选项和事件来自定义Sortable。例如,您可以更改拖动手柄的类名,或在元素排序之后执行某些操作。
```javascript
var myList = document.getElementById('myList');
new Sortable(myList, {
handle: '.drag-handle',
onEnd: function() {
console.log('Sort complete!');
}
});
```
以上是Sortable的基本用法,您可以在Sortable的官方文档中找到更多选项和事件的说明。