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 这个插件中,给组件加上这两个参数就可以完美解决问题!撒花,完结。