本文实例为大家分享了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- \"><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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
最适合AI开发的六种编程语言
下一篇 :
centos系统安装Python
-
虚拟主机有什么优、缺点?
2026-05-19栏目: 教程
-
服务注册
2026-05-19栏目: 教程
-
服务器被攻击 如何查找漏洞以及攻击手法
2026-05-19栏目: 教程
-
Spring Cloud Zuul的动态路由怎样做?集成Nacos实现很简单
2026-05-19栏目: 教程
-
springboot自动配置原理
2026-05-19栏目: 教程
