vue组件的拖动排序

Vue Grid Layout -适用Vue.js的栅格布局系统

01 - 基本 | Vue Grid Layout -️ 适用Vue.js的栅格布局系统 (jbaysolutions.github.io)

vuedraggabl

vue.draggable两列或多列之间相互拖动 - itxst.com

<template><div><!--使用draggable组件--><div class="itxst"><div class="col"><div class="title">国内网站</div><draggablev-model="arr1"group="site"animation="300"dragClass="dragClass"ghostClass="ghostClass"chosenClass="chosenClass"@start="onStart"@end="onEnd"><transition-group><div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div></transition-group></draggable></div><div class="col"><div class="title">你可以把左边的元素拖到右边</div><draggablev-model="arr2"group="site"animation="300"dragClass="dragClass"ghostClass="ghostClass"chosenClass="chosenClass"@start="onStart"@end="onEnd"><transition-group><div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div></transition-group></draggable></div></div></div>
</template>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass {background-color: blue !important;
}
.chosenClass {background-color: red !important;opacity: 1 !important;
}
.dragClass {background-color: blueviolet !important;opacity: 1 !important;box-shadow: none !important;outline: none !important;background-image: none !important;
}
.itxst {margin: 10px;
}
.title {padding: 6px 12px;
}
.col {width: 40%;flex: 1;padding: 10px;border: solid 1px #eee;border-radius: 5px;float: left;
}
.col + .col {margin-left: 10px;
}.item {padding: 6px 12px;margin: 0px 10px 0px 10px;border: solid 1px #eee;background-color: #f1f1f1;
}
.item:hover {background-color: #fdfdfd;cursor: move;
}
.item + .item {border-top: none;margin-top: 6px;
}
</style>
<script>
// 导入draggable组件
import draggable from 'vuedraggable'
export default {// 注册draggable组件components: {draggable},data () {return {drag: false,// 定义要被拖拽对象的数组arr1: [{ id: 1, name: 'www.itxst.com' },{ id: 2, name: 'www.jd.com' },{ id: 3, name: 'www.baidu.com' },{ id: 3, name: 'www.taobao.com' }],arr2: [{ id: 1, name: 'www.google.com' },{ id: 2, name: 'www.msn.com' },{ id: 3, name: 'www.ebay.com' },{ id: 4, name: 'www.yahoo.com' }]}},methods: {// 开始拖拽事件onStart () {this.drag = true},// 拖拽结束事件onEnd () {this.drag = false}}
}
</script>

vue-draggable-resizable-gorkys

<template><divstyle="height: 800px; width: 1200px; border: 1px solid red; position: relative;margin: 0 auto"><vue-draggable-resizable:w="200":h="200":parent="true":debug="false":min-width="200":min-height="200":isConflictCheck="true":snap="true":snapTolerance="10"@refLineParams="getRefLineParams"class="test1"></vue-draggable-resizable><vue-draggable-resizable:w="200":h="200":parent="true":x="210":debug="false":min-width="200":min-height="200":isConflictCheck="true":snap="true":snapTolerance="10"@refLineParams="getRefLineParams"class="test2"></vue-draggable-resizable><vue-draggable-resizable:w="200":h="200":parent="true":x="420":debug="false":min-width="200":min-height="200":isConflictCheck="true":snap="true":snapTolerance="10"@refLineParams="getRefLineParams"class="test3"></vue-draggable-resizable><!--辅助线--><spanclass="ref-line v-line"v-for="(item,index) in vLine":key="index+'_v'"v-show="item.display":style="{ left: item.position, top: item.origin, height: item.lineLength}"/><spanclass="ref-line h-line"v-for="(item,index) in hLine":key="index+'_h'"v-show="item.display":style="{ top: item.position, left: item.origin, width: item.lineLength}"/><!--辅助线END--></div>
</template><script>
import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'export default {components: {VueDraggableResizable},data () {return {vLine: [],hLine: []}},methods: {// 辅助线回调事件getRefLineParams (params) {const { vLine, hLine } = paramsthis.vLine = vLinethis.hLine = hLine}}
}
</script><style>
.test1 {background-color: rgb(239, 154, 154);
}
.test2 {background-color: rgb(129, 212, 250);
}
.test3 {background-color: rgb(174, 213, 129);
}
</style>

vue组件的拖动排序相关推荐

vue可拖拽排序列表组件
先看效果: dragable-lists.vue组件源码: <template><div class="drag-lists" ref="drag-li ...
10 分钟上手 Vue 组件 Vue-Draggable
Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...
vue组件化开发实践
前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
小程序自定义拖动排序（uniapp)
1.用到的组件和事件 1)组件movable-area,movable-view 2) @touchend(拖动离开事件),movable-view的onChange事件,自定义克隆事件dragCha ...
draggable布局 vue_10 分钟上手 Vue 组件 Vue-Draggable
Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...
vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件
前言这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...
【Android 事件分发】ItemTouchHelper 实现拖动排序
Android 事件分发系列文章目录 [Android 事件分发]事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) [Andr ...
Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...

vue组件的拖动排序

Vue Grid Layout -适用Vue.js的栅格布局系统

vuedraggabl

vue-draggable-resizable-gorkys

vue组件的拖动排序相关推荐

最新文章

热门文章