vuedraggable实现不同列表之间的拖拽

CodeSheep 发布于2019-08-26 10:10 / 1248人阅读

摘要：项目需要做到图片拖拽的效果，找到了这个组件，送上地址，并且记录如下。想要的效果是能做到同级拖拽排序以及跨层拖拽从一个列表到另一个列表。最简单的效果就有了，动画就要根据各自的需求去探索了。

项目需要做到图片拖拽的效果，找到了这个组件，送上GitHub地址，并且记录如下。

想要的效果是能做到同级拖拽（排序）以及跨层拖拽（从一个列表到另一个列表）。

1、需要安装依赖

npm install vuedraggable --save

如果不行，可以借助淘宝镜像，用cnpm install vuedraggable --save

2、引入依赖
在需要的文件夹下引入import draggable from "vuedraggable";

3、调用组件

components: {
    //调用组件
    draggable,
},

4、使用组件


    
         {{item.name}}

版本2指出用v-bind代替原本的:options，用tag代替原本的element。
注：transition-group必须是draggable的下面一层，两个必须紧挨着，不然拖拽的时候会出现整个数组被拖拽的现象，而不是单条数据；transition-group下面一层必须是v-for的内容，不能额外再加div；样式效果最好在div上写，不要在draggable和transition-group上写，很多效果都不能实现。

最简单的效果就有了，动画就要根据各自的需求去探索了。

GPU云服务器云服务器 js实现数据的拖拽 Live的拖拽 . 防火墙的功能有如下哪些? 隔离不同安全级别的网络实现不同安全级别的网络之间 4. 防火墙的功能有如下哪些? 隔离不同安全级别的网络实现不同安全级别的网络之间

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105721.html

可视化拖拽 UI 布局之拖拽篇

前言：前段时间负责公司的运营管理后台项目，通过运营后台的PC端拖拽配置布局，达到App首页模板的动态UI界面配置，生成页面。趁着周末，整理一下当时所了解到的拖拽。文章会根据大家的反馈或者自己学习经验的累积成长不定期更新丰富。如果你想了解更多PC端的拖拽开发，欢迎点赞关注或者收藏一波[鞠躬]。之前在掘金一篇文章里看到这段话: UI 开发的三种模式 1.手写标签和样式代码，生成页面 2.可视化拖拽 ...

ACb0y 2019-08-22 13:58 评论0 收藏0
Vue2.0全家桶仿腾讯体育APP（Web版）

摘要：全家桶仿腾讯体育一年一度的总决赛，相信球迷用的最多的就是腾讯体育这款，刚好上手，当练手就把这个仿下来。这样刚进去的时候页面加载时间明显减短。可以包含任意异步操作。 Vue2.0全家桶仿腾讯体育APP 一年一度的NBA总决赛，相信球迷用的最多的就是腾讯体育这款APP，刚好上手Vue，当练手就把这个APP仿下来。 showImg(https://segmentfault.com/img/r...

fnngj 2019-08-20 17:04 评论0 收藏0
HTML5拖放API Drag and Drop

摘要：此文研究中的拖放接口，提供各个属性和方法的说明，解决拖放过程中的拖拽数据对象存储和获取问题。方法增加一个拖拽数据对象到属性中，并返回增加的拖拽数据对象。若拖拽数据对象是文本字符串类型，通过回调函数获取拖拽数据中的字符串数据。此文研究Web API中的拖放接口，提供各个属性和方法的说明，解决拖放过程中的拖拽数据对象存储和获取问题。拖放API作用到两个目标对象，分别是拖拽目标对象和放置...

dantezhao 2019-08-21 11:46 评论0 收藏0