vue中实现拖拽效果---Vue.Draggable

最新推荐文章于 2024-07-23 11:37:41 发布

s先生的d小姐

最新推荐文章于 2024-07-23 11:37:41 发布

阅读量1.2k

点赞数

分类专栏： vue 三方库文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44326389/article/details/118437138

版权

vue 同时被 2 个专栏收录

51 篇文章 1 订阅

订阅专栏

三方库

30 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中利用vuedraggable插件实现移动设备上的拖拽功能，包括draggable API的使用、Vue组件draggable的整合，以及Sortable.js的替代方案。详细步骤包括组件安装、HTML结构设置和相关事件处理，适合前端开发者学习和实践。

摘要由CSDN通过智能技术生成

一、需求分析
移动端实现功能的拖拽效果，并有拖拽过度效果。
二、方法介绍
1.h5中方法draggable，可参考菜鸟教程；
2.vue组件draggable，可参考gitlab 、中文文档；
3.非vue版本可使用 sortable.js。
三、使用说明
1.介绍
Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。

支持移动设备
拖拽和选择文本
智能滚动
可以在不同列表间拖拽
不依赖jQuery为基础
vue 2过渡动画兼容
支持撤销操作

2.安装

yarn add vuedraggable
npm i -S vuedraggable

3.使用

1.html
 <draggable 
     v-model="list" //添加拖拽的列表
     handle=".mover"//绑定按住可拖拽源
     @start="onStart" //拖拽效果开始展示
     @end="onEnd"//拖拽效果结束
     :scroll="true"
  >
    <transition-group>
      <div v-for="item in list" :key="item.title">
          <span>{{item.title}}</span>
          /*.mover绑定，按住该图片可实现拖拽*/
          <img class="mover" src="@/assets/img/mover.png">
      </div>
    </transition-group>
 </draggable>

2.js
//先引入
import draggable from "vuedraggable";
export default{
   components: { draggable },
   data(){
       return {
           list:[],//需要拖拽的列表
           drag: false,
       }
   },
   methods:{
	   //开始拖拽事件
	    onStart() {
	      this.drag = true;
	    },
	    //拖拽结束事件
	    onEnd() {
	      this.drag = false;
	    },
   }
}

备注：如果您的项目需要更多效果，可参考上边官方文档中的属性及方法。