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.在你的组件中引进依赖:
<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)
}
}
现在你就可以自己尝试使用了~
Vue.Draggable实现拖拽效果(快速使用)的更多相关文章
- Vue.Draggable实现拖拽效果(采坑小记)
之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...
- vue draggable 火狐拖拽搜索问题
最近在使用vuedraggable做导航时候,谷歌拖拽是没问题的,但是在火狐测试时候,拖拽时候是可以成功,但是火狐还是打开了一个新的tab,并且搜索了,一开始想着是阻止默认行为,但是在@end时间中阻 ...
- 基于Vue实现拖拽效果
参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...
- vue模块拖拽效果
正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...
- element-UI ,Table组件实现拖拽效果
拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WinForm支持拖拽效果
有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...
随机推荐
- Oracle强杀进程
1.找到sid,serial#: SELECT /*+ rule */ s.username, l.type, decode(l.type,'TM','TABLE LOCK', ...
- 学生表、课程表、 成绩表 、教师表sql练习
转自:http://yuncode.net/code/c_58df7a8ca687e58 1.查询“1”课程比“2”课程成绩高的所有学生的学号: SELECT t1.student_id FROM ...
- Same origin policy
Chrome: Origin null is not allowed by Access-Control-Allow-Origin 的问题 发送 http request 时遇到 error: Ori ...
- 02_cfork分叉进程
fork函数.调用它就可以在当前的进程当中给它分叉出一个新的进程.分叉出的进程就可以看看它有什么特点?
- MySQL 操作语句
解释:|:或;{}:必选;[]:可选 创建数据库并指定字符编码: CREATE {DATABASE|SCHEMA} [IF NOT EXISTS] db_name [DEFAULT] CHARACTE ...
- Java多线程(五)停止线程 在沉睡中停止线程
在沉睡中停止线程会抛出异常 public class SleepInterruptDemo extends Thread { public void run() { super.run(); try ...
- new mysqli_ and 旧mysql
旧的php处理语法: 1. <select name="s" onChange="redirec()"> <option selected&g ...
- Java 8 (4) Stream 流 - 使用
在本节中将介绍Stream API支持的许多操作,这些操作可以完成更复杂的数据查询,如筛选.切片.映射.查找.匹配和归约.还有一些特殊的流如:数值流.来自文件和数组等多种来源的流. 筛选和切片 1.用 ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- BPI-MI1刷Andorid的启动卡之后上网的步骤(以太网&&WIFI)
BPI-MI1刷Andorid的启动卡之后上网的步骤(以太网&&WIFI) 2017/9/19 16:57 01刷Android的默认启动界面.png 02打开英文模式下的设置Sett ...