Vue.Draggable拖拽功能的配置使用方法


Posted in Javascript onJuly 29, 2020

本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下

使用cmd命令在项目根目录下下载安装Vue.Draggable

npm install vuedraggable

在组件中需要使用的引入

import draggable from 'vuedraggable'

注册组件

components:{
  draggable
 }

vue的template代码如

<draggable v-model="itemlis"

//开始移动方法
 :move="getdata" 
 @update="datadragEnd"

//参数配置 
 :options="{animation: 60,handle:'.drag-icon'}"
 >
 <transition-group>
    <el-row class="album-list-list-item" v-for="(item,index) in itemlis" :key="item.id">
    <el-col :span="13">
    <div class="grid-content ">
     <i class="icon drag-icon iconfont icon-Icon-tuozhuai"></i>
     <el-checkbox v-model="item.checked" :value="item.id"></el-checkbox> <span class="album-info-net">{{item.net}}</span>
    </div>
    </el-col>
    <el-col :span="4">
    <div class="grid-content ">
    <span>{{item.time}}</span>
    </div>
   </el-col>
  <el-col :span="4">


   <el-popover
     placement="left-start"
     visible-arrow=false
     width="120"
     trigger="hover"
       >
    <div class="code-img">
     <img src="../assets/images/1.png"/>
    </div>
    <span slot="reference">{{item.wqcode}}</span>
     </el-popover>

    </el-col>

    <el-col :span="3">
    <div class="grid-content album-l-l-tool ">
    <div class="more-tip-op">
      <el-dropdown>
       <span class="el-dropdown-link"><em class="el-icon-more"></em></span>
       <el-dropdown-menu slot="dropdown" >
         <el-dropdown-item :data-url="item.opUrl.removeUrl" @click.native="moveTo(item,$event)">移动</el-dropdown-item>
         <el-dropdown-item :data-url="item.opUrl.copyUrl" @click.native="copyTo(item,$event)">复制</el-dropdown-item>
         <el-dropdown-item @click.native="itemDel(index,$event)" :data-url="item.opUrl.delUrl">删除 </el-dropdown-item>
         <el-dropdown-item :data-url="item.opUrl.exportUrl">导出</el-dropdown-item>
         <el-dropdown-item :data-url="item.opUrl.editName" @click.native="getEditDialog(item,$event)">编辑</el-dropdown-item>
         <el-dropdown-item @click.native="getCodeDialog(item,$event)" >查看二维码</el-dropdown-item>

        </el-dropdown-menu>
        </el-dropdown>
       </div>
     </div>
   </el-col>
  </el-row>
</transition-group>
</draggable>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Form.elements[i]的使用实例
Nov 13 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
浅谈javascript中的闭包
May 13 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 #Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 #Javascript
GOJS+VUE实现流程图效果
Dec 01 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
微信自定义分享php代码分析
2016/11/24 PHP
js表数据排序 sort table data
2009/02/18 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
python字符串循环左移
2019/03/08 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
实习自我鉴定范文
2013/10/30 职场文书
经济管理专业自荐信
2013/12/30 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
读书笔记格式
2015/07/02 职场文书
教师个人教学反思
2016/02/23 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript