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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
javascript的this关键字详解
May 20 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
简单了解常用的JavaScript 库
Jul 16 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获取中英混合字符串长度的方法
2014/06/07 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
Python 字符串定义
2009/09/25 Python
python爬虫常用的模块分析
2014/08/29 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python:slice与indices的用法
2019/11/25 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
python 调整图片亮度的示例
2020/12/03 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
金融专业个人的自我评价
2013/10/18 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
初中物理教学反思
2014/01/14 职场文书
高中生物教学反思
2014/02/05 职场文书
经销商订货会主持词
2014/03/27 职场文书
工作简历自我评价
2015/03/11 职场文书