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 相关文章推荐
JavaScript实用技巧(一)
Aug 16 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
小程序实现授权登陆的解决方案
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
PHP与javascript对多项选择的处理
2006/10/09 PHP
PHP脚本的10个技巧(6)
2006/10/09 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python在回调函数中获取返回值的方法
2019/02/22 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
《在大海中永生》教学反思
2014/02/24 职场文书
亮化工程实施方案
2014/03/17 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
最感人的道歉情书
2015/05/12 职场文书
公司晚会主持词
2019/04/17 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript