1.下载包:npm install vuedraggable

配置:package.json

"dependencies": {
"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)
}
}

Vue.Draggable拖拽效果的更多相关文章

  1. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

  2. vue模块拖拽效果

    正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...

  3. Vue.Draggable实现拖拽效果(采坑小记)

    之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...

  4. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  5. element-UI ,Table组件实现拖拽效果

    拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...

  6. jQuery的DOM操作实例(2)——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

随机推荐

  1. 海量数据处理 从哈希存储到Bloom Filter(1) (转载)

    先解释一下什么是哈希函数.哈希函数简单来说就是一种映射,它可取值的范围(定义域)通常很大,但值域相对较小.哈希函数所作的工作就是将一个很大定义域内的值映射到一个相对较小的值域内. 传统的哈希存储 假设 ...

  2. ython实现进程间的通信有Queue,Pipe,Value+Array等,其中Queue实现多个进程间的通信,而Pipe实现两个进程间通信,而Value+Array使用得是共享内存映射文件的方式,所以速度比较快

    1.Queue的使用 from multiprocessing import Queue,Process import os,time,random #添加数据函数 def proc_write(qu ...

  3. java实现spark常用算子之Sample

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  4. Docker 部署mysql、tomcat笔记

    Docker 笔记整理 #.环境:Ubuntu 18.* #.安装 mysql 5.6.tomcat #.docker search mysql 报错:Error response from daem ...

  5. java技术面试之面试题大全

    转载自:http://blog.csdn.net/lijizhi19950123/article/details/77679489 Java 面试知识点总结 本篇文章会对面试中常遇到的Java技术点进 ...

  6. windows2012获取明文密码

    windows 2012获取明文密码 导hash的话用常规的方法就可以. 修改注册表 reg add HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Contr ...

  7. Nginx----请求分发中心

    Nginx请求分发中心,需要明确几个基本问题,什么是请求,分发中心是什么,为什么需要分发中心. 什么是请求? Niginx是一款高性能的HTTP服务器,这里的请求当然是指接收客户端发送的http协议请 ...

  8. Delphi 图形图像对象组件

  9. deep_learning_Function_reduction_indices的用法

    在tf.reduce_sum等函数中,有一个reduction_indices参数,表示函数的处理维度. 当没有reduction_indices这个参数,此时该参数取默认值None,将把input_ ...

  10. 搜索框+ 定时器+Bug解决

    定时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...