vuedragable

demo: sortablejs.github.io/Vue.Draggab…

var defaults = {

 group: Math.random(), 
 //产生一个随机数 
 //改参数是对象有三个两个参数 
 pull: 拉,
 put:放 默认都是是true 
 pull还有一个值是: 'clone', 
 pull: 拉,
 put:放 设置为false 就不能拖拽了， 
 如果 pull 这种为'clone'则可以从一个列表中拖拽到另一个列表并且克隆dom节点，
 name：是两个或者多个列表拖拽之间的通信，两个或者三个列表的nea

 sort: true, // 类型：Boolean,值为false时，在自己的拖拽区域不能拖拽，但是可以拖拽到其他区域，true则可以做自己区域拖拽或者其他区域拖拽

 disabled: false, //类型：Boolean 是否禁用拖拽 true 则不能拖拽 默认是true

 store: null, // 用来html5 存储的 改返回 拖拽的节点的唯一id

 handle: null, //handle 这个参数是设置该标签，或者该class可以拖拽 但是不要设置 id的节点和子节点相同的tag不然会有bug

 scroll: true, //类型：Boolean，设置拖拽的时候滚动条是否智能滚动。默认为真，则智能滚动，false则不智能滚动

 scrollSensitivity: 30, //滚动的灵敏度,其实是拖拽离滚动边界的距离触发事件的距离边界+-30px的地方触发拖拽滚动事件，

 scrollSpeed: 10, //滚动速度

 draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',//draggable 判断拖拽节点的父层是否是ou ul

 ghostClass: 'sortable-ghost', // 排序镜像class,就是当鼠标拉起拖拽节点的时候添加该class

 chosenClass: 'sortable-chosen', // //为拖拽的节点添加一个class 开始拖拽鼠标按下去的时候 添加该class

 ignore: 'a, img', //a 或者是img

 filter: null, //改参数可以传递一个函数，或者字符串，字符串可以是class或者tag，然后用于触发oFilter函数，这样可以用来自定义事件等

 animation: 0, //拖拽动画时间戳

 setData: function (dataTransfer, dragEl) { //设置拖拽传递的参数

 dataTransfer.setData('Text', dragEl.textContent);

 },

 dropBubble: false, // 发生 drop事件 拖拽的时候是否阻止事件冒泡

 dragoverBubble: false, //发生 dragover 事件 拖拽的时候是否阻止事件冒泡

 dataIdAttr: 'data-id', //拖拽元素的id 数组

 delay: 0, //延迟拖拽时间, 其实就是鼠标按下去拖拽延迟

 forceFallback: false, // 不详

 fallbackClass: 'sortable-fallback', // 排序回退class

 fallbackOnBody: false,// 是否把拖拽镜像节点ghostEl放到body上

 };

我的配置

 <draggable
               tag="ul"
               :list="eleOuter"
               v-bind="{
                 group: { name: 'people', pull: 'clone', put: false },
                 filter: '.disabled',
                 sort: false,
                 ghostClass: 'ghost'
               }"
               @end="handleMoveEnd"
               @start="handleMoveStart"
               :move="handleMove"
             >
               <li
                 class="form-edit-widget-label"
                 :class="{ 'no-put': item.type == 'divider', disabled: Object.keys(widgetFields).includes(item.fid) }"
                 v-for="(item, index) in eleOuter"
                 :key="index"
               >
                 <a>
                   <img class="icon iconfont field-icon" :src="item.icon" />
                   <span>{{ item.name }}</span>
                 </a>
               </li>
             </draggable>