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 IE和FF兼容性问题汇总
Feb 09 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
node.js中的require使用详解
Dec 15 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
小程序实现授权登陆的解决方案
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实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python Tensor和Array对比分析
2020/01/08 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
创业计划书——互联网商机
2014/01/12 职场文书
一年级小学生评语
2014/04/22 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
终止劳动合同协议书
2014/10/05 职场文书
学生逃课检讨书
2015/02/17 职场文书
英文版辞职信
2015/02/28 职场文书
主持稿开场白
2015/06/01 职场文书
小学教师读书笔记
2015/07/01 职场文书
初中思品教学反思
2016/02/20 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
Go语言 详解net的tcp服务
2022/04/14 Golang