5分钟实现一个可拖拽矩形
Posted 狼丶宇先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5分钟实现一个可拖拽矩形相关的知识，希望对你有一定的参考价值。
一、写在前面
写这个原因很简单，有这么一个需求如下：
编写代码实现以下要求：画一个矩形，拖拽矩形的4个角可以将矩形缩放，在矩形上按住鼠标拖动可以移动该矩形的位置。
要求如下：
- 整个矩形的最小大小为 5px * 5px，缩放到最小时不能发生移动；
- 鼠标快速移动时移动和缩放效果要保持流畅。
二、直接上代码
还是按照步骤一步一步的来吧。首先是要创建一个矩形，然后再写逻辑，下面一个矩形就画好了。。。
但是似乎屏幕上啥也没有。。 是的没宽高，所以就看不到了。别着急，继续画。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽缩放元素(工厂模式)</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#app-warpper {
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="app-warpper"></div>
</body>
<script>
//todo
</script>
</html>
这里开始写逻辑了，我们选择用工厂模式来创建一个可以拖拽编辑的矩形。下面就是代码工厂部分.若想看逻辑的可以一步一步的看代码注释,大概的思路就是,你需要计算你当前按下鼠标的位置,然后在移动的时候获取的鼠标位置与刚刚鼠标按下的位置进行一个计算.有个差值,这个差值就是需要移动的距离.
矩形缩放的时候就稍微要复杂一点了,大概思路如下:
- 左上角缩放: 计算 left坐标,top的坐标,以及宽高;
- 右上角缩放: 计算top坐标 和 宽高即可.
- 右下角缩放: 计算宽高即可.
- 左下角缩放: 计算left,top 和宽高.
可能描述有点抽象,但是动手写一遍的时候就知道大概是咋回事了.
/**
* 创建一个可拖拽的矩形
*/
function CreateDragRect(elm, options = {}) {
if (!elm) throw new Error('el 必须是一个document对象');
this.rect = elm;
this.isLeftMove = true;
this.isTopMove = true;
this.rectDefaultPosition = options.position || 'fixed';
this.rectDefaultLeft = options.x || 0;
this.rectDefaultTop = options.y || 0;
this.rectWidth = options.width || 100;
this.rectHeight = options.height || 100;
this.rectMinWidth = options.rectMinWidth || 5; //最小宽度(超过之后不允许再缩放)
this.rectMinHeight = options.rectMinHeight || 5; //最小高度(超过之后不允许再缩放)
this.rectBackgroundColor = options.background || '#ccc';
this.dragIconSize = options.dragIconSize || '4px';
this.dragIconColor = options.dragIconColor || '#f00';
//主矩形是否可以移动
this.isMove = false;
this.initStyle();
this.bindDragEvent(this.rect);
}
/**
* 主矩形绑定move事件
*/
CreateDragRect.prototype.bindDragEvent = function (dom, position) {
const _this = this;
dom.onmousedown = function (event) {
event.stopPropagation();
//按下矩形的时候可以移动，否则不可移动
_this.isMove = !position;
// 获取鼠标在wrapper中的位置
let boxX = event.clientX - dom.offsetLeft;
let boxY = event.clientY - dom.offsetTop;
//鼠标移动事件(如果计算太高,有拖影)
document.onmousemove = _this.throttle(function (moveEv) {
let ev = moveEv || window.event;
ev.stopPropagation();
let moveX = ev.clientX - boxX;
let moveY = ev.clientY - boxY;
switch (position) {
case 'top-left': //左上: 需计算top left width
_this.nwRectSize(moveX, moveY);
break;
case 'top-right': //右上 计算top 和 height
_this.neRectSize(moveX, moveY);
break;
case 'right-bottom': //只需计算当前鼠标位置
_this.seRectSize(moveX, moveY);
break;
case 'left-bottom': //计算left偏移量，计算w
_this.swRectSize(moveX, moveY);
break;
default: //拖拽矩形
if (!_this.isMove) return null;
_this.moveRect(ev.clientX - boxX, ev.clientY - boxY);
}
}, 15);
//鼠标松开，移除事件
document.onmouseup = function (event) {
document.onmousemove = null;
document.onmouseup = null;
// 存储当前的rect的宽高
_this.rectWidth = _this.rect.offsetWidth;
_this.rectHeight = _this.rect.offsetHeight;
// 获得当前矩形的offsetLeft 和 offsetTop
_this.rectOffsetLeft = _this.rect.offsetLeft;
_this.rectOffsetTop = _this.rect.offsetTop;
}
}
}
/**
* 初始化样式
*/
CreateDragRect.prototype.initStyle = function () {
this.rect.style.position = this.rectDefaultPosition;
this.rect.style.width = this.rectWidth + 'px';
this.rect.style.height = this.rectHeight + 'px';
this.rect.style.left = this.rectDefaultLeft + 'px';
this.rect.style.top = this.rectDefaultTop + 'px';
this.rect.style.background = this.rectBackgroundColor;
//依次为上 右 下 左
let dragIcons = [
{
cursor: 'nw-resize',
x: 'top',
y: 'left'
},
{
cursor: 'ne-resize',
x: 'top',
y: 'right'
},
{
cursor: 'se-resize',
x: 'right',
y: 'bottom'
},
{
cursor: 'sw-resize',
x: 'left',
y: 'bottom'
}
];
for (let i = 0, l = dragIcons.length; i < l; i++) {
let icon = document.createElement('i');
icon.id = Math.random().toString(36).substring(7);
icon.style.display = 'inline-block';
icon.style.width = this.dragIconSize;
icon.style.height = this.dragIconSize;
icon.style.position = 'absolute';
icon.style.zIndex = 10;
icon.style.cursor = dragIcons[i].cursor;
icon.style.backgroundColor = this.dragIconColor;
icon.style[dragIcons[i].x] = -parseInt(icon.style.width) / 2 + 'px';
icon.style[dragIcons[i].y] = -parseInt(icon.style.height) / 2 + 'px';
//绑定四个角的拖拽事件
this.bindDragEvent(icon, `${dragIcons[i].x}-${dragIcons[i].y}`);
//插入到矩形
this.rect.appendChild(icon);
}
};
/**
* 移动主矩形
*/
CreateDragRect.prototype.moveRect = function (x, y) {
if (this.isTopMove && this.isLeftMove) {
this.rect.style.left = x + 'px';
this.rect.style.top = y + 'px';
}
};
/**
* 移动主矩形缩放 - 左上
*/
CreateDragRect.prototype.nwRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, this.rectHeight - y);
if (isTopMove) {
this.rect.style.top = this.rectOffsetTop + y + 'px';
this.rect.style.height = height + 'px';
}
if (isLeftMove) {
this.rect.style.left = this.rectOffsetLeft + x + 'px';
this.rect.style.width = width + 'px';
}
};
/**
* 移动主矩形缩放 - 左下
*/
CreateDragRect.prototype.swRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, y);
if (isLeftMove) {
this.rect.style.left = this.rectOffsetLeft + x + 'px';
this.rect.style.width = width + 'px';
}
if (isTopMove) {
this.rect.style.height = height + 'px';
}
};
/**
* 移动主矩形缩放 - 右上
*/
CreateDragRect.prototype.neRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isTopMove, isLeftMove } = this.getMinSize(x, this.rectHeight - y);
if (isTopMove) {
this.rect.style.height = height + 'px';
this.rect.style.top = this.rectOffsetTop + y + 'px';
}
if (isLeftMove) {
this.rect.style.width = width + 'px';
}
};
/**
* 移动主矩形缩放 - 右下
*/
CreateDragRect.prototype.seRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height } = this.getMinSize(x, y);
this.rect.style.width = width + 'px';
this.rect.style.height = height + 'px';
};
/**
* 节流函数
* @param {*} fn
* @param {*} delay
*/
CreateDragRect.prototype.throttle = function (fn, delay) {
let last = 0;
return function () {
let curr = Date.now();
if (curr - last > delay) {
fn.apply(this, arguments);
last = curr;
}
}
}
/**
* 获取宽高
* @param {*} w
* @param {*} h
* @return { Object }
*/
CreateDragRect.prototype.getMinSize = function (w, h) {
let rectMinWidth = this.rectMinWidth;
let rectMinHeight = this.rectMinHeight;
//x拖拽
this.isLeftMove = w >= this.rectMinWidth;
//y拖拽
this.isTopMove = h >= this.rectMinHeight;
if (this.isLeftMove) rectMinWidth = w;
if (this.isTopMove) rectMinHeight = h;
return { width: rectMinWidth, height: rectMinHeight, isLeftMove: this.isLeftMove, isTopMove: this.isTopMove };
}
三、完整代码
只想用代码功能的,只需要复制到你的html文件中就可以直接使用了.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽缩放元素(工厂模式)</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#app-warpper {
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="app-warpper"></div>
</body>
<script>
/**
* 创建一个可拖拽的矩形
*/
function CreateDragRect(elm, options = {}) {
if (!elm) throw new Error('el 必须是一个document对象');
this.rect = elm;
this.isLeftMove = true;
this.isTopMove = true;
this.rectDefaultPosition = options.position || 'fixed';
this.rectDefaultLeft = options.x || 0;
this.rectDefaultTop = options.y || 0;
this.rectWidth = options.width || 100;
this.rectHeight = options.height || 100;
this.rectMinWidth = options.rectMinWidth || 5; //最小宽度(超过之后不允许再缩放)
this.rectMinHeight = options.rectMinHeight || 5; //最小高度(超过之后不允许再缩放)
this.rectBackgroundColor = options.background || '#ccc';
this.dragIconSize = options.dragIconSize || '4px';
this.dragIconColor = options.dragIconColor || '#f00';
//主矩形是否可以移动
this.isMove = false;
this.initStyle();
this.bindDragEvent(this.rect);
}
/**
* 主矩形绑定move事件
*/
CreateDragRect.prototype.bindDragEvent = function (dom, position) {
const _this = this;
dom.onmousedown = function (event) {
event.stopPropagation();
//按下矩形的时候可以移动，否则不可移动
_this.isMove = !position;
// 获取鼠标在wrapper中的位置
let boxX = event.clientX - dom.offsetLeft;
let boxY = event.clientY - dom.offsetTop;
//鼠标移动事件(如果计算太高,有拖影)<以上是关于5分钟实现一个可拖拽矩形的主要内容，如果未能解决你的问题，请参考以下文章