// =======拖拽 插件
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. UVA - 211 The Domino Effect(多米诺效应)(dfs回溯)

    题意:根据多米诺骨牌的编号的7*8矩阵,每个点可以和相邻的点组成的骨牌对应一个编号,问能形成多少种由编号组成的图. 分析:dfs,组成的图必须有1~28所有编号. #pragma comment(li ...

  2. 指令——mkdir

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个 指令mkdir——(make directory ...

  3. (转载)wchar_t类型和char类型变量相互转换

    转载连接:https://www.cnblogs.com/zhangdewang/p/11420410.html和https://www.cnblogs.com/lanhaicode/p/105742 ...

  4. css把图片方框变为圆角

    border-radius:10px; 多少就设多少像素,个人需求.

  5. 事件时间(event time)与水印(watermark)

    事件时间和水印诞生的背景 在实际的流式计算中数据到来的顺序对计算结果的正确性有至关重要的影响 比如:某数据源中的某些数据由于某种原因(如:网络原因,外部存储自身原因)会有2秒的延时,也就是在实际时间的 ...

  6. 第一篇web框架

    第一篇web框架 http协议 web应用和web框架 主 文 http协议 HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维 ...

  7. Linux命令笔记一

    #查看文件大小[root@elegant-codes-3 py]# ls -lh total 1.1M -rw-r--r-- 1 root root 5.0K Feb 21 08:18 Crawl_W ...

  8. 群论&Polya计数

    群论&Polya计数 其实在我听课的过程中,我发现针对于学习OI中的群并没有什么过多必要向内学习... 群 以后会补的. 就是\(QQ\)群. 置换 置换就是一个... \[ \begin{m ...

  9. JVM源码分析之自定义类加载器如何拉长YGC

    概述 本文重点讲述毕玄大师在其公众号上发的一个GC问题一个jstack/jmap等不能用的case,对于毕大师那篇文章,题目上没有提到GC的那个问题,不过进入到文章里可以看到,既然文章提到了jstac ...

  10. Java8大排序算法

    一.冒泡排序 基本思想:通过对待排序序列此前向后,依次比较相邻元素的值,若发现逆序则进行交换,使得较大的值从前面移动到后面,       类似于水下的气泡一样(是所有排序算法中效率最低的) publi ...