当前位置：首页 > news >正文

插件 sortablejs：HTML元素可拖动排序

news 2025/6/26 22:16:12

插件 sortablejs

用于可重新排序拖放列表的JavaScript库；
关键链接：npm 地址 Github 地址

安装

npm i sortablejs

引入

import Sortable from "sortablejs"

HTML

<ul id="items"><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li><li>item 5</li>
</ul>
<!-- 或者 -->
<div id="items"><div>item 1</div><div>item 2</div><div>item 3</div><div>item 4</div><div>item 5</div>
</div>

初始化

代码第 1行，注意是获取父元素。但可拖动的是其子元素
代码第 2行，第二个参数有很多属性和回调方法：如：animation, onStart, onEnd。完整代码 中使用方法 onEnd，如想了解更多参数，可在此查看 Options；

// 获取父元素
let el = document.getElementById('items');
// 初始化
Sortable.create(el, {});

效果

在这里插入图片描述

完成代码

<template><div class="sortabele-main"><ul id="items"><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li><li>item 5</li></ul></div>
</template><script>
import Sortable from "sortablejs"export default {methods: {// 初始化initSortable() {let el = document.getElementById('items');Sortable.create(el, {// 被移动的元素 oldIndex newIndex 新下标onEnd: ({ oldIndex, newIndex }) => {console.log(newIndex, oldIndex);}});}},mounted() {this.initSortable();}
}
</script><style lang="stylus" scoped>
.sortabele-main {padding: 20px;ul {list-style-type: none;li {width: 90px;height: 30px;line-height: 30px;text-align: center;background: #ccc;cursor: pointer;margin: 8px;}}
}
</style>