前端拖拽排序方案

vue.draggable

• 基于Sortable.js的vue组件详细信息可以查看Github地址

• 安装

  yarn add vuedraggable
  npm i -S vuedraggable
  <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
  <!-- CDNJS :: Sortable (https://cdnjs.com/) -->
  <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
  <!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
  

• 使用

  <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
      <transition-group>
         <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
      </transition-group>
  </draggable>
   import draggable from 'vuedraggable'
    ...
    export default {
          components: {
              draggable,
          },
    ...
  

SortableJS

<template>
ul
    <li :data-id="102"/>
    <li :data-id="100"/>
    <li :data-id="101"/>
<template>    
import Sortable from 'sortablejs'
const nodes = document.quertySelect('.my-ul')
// 可以在组件初始化结束之后,使用JS 设置自定义属性
const sortable = Sortable.create(nodes, {
      animation: 200,
      dataIdAttr: 'id', // 可以自定义key 默认data-id
      onUpdate: () => {
        // 获取排序之后数据数组 
        const sortlist = sortable.toArray()
        // [102, 100, 101]
      }
    })
  })