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实现的切换面板实例代码
Jun 17 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 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中cookie的作用域
2008/03/27 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
js 操作符汇总
2014/11/08 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python 实现任务管理清单案例
2020/04/25 Python
Python如何实现的二分查找算法
2020/05/27 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
工业设计专业推荐信
2013/10/29 职场文书
人力资源专业推荐信
2013/11/29 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
宿舍违规检讨书
2014/01/12 职场文书
公司拓展活动方案
2014/02/13 职场文书
销售主管竞聘书
2014/03/31 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
Spring实现内置监听器
2021/07/09 Java/Android