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 相关文章推荐
在JS中如何调用JSP中的变量
Jan 22 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
在vue中实现给每个页面顶部设置title
Jul 29 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警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP5函数小全(分享)
2013/06/06 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python 多维List创建的问题小结
2019/01/18 Python
python实现证件照换底功能
2019/08/20 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
国际贸易专业个人求职信格式
2014/02/02 职场文书
期终自我鉴定
2014/02/17 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
个人公开承诺书
2014/03/28 职场文书
小学生评语集锦
2014/04/18 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
MySQL通过binlog恢复数据
2021/05/27 MySQL