h5拖拽和vue拖拽

最新推荐文章于 2025-10-10 04:56:29 发布

原创最新推荐文章于 2025-10-10 04:56:29 发布 · 置顶 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#h5拖拽 #vut拖拽 #Vue.Draggable #vue-slicksort

vue 专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了HTML5拖拽API的使用方法，包括拖拽过程中的事件监听和数据传递。同时，介绍了Vue.js中实现拖拽功能的两种方式：原生Vue事件绑定和使用Vue.Draggable插件，后者提供了更丰富的API和更好的用户体验。

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