flex-boundary-drag v1.0.3

flex-boundary-drag

以下的html结构和css布局仅为参考，实际项目中，只要整体保持此种布局和样式结构即可。
此插件的核心是改变当前拖动元素的宽或者高，其相对元素的宽高根据flex: 1自适应实现。

安装

yarn add flex-boundary-drag

或者

npm install --save flex-boundary-drag

引用

import FlexBoundaryDragTool from 'flex-boundary-drag'

或者

const FlexBoundaryDragTool = require('flex-boundary-drag')

HTMl结构

<div class="outer">
	<div class="left" id="left"></div>
	<div class="right" id="right">
		<div class="top" id="top"></div>
		<div class="bottom" id="bottom"></div>
	</div>
</div>

CSS Flex布局

html,
body {
	width: 100%;
	height: 100%;
}
.outer {
	display: flex;
	width: 100%;
	height: 100%;
}
.left {
	width: 200px;
	background: red;
}
.right {
	display: flex;
	flex-direction: column;
	flex: 1;
	background: black;
}
.top {
	flex: 1;
	background: yellow;
}
.bottom {
	height: 150px;
	background: pink;
}

JS调用

1、参数配置

const config = {
  direction: 'hdr',
  elId: '', // 元素id,需要拖动组件的元素
  zIndex: 100, // 拖动元素的层级
  minWidth: 100, // 水平方向时可拖动的最小宽度
  maxWidth: 800, // 水平方向时可拖动的最大宽度
  minHeight: 100, // 垂直方向时可拖动的最小高度
  maxHeight: 600, // 垂直方向时可拖动的最大高度
  dragElBgColor: 'transpant' // 拖动边界元素背景色
}

config.direction 操作模块所需添加运动方向
hdl 向水平方向当前操作元素的左侧添加控制手柄
hdr 向水平方向当前操作元素的右侧添加控制手柄
vdt 向垂直方向当前操作元素的上侧添加控制手柄
vdb 向垂直方向当前操作元素的下侧添加控制手柄


2、函数调用

	2.1、垂直布局对底部元素的上边界添加拖动事件

	const bconf = {
		direction: 'vdt',
		elId: 'bottom'
	}

	new FlexBoundaryDragTool(bconf)

    2.2、水平布局对左侧元素的右边界添加拖动事件

	const rconf = {
		direction: 'hdr',
		elId: 'left'
	}

	new FlexBoundaryDragTool(rconf)