Vue.Draggable - 基于 Vue.js 的拖拽组件

中文文档

Vue.Draggable文档链接
*官方网站 *

安装

npm install --save vue-draggable-resizable

引入

全局注册组件main.js

import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
// 导入默认样式
Vue.component('vue-draggable-resizable', VueDraggableResizable)

在使用的组件里

如果元素外面有父元素，记得要给父元素设置宽高，不然拖拽会出错。如果缩放，布局最好采用百分比布局。

主要属性、事件

	<vue-draggable-resizable
	    :ref="'tablePanel' + params.mapId"
		:w="dragStyles.w" //默认宽度
		:h="dragStyles.h" //默认高度
		:min-width="250" //最小宽度
		:min-height="290"//最小高度
		:max-width="1900" //最大宽度
		:max-height="1000" //最大高度
		:parent="false" //限制不能拖出父元素
	   	parent=".p-event" //限制不能拖出class为p-event的元素
	   	:group= "name" //相同的组之间可以相互拖拽
	   	:delay= "0" //鼠标按下后多久可以拖拽
		:active="true" //确定组件是否应处于活动状态。
		:grid //水平和垂直移动 每次分别能够走多少像素
		:x="dragStyles.x" //默认水平坐标 注意相对元素是谁
		:y="dragStyles.y" //默认垂直坐标 注意相对元素是谁
		:z="1001" //层级
		class-name="tulie" // 自定义组件class
		class-name-handle="my-handle-class"
		drag-handle=".title"//定义应该用于拖动组件的选择器。
		drag-cancel=".table-container" //定义应该用于阻止拖动初始化的选择器。
		@resizing="onResize"
		@dragging="onDrag"
	>
		<div class="title">
		<div></div>
		<div class="table-container">
		</div>
  	</vue-draggable-resizable>

    	onResize(x, y, width, height) {
				this.dragStyles.x = x;
				this.dragStyles.y = y;
				this.dragStyles.w = width;
				this.dragStyles.h = height;
				this.$refs["xTable" + this.mapId].recalculate();
			},
	  onDrag(x, y) {
				this.dragStyles.x = x;
				this.dragStyles.y = y;
				this.$forceUpdate();
			},

事件使用

@dragging="onDrag"  每当拖动组件时调用。
@resizing="onResize" 每当组件调整大小时调用。
@dragstop="onDragstop" 每当组件停止拖动时调用。
@resizestop="onResizstop" 每当组件停止调整大小时调用
@deactivated="onDeactivated" 每当用户单击组件外的任何位置时调用
@activated="onActivated" 单击组件时调用，以显示句柄。备注：句柄就是点击组件后上下左右的可以拉伸的方块点