Vue.Draggable实现拖拽效果


Posted in Javascript onJuly 29, 2020

快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下

1.下载包:npm install vuedraggable

配置:package.json

"dependencies": {
 "element-ui": "^1.3.4",
 "less": "^2.7.2",
 "less-loader": "^4.0.4",
 "vue": "^2.3.3",
 "vue-router": "^2.3.1",
 "vuedraggable": "^2.11.0"
 },

2.在你的组件中引进依赖:

import draggable from 'vuedraggable'

3.注册:draggable这个组件

components: {
draggable
},

4.使用html模板中使用该组件

<draggable v-model="tags" :move="getdata" @update="datadragEnd">
  <transition-group>
   <div v-for="element in tags" :key="element.id">
    {{element.name}}
   </div>
  </transition-group>
</draggable>

5.有两个常用的方法

一个是拖动中

一个是拖动结束

methods: {
  getdata (evt) {
  console.log(evt.draggedContext.element.id)
  },
  datadragEnd (evt) {
  console.log('拖动前的索引 :' + evt.oldIndex)
  console.log('拖动后的索引 :' + evt.newIndex)
  console.log(this.tags)
  }
 }

现在你就可以自己尝试使用了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
基于ssm框架实现layui分页效果
Jul 27 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
JS请求servlet功能示例
Jun 01 #Javascript
vue.js加载新的内容(实例代码)
Jun 01 #Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 #Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 #Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 #Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 #Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
You might like
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
九种js弹出对话框的方法总结
2013/03/12 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
Bootstrap的class样式小结
2016/12/01 Javascript
原生js开发的日历插件
2017/02/04 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
关于vue中 $emit的用法详解
2018/04/12 Javascript
图解javascript作用域链
2019/05/27 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python中方法链的使用方法
2016/02/23 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
python遍历目录的方法小结
2016/04/28 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
个人简历自我鉴定
2013/10/11 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
Redis keys命令的具体使用
2022/06/05 Redis