【LSP】使用JS制作一个鼠标可拖的DIV

原理与鼠标拖动 DIV 相同。



下面就先实现一个在DIV的右上角显示一个小正方形（类似）。

当鼠标按下并拖动时，DIV会以要拖动的元素的左下角的坐标点定位，根据鼠标的拖动，按比例的扩大或缩小。



一、思路
1、鼠标按时事件。
这里要初始化数据。

同移动一样，给小正方形绑定鼠标按时事件。

（1）获得并保存要移动的元素（parent）的宽（parentWidth）与高（parentHeight）。

即：元素缩放前的宽与高。

（2）由于是要按比例缩放，所以，要在这时计算出宽与高的比例(scale)，得到的结果保留一位小数。

（3）获得鼠标的 X 坐标（mouseX），用于计算鼠标移动前与移动后的位置。

2、鼠标拖动事件。
同移动一样，给 document 帮绑定移动事件。

由于小正方形是放在元素（parent）中的，为了避免绑定的鼠标按下事件与元素（parent）中相同的事件有冲突。

所以，在绑定document.onmousemove前，要先清空元素（parent）的onmousedown事件。

parent.onmousedown = function () { }
document.onmousemove = function (doc) {
}
（1）计算出：鼠标移动的差值（moveWidth） = 移动后的鼠标坐标（currentMouseX） - 移动前的鼠标坐标（mouseX）。

（2）元素（parent）缩放后的宽度（width） = 元素（parent）当前的宽度 + 鼠标移动的差值（moveWidth）

（3）元素（parent）缩放后的高度（height） = 元素（parent）缩放的后的宽度（width）X (1 / 宽与高的比例(scale))

即：height = width X (1 / scale)

注意，这里要使用四舍五入来取整。

（4）由于是要以元素（parent）左下角的坐标为定点，所以需要计算出元素（parent）左上角的 Y 坐标（top）的偏移量。

元素（parent）左上角的 Y 坐标（top） = 元素（parent）当前左上角的 Y 坐标 - （元素（parent）缩放后的高度（height） - 元素（parent）缩放前的高度（parentHeight））

即：

top = parent.offsetTop - (height - parentHeight);
设置元素（parent）左上角的 Y 坐标。

设置元素（parent）缩放后的宽度。

设置元素（parent）缩放后的高度。

parent.style.top = top + "px";
parent.style.width = width + "px";
parent.style.height = height + "px";
更新当前鼠标的 X 坐标（mouseX）。

更新当前元素的宽度（parentWidth）。

更新当前元素的高度（parentHeight）。

mouseX = currentMouseX;
parentWidth = parent.offsetWidth;
parentHeight = parent.offsetHeight;
3.鼠标放开事件
当鼠标放开时：

清除 document.onmousemove 事件。

重新绑定（parent）的 onmousedown 事件到 moveBind 函数。

二、实现
续上篇

首先，在元素（parent）里增加一个子DIV并绑定onmousedown事件到zoomBind函数，做为右上角的小正方形。

在 addElement 函数里增加：

var rightSize = "";
CSS样式是：

以下是完整源码：

这里使用的是 jquery-1.10.2.min.js