sortablejs（前端拖拽排序的实现）

源文档：sortablejs - npm
安装

1. npm install sortablejs --save

复制代码

引入项目

1. import Sortable from 'sortablejs';

复制代码

利用示例

1. <template>
2.     <ul id="items">
3.            <li>item 1</li>
4.            <li>item 2</li>
5.            <li>item 3</li>
6.     </ul>
7. </template>
9. <script setup>
10. import Sortable from 'sortablejs';
12. const el = document.getElementById('items');
13. const sortable = Sortable.create(el);
15. </script>
18. <style scoped lang="scss">
20. </style>

复制代码

sortablejs的配置项

1. const sortable = new Sortable(el, {
2.         group: "name",  // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
3.         sort: true,  //是否可以在列表内排序，默认开启
4.         delay: 0, //拖拽延迟时间(通常用于移动端实现长按拖拽)
5.         delayOnTouchOnly: false, //只有当用户使用触摸时才会延迟
6.         touchStartThreshold: 0, // 在取消延迟拖动事件之前，应该移动多少像素(px)
7.         disabled: false, //如果设置为true，则禁用可排序。
8.         store: null,  // @see Store
9.         animation: 150,  // ms,排序时移动项目的动画速度，设置0则无过渡动画
10.         easing: "cubic-bezier(1, 0, 0, 1)", //渐变动画，默认为null,可访问https://easings.net/查看示例
11.         handle: ".my-handle",  // 需要绑定的元素(比如我们想长按某个盒子来拖拽其父元素，那么此时我们仅需要给这个盒子添加这里配置的类型即可)
12.         filter: ".ignore-elements",  //不需要进行拖动的元素(给元素添加这个选项配置的类名后，该元素将不会被拖动)
13.         preventOnFilter: true, // 当触发filter时调用event.preventDefault()
14.         draggable: ".item",  // 指定元素内的哪些项可以被拖动
15.         dataIdAttr: 'data-id', // HTML attribute that is used by the `toArray()` method
16.         ghostClass: "sortable-ghost",  //占位元素类名，可以对此类名进行配置以实现特定效果(拖拽时，sortablejs会生成一个占位元素占据元素的位置，此类名主要用于控制这个元素的样式)
17.         chosenClass: "sortable-chosen",  //所选项目的类名
18.         dragClass: "sortable-drag",  //拖动项的类名
19.         swapThreshold: 1, //交换区阈值
20.         invertSwap: false, //如果设置为true，将始终使用反向交换区
21.         invertedSwapThreshold: 1, //反转交换区的阈值（默认设置为swapThreshold值）
22.         direction: 'horizontal', // 可分拣方向（如果没有给出，将自动检测）
23.         forceFallback: false,  //忽略HTML5 行为并强制回退
24.         fallbackClass: "sortable-fallback",  //使用forceFallback时克隆的DOM元素的类名
25.         fallbackOnBody: false,  //将克隆的DOM元素附加到文档正文中
26.         fallbackTolerance: 0, //以像素为单位指定鼠标在被视为拖动之前应该移动多远。
27.         dragoverBubble: false,//拖拽经过时是否冒泡
28.         removeCloneOnHide: true, //当clone元素未显示时将其删除，而不是将其隐藏
29.         emptyInsertThreshold: 5, //px，鼠标距离必须为空可排序，才能将拖动元素插入其中
32.         setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
33.                 dataTransfer.setData('Text', dragEl.textContent); //HTML5 DragEvent的DataTransfer对象
34.         },
36.         //元素被选中时触发
37.         onChoose: function (/**Event*/evt) {
38.                 evt.oldIndex;  //当前元素在父元素中的索引
39.         },
41.         //元素未被选中时(与onEnd事件相似)
42.         onUnchoose: function(/**Event*/evt) {
43.                 // same properties as onEnd
44.         },
46.         //开始拖拽时
47.         onStart: function (/**Event*/evt) {
48.                 evt.oldIndex;  //当前元素在父元素中的索引
49.         },
51.         //拖拽完成时
52.         onEnd: function (/**Event*/evt) {
53.                 var itemEl = evt.item;  //被拖拽的元素
54.                 evt.to;    //目标列表
55.                 evt.from;  //初始列表
56.                 evt.oldIndex;  //初始列表的初始索引(即拖拽改变之前的列表索引)
57.                 evt.newIndex;  //元素在新父级中的新索引(即拖拽之后形成的列表的索引)
58.                 evt.oldDraggableIndex; //元素在旧父元素内的旧索引，仅计算可拖动元素                 
59.         evt.newDraggableIndex; //元素在新父级中的新索引，仅计算可拖动元素
60.                 evt.clone //克隆元素               
61.         evt.pullMode;  //当项目位于另一个可排序的位置时：如果是克隆，则为“clone”；如果是移
62.         动，则为true
64.         //元素从另一个列表中删除到列表中
65.         onAdd: function (/**Event*/evt) {
66.                 //与onEnd具有相同的属性
67.         },
69.         //更改列表中的排序
70.         onUpdate: function (/**Event*/evt) {
71.                 //与onEnd具有相同的属性
72.         },
74.         //由列表的任何更改调用（添加/更新/删除）
75.         onSort: function (/**Event*/evt) {
76.                 //与onEnd具有相同的属性
77.         },
79.         //元素从列表中删除到另一个列表中
80.         onRemove: function (/**Event*/evt) {
81.                 //与onEnd具有相同的属性
82.         },
84.         //尝试拖动已过滤的元素
85.         onFilter: function (/**Event*/evt) {
86.                 var itemEl = evt.item;  //HTMLElement接收到“mousedown”、“tapstart”事件。
87.         },
89.         //在列表中或列表之间移动项目的事件
90.         onMove: function (/**Event*/evt, /**Event*/originalEvent) {
91.                 // Example: https://jsbin.com/nawahef/edit?js,output
92.                 evt.dragged; // 被拖动元素
93.                 evt.draggedRect; // DOMRect {left, top, right, bottom}
94.                 evt.related; // HTMLElement on which have guided
95.                 evt.relatedRect; // DOMRect
96.                 evt.willInsertAfter; //布尔值，默认为真。为真的情况下Sortable将在目标后插入拖动元素
97.                 originalEvent.clientY; //鼠标位置
98.                 // return false; — for cancel
99.                 // return -1; — 在目标之前插入
100.                 // return 1; — 在目标之后插入
101.                 // return true; —根据方向保留默认插入点
102.                 // return void; —根据方向保留默认插入点
103.         },
105.         //创建元素克隆时调用
106.         onClone: function (/**Event*/evt) {
107.                 var origEl = evt.item;
108.                 var cloneEl = evt.clone;
109.         },
111.         //当拖动元素改变位置时调用
112.         onChange: function(/**Event*/evt) {
113.                 evt.newIndex //使用此事件的最可能原因是获取拖动元素的当前索引
114.                 // same properties as onEnd
115.         }
116. });

复制代码

vue3中的利用演示

1. <template>
2.   <div class="home">
3.      <ul ref="boxRef" >
4.          <li v-for="item in list"  :key="item.id" >
5.             <div class="bread">
6.                 <van-icon name="wap-nav" size="30px"  ></van-icon>
7.             </div>  
8.             <span> {{ item.text }}</span>
9.          </li>
10.      </ul>
11.   </div>
12. </template>
14. <script setup>
15. import { ref,onMounted } from 'vue';
16. import Sortable from 'sortablejs';
18. //sortable实例
19. const instance = ref(null)
21. const list = ref([
22.   {
23.     text: '张三',
24.     id: 1,
25.   },
26.   {
27.     text: '李四',
28.     id: 2,
29.   },
30.   {
31.     text: '王五',
32.     id: 3,
33.   },
34.   {
35.     text: '赵四',
36.     id: 4,
37.   },
38.   {
39.     text: '王大麻子',
40.     id: 5,
41.   },
42. ]);
44. //获取容器dom元素
45. const boxRef = ref(null)
47. onMounted(()=>{
48.   instance.value = Sortable.create(boxRef.value,{
49.          handle:'.bread', //设置了此类名，只有长按有这个类名的元素才能拖动(注意这里要带上选择器符号)
50.          delay:600, //延迟600毫秒才能拖动
51.          chosenClass:"move" //可以拖动时，被拖动项的类名
52.   })
53. })
54. </script>
56. <style scoped lang="less">
57. .move{
58.   background: orange;
59. }
60. .box {
61.   margin: 20px auto;
62.   width: 600px;
63.   height: 600px;
64.   box-shadow: 0 0 3px 5px #ccc;
65. }
66. ul{
67.   margin:10px auto;
68.   width:600px;
69.   li{
70.     margin:10px 0;
71.     display: flex;
72.     align-items: center;
73.     height:80px;
74.     line-height: 80px;
75.     text-align: center;
76.     background:#ccc;
77.     .bread{
78.       margin: 0 20px;
79.       display: flex;
80.       align-items: center;
81.       width:50px;
82.       height:50px;
83.     }
84.   }
85. }
86. </style>

复制代码

在实际的利用中我们通常利用sortablejs做拖拽排序，这就会涉及到异步请求及请求发送失败的情况。那么就会发现一个题目，当我们的请求发送失败后按照常理应该还原排序但是sortablejs似乎并没有给予相应的方法来实现这个功能。我们可以如下操作:

1. <template>
2.   <div class="home">
3.     <ul ref="boxRef" @sort="onSort">
4.       <li v-for="item in list" :key="item.id">
5.         <div class="bread">
6.           <van-icon name="wap-nav" size="30px"></van-icon>
7.         </div>
8.         <span> {{ item.text }}</span>
9.       </li>
10.     </ul>
11.   </div>
12. </template>
14. <script setup >
15. import { ref, onMounted } from 'vue';
16. import Sortable from 'sortablejs';
18. //获取容器dom元素
19. const boxRef = ref(null);
21. const list = ref([
22.   {
23.     text: '张三',
24.     id: 1,
25.   },
26.   {
27.     text: '李四',
28.     id: 2,
29.   },
30.   {
31.     text: '王五',
32.     id: 3,
33.   },
34.   {
35.     text: '赵四',
36.     id: 4,
37.   },
38.   {
39.     text: '王大麻子',
40.     id: 5,
41.   },
42. ]);
45. //sortable实例
46. const instance = ref(null);
49. //排序时触发的回调函数
50. const onSort = async (value) => {
51.   const { oldIndex, newIndex, from } = value;
52.   try {
53.     //模拟的异步请求失败情况
54.     await new Promise((resolve, reject) => {
55.       reject(new Error('发送错误'));
56.     });
57.   } catch (error) {
58.     //请求失败时还原排序
59.     const List = Array.from(from.children);
60.     const item = List.splice(newIndex, 1)[0];
61.     if (oldIndex > newIndex) {
62.       from.insertBefore(item, List[oldIndex + 1]);
63.     } else {
64.       from.insertBefore(item, List[oldIndex]);
65.     }
66.   }
67. };
70. onMounted(() => {
71.   //初始化sortablejs实例
72.   instance.value = Sortable.create(boxRef.value, {
73.     handle: '.bread', //设置了此类名，只有长按有这个类名的元素才能拖动(注意这里要带上选择器符号)
74.     //  delay:600, //延迟600毫秒才能拖动
75.     chosenClass: 'move', //可以拖动时，被拖动项的类名(可以自定义样式)
76.   });
77. });
78. </script>
80. <style scoped lang="less">
81. .move {
82.   background: orange;
83. }
84. .box {
85.   margin: 20px auto;
86.   width: 600px;
87.   height: 600px;
88.   box-shadow: 0 0 3px 5px #ccc;
89. }
90. ul {
91.   margin: 10px auto;
92.   width: 600px;
93.   li {
94.     margin: 10px 0;
95.     display: flex;
96.     align-items: center;
97.     height: 80px;
98.     line-height: 80px;
99.     text-align: center;
100.     background: #ccc;
101.     .bread {
102.       margin: 0 20px;
103.       display: flex;
104.       align-items: center;
105.       width: 50px;
106.       height: 50px;
107.     }
108.   }
109. }
110. </style>

复制代码

这样就可以实现一样寻常的工作需求，考虑到每次写这么多东西会很贫苦，我们可以利用vue的自定义指令将它封装成一个指令。现在已经有插件完成了这一步调，各人也可以实验一下这个插件。
传送门:vue3-sortablejs - npm

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。