// =======拖拽 插件
cnpm install vuedraggable
import draggable from 'vuedraggable'

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

data() {
return {
msg: 'Welcome to Your Vue.js App',
tags: [{
id: 1
}, {
id: 2
}]
}
},
methods: {
getdata(evt) {
console.log(evt.draggedContext.element.id)
},
datadragEnd(evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.tags)
}
},

vue拖拽插件(弹框拖拽)的更多相关文章

  1. 实现在vue中element-ui的el-dialog弹框拖拽

    参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...

  2. vue编辑、新增弹框(引用外部页面)

    vue编辑.新增弹框(引用外部页面) 2018年06月15日 09:37:20 会飞的猪biubiu 阅读数 10265    版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  3. vue自定义插件-弹框

    <template> <transition name="msgbox"> <div v-if="show" class=&quo ...

  4. 在vue中引入layer弹框的简易方法

    npm i --save layui-layer 2.在main.js中引入 import layer from "layui-layer"; 3.然后就可以在各个组件中使用lay ...

  5. vue 中使用 Toast弹框

    import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(ToastPlugin) Vue.use(ConfirmPlugi ...

  6. SweetAlert插件 弹框插件

    sweetalert是一个漂亮的弹窗 中文网址: http://mishengqiang.com/sweetalert/ 它需要2个文件:sweetalert-dev.js和sweetalert.cs ...

  7. vue自定义弹框

    vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...

  8. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  9. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

随机推荐

  1. 官网英文版学习——RabbitMQ学习笔记(七)Topic

    在上一篇中使用直接交换器改进了我们的系统,使得它能够有选择的进行接收消息,但它仍然有局限性——它不能基于多个条件进行路由.本节我们就进行能够基于多个条件进行路由的topics exchange学习. ...

  2. Spring Boot2(003):简要回顾“HelloWorld” web 工程

    1.注解: @RestController 和 @RequestMapping HelloWorldExample 中的第1个注解 @RestController 是一个被熟知的原型注解(stereo ...

  3. 5. 支撑高并发,高可用,海量数据备份恢复的Redis重要性

    商品详情页的架构实现 缓存架构 第一块儿,要掌握的很好的,就是redis架构 高并发,高可用,海量数据,备份,随时可以恢复,缓存架构如果要支撑这些要点,首先呢,redis就得支撑 redis架构,每秒 ...

  4. jenkins 最新版 搭建

    jenkins 中文网:https://jenkins.io/zh/ 点击下载:https://jenkins.io/zh/download/ 然后选择对应的安装环境,我的CentOS 7.6: 有外 ...

  5. hdu 2578 Dating with girls(1) 满足条件x+y=k的x,y有几组

    Dating with girls(1) Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  6. 《ES6标准入门》(阮一峰)--2.let 和 const 命令

    1.let命令 基本用法 let只在命令所在的代码块内(花括号内)有效. for循环的计数器,就很合适使用let命令. //var var a = []; for (var i = 0; i < ...

  7. archlinux下安装mysql

    mysql的安装 这里安装的是mariadb一个mysql的开源版本,实际使用体验没有差别 1. 安装Maria DB sudo pacman -S mariadb 2. 配置目录 sudo mari ...

  8. python---函数定义、调用、参数

    1.函数定义和调用 下面def test部分的代码块是函数定义:test(2,3)则是函数调用 def test(a,b): print(a) print(b) test(,) 2.必填参数,即函数调 ...

  9. HDU - 5898 odd-even number (数位dp)

    题意:求一个区间内,满足连续的奇数长度是偶数,连续的偶数长度是奇数的数的个数. #include<cstdio> #include<cstring> #include<c ...

  10. HDU - 3068 最长回文(manacher算法)

    题意:给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 分析: manacher算法: 1.将字符串中每个字符的两边都插入一个特殊字符.(此操作的目的是,将字符串 ...