vue3中使用sortablejs

主要介绍一个在VU3中使用的sortable助手工具，vue3-sortablejs，主要是这个助手支持传统式(非es6)前端开发

直接上活：

示例：

c 复制代码

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://unpkg.com/vue3-sortablejs/dist/vue3-sortablejs.global.js"></script>

<div id="app">
  <div v-sortable>
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
</div>

<script>
  const { createApp } = Vue;

  const app = createApp();

  app.use(sortablejs);

  app.mount("#app");
</script>

options选项，可以看我之前发的一个帖子，兼容性比较好的拖放排序插件Sortable.js 中文文档

支持的事件：

html 复制代码

@ready: Sortable is ready and attached to the component
@choose: element is chosen
@unchoose: element is unchosen
@start: element dragging started
@end: element dragging ended
@add: element is dropped into the list from another list
@update: changed sorting within list
@sort: called by any change to the list (add / update / remove)
@remove: element is removed from the list into another list
@filter: attempt to drag a filtered element
@move: event when you move an item in the list or between lists
@clone: called when creating a clone of element
@change: called when dragging element changes position

github:vue3-sortablejs

链接：https://pan.quark.cn/s/4baa38367780

提取码：DxAU