h5拖拽和vue拖拽

h5拖拽

先介绍一个h5拖拽，他属于h5新特性，api简单，方便好用，附上文章地址HTML 5 拖放。
这里是代码：

              <div  @dragover.prevent='over' @drop.prevent='drop'>
                <div v-for="(item, i) in left.list" :key="i" draggable @dragstart='start' v-text='item.name'></div>
              </div>

over是拖拽过程中的方法，start是开始拖拽的时候 获取到拖拽数据，比如：

 start (ev) {
        // 获取被拖拽的元素
        this.dom = ev
      },

drop 是我拖拽完成后的操作，这里是取到拖拽的名字赋值。

       drop (ev, i) {
        // 把被拖拽的元素追加到容器中去
        this.conditionList[i].FormulaCondition = ev.target.value + `[${this.dom.target.innerText}]`
      },

---

vue 拖拽方法

下面介绍一下vue拖拽的实现方法：
先开始找了一个 vue-slicksort 的插件，但是好用是好用，但是不符合需求，api也不丰富，又找到了 Vue.Draggable ，这个插件api相对来说很丰富，功能挺全，用的人也多。
html:

<draggable
 	 class="dragArea list-group"
     :list="list"
     :group="{ name: 'people', pull: pullFunction }"
     :fallback-tolerance="1"
     :force-fallback="true"
     @start="start"
     @end="end"
   >
    <div :class="{ 'bgStyle' : element.style }" class="list-group-item" @click="leftDraggableClick(element, i)" v-for="(element ,i) in list" :key="element.id">
      {{element.RuleName}}
    </div>
</draggable>

这个是拖拽写法，重点讲一下
:fallback-tolerance=“1”
:force-fallback=“true”
这两个参数用法，上面介绍的拖拽方法在拖拽过程中都无法滚动鼠标滚轮，只能把拖拽的div放在浏览器上下边缘地方才可以滑动屏幕，很不方便，在 Vue.Draggable 这个插件中，给组件加上这两个参数就可以完美解决问题！撒花，完结。