vuedraggable拖动控件的使用

除了vue外还需要引入两个js

  <script src="/plugin/vuedraggable/Sortable.min.js"></script>
  <script src="/plugin/vuedraggable/vuedraggable.umd.min.js"></script>

缺少Sortable会报错TypeError: external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_default.a is not a constructor

vue.min.js:6 TypeError: external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_default.a is not a constructor
    at o.mounted (vuedraggable.js:226)
    at _t (vue.min.js:6)
    at Object.insert (vue.min.js:6)
    at A (vue.min.js:6)
    at hn.__patch__ (vue.min.js:6)
    at hn._update (vue.min.js:6)
    at hn.i (vue.min.js:6)
    at St.get (vue.min.js:6)
    at new St (vue.min.js:6)
    at hn.$mount (vue.min.js:6)

推荐使用npm下载，同时包括了Sortable和vuedraggable
npm i -S vuedraggable

<draggable id="zhdd_video_list" v-model="videoList" @start="drag=true" @end="drag=false" animation="300" style="width: 100%;">
     <transition-group type="transition" style="width: 100%; height: 100%">
         <div class="grid" v-for="(video, index) in videoList" :key="video.id">
             <i class="fa fa-arrows fa-fw handle"></i>
             <i class="fa fa-trash-o fa-fw delete" @click="()=>{videoList.splice(index, 1);}"></i>
         </div>
     </transition-group>
</draggable>

如果需要设置多行多列的grid模式只需要设置css，宽度自定。

.grid {
    width: 50%;
    display: inline-block;
}

item的key一定要绑定 :key=“video.id”

如果需要动画效果给draggable标签设置属性 animation=“300”。 transition-group中的item就有拖动动画了。

如果需要指定可拖动的位置给draggable设置handle=".handle"属性。而后只有点击带有handle类的元素才能拖动