投稿

基于vue.js仿禅道主页拖拽效果

Vedu • • 资源分享 • 阅读 1997

今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon。

基于 vue.js 仿禅道主页拖拽效果

vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目。支持模块上下及左右自由拖动布局。

基于 vue.js 仿禅道主页拖拽效果

主页分为左右两栏流式布局，每个模块可以进行上下和左右拖动排列。

基于 vue.js 仿禅道主页拖拽效果

拖动功能是基于 Vue.Draggable 插件开发。

https://github.com/SortableJS/Vue.Draggable
基于 vue.js 仿禅道主页拖拽效果

快速体验

# 克隆项目
git clone https://github.com/hecun0000/vue-dnd-kon.git

# 进入项目目录
cd vue-dnd-kon

# 安装依赖
npm install

# 开发环境
npm run serve

# 打包
npm run build

拖拽实现

分别在 .left .right 中添加两个拖拽容器。

class=“layout-container”> <div class=“left”> <draggable v-bind=“dragOptions” class=“list-group” :list=“item” > // … 拖拽元素或组件 draggable> div> <div class=“right”> <draggable v-bind=“dragOptions” class=“list-group” :list=“item” > // … 拖拽元素或组件 draggable> div> div> <script> import draggable from “vuedraggable”; export default { components: {draggable}, computed: { dragOptions() { return { animation: 30, handle: “.drag-handle”, group: “description”, ghostClass: “ghost”, chosenClass: “sortable”, forceFallback: true }; } } }; script>
基于 vue.js 仿禅道主页拖拽效果
# 仓库地址
https://github.com/hecun0000/vue-dnd-kon

ok，以上就是基于vue实现一个禅道主页拖拽功能效果，希望对大家有所帮助！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/14263.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-11-12 09:27
下一篇 2020-11-13 08:56

相关推荐

发表评论

登录后才能评论