vue-dragline

项目根据react-dragline 改写为vue。
github地址：https://github.com/BadMooncc/vue-dragline
支持拖拽辅助线，改变元素大小，元素拖拽功能

演示

屏幕录制2022-04-12 17.56.37

Installation

npm

npm install vue-dragline --save

yarn

yarn add install vue-dragline

全局引入

在入口文件main.js，

import Vue from 'vue';
import drag from 'vue-dragline';
import 'vue-dragline/lib/vue-dragline.css';
Vue.use(drag);

Example

<template><draggable-container><draggable-childv-for="item in initialChildren":key="item.id":id="item.id":width="item.width":height="item.height"@stop="handleStop"@start="handleStart"@drag="handleDrag"@resize="handleResize":default-position="item.position"><divclass="item":style="{display: 'flex',flexDirection: 'column',justifyContent: 'center',alignItems: 'center',cursor: 'move',boxSizing: 'border-box',background: item.background,}"><span>size: {{ item.size }}</span><span>drag me</span></div></draggable-child></draggable-container>
</template>
<script>
import 'vue-dragline/lib/vue-dragline.css';
export default {data() {return {initialChildren: [{ id: 1, background: '#8ce8df', width: 100, height: 100, position: { x: 100, y: 10 } },{ id: 2, background: '#8ce8df', width: 100, height: 100, position: { x: 400, y: 106 } },{ id: 3, background: '#d2aff6', width: 100, height: 100, position: { x: 100, y: 316 } },{ id: 4, background: '#fee493', width: 100, height: 100, position: { x: 480, y: 376 } },]};},methods: {handleResize(e) {console.log(e, 'handleResize');},handleDrag(e) {console.log(e);},handleStop(e) {console.log(e, 'handleStop');},handleStart() {console.log('开始');},handleClick() {alert(1);}}
};
</script>

draggable-child组件 Prop Types

Property	Type	Default	Description
id	string/number	-	元素唯一值，必填
width	number	-	元素宽度
height	number	-	元素高度
default-position	object {x,y}	-	元素元素x，y轴坐标

event事件

resize
改变元素大小时触发，返回元素的当前坐标x,y和宽高wdth,height

stop
元素停止拖拽时触发，返回元素的当前坐标x,y和宽高wdth,height

drag
元素拖拽时触发，返回元素的当前坐标x,y和宽高wdth,height

start
元素被选中时触发，返回元素的当前坐标x,y和宽高wdth,height

vue拖拽辅助线+改变元素大小组件相关推荐

Vue拖拽组件开发实例
为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: 使用虚拟DOM: ...
vue 拖拽元素到任意位置
vue 拖拽元素到任意位置使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyu ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
自己封装的vue拖拽组件
自己封装的vue拖拽组件使用Vue.Draggable实现 Vue.Draggable的基础使用方法可以看看这个哥们的https://blog.csdn.net/zjiang1994/article ...
vue拖拽排序组件
vue拖拽排序组件 npm install vuedraggable -S vue.draggable中文文档组件代码 <template><div><div cla ...
vue拖拽组件，从此解放你的双手
一??vue拖拽.拖拽它来啦!它来啦! -机智如我一??? 特别简单 ,安装.注册.引用即可完成拖拽需求控制台一??打印拖拽信息一??? 一??1.npm安装 npm install awe- ...
vue拖拽组件（app移动端）
vue拖拽组件 <template><div id="webId">< ...
vue拖拽组件超好用！！！
vue拖拽组件在vue实现拖拽,经常使用到,所以自己封装了成了一个组件效果展示组件代码 <template><div class="dragBtn" @to ...

vue拖拽辅助线+改变元素大小组件

vue-dragline

演示

Installation

全局引入

Example

draggable-child组件 Prop Types

event事件

vue拖拽辅助线+改变元素大小组件相关推荐

最新文章

热门文章