// =======拖拽 插件
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. POJ 1655:Balancing Act

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10311   Accepted: 4261 De ...

  2. vlc rtsp 服务器脚本

    set VLC="C:\Program Files (x86)\VideoLAN\VLC\vlc.exe" set VIDEO="D:\BaiduYunDownload\ ...

  3. golang开启随机端口并获取端口

    listener, err := net.Listen("tcp", ":0") if err != nil { panic(err) } fmt.Printl ...

  4. 11.swoole学习笔记--进程信号触发器

    <?php //触发函数--异步执行 swoole_process::signal(SIGALRM,function(){ ; echo "$i \n"; $i++; ){ ...

  5. 113-PHP使用instanceof判断变量是否为某个类对象

    <?php class ren{ //定义人类 } class mao{ //定义猫类 } $ren=new ren(); //实例化一个人类的对象 $mao=new mao(); //实例化一 ...

  6. oracle学习笔记(4)

    4.oracle数据库的启动流程 windows操作系统 启动监听: lsnrctl start; 启动数据库实例:oradim-startup-sid 实例名 linux系统 启动监听:lsnrct ...

  7. 解决对路径bin\roslyn..的访问被拒绝

    使用visual studio开发,一重新编译就会报错: 对路径“bin\roslyn\System.Reflection.Metadata.dll”的访问被拒绝 一开始的解决办法就是把bin下的文件 ...

  8. tomcat conf目录下server.xml详解

    一.   一个server.xml配置实例 1 <Server port="8005" shutdown="SHUTDOWN"> 2 <Lis ...

  9. Delphi 10.4 最新消息

    官方发布了关于10.4的消息,译文如下: 做为我们的Delphi,C ++ Builder和RAD Studio的订阅客户,除了获得更新,升级和技术支持等主要好处外,我们还邀请订阅客户参加Beta计划 ...

  10. Elasticsearch 使用集群 - 创建和查询文档

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...