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

yangxu   ·   发表于 22天前   ·   编程代码

原理与鼠标拖动 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

1 Reply   |  Until 22天前 | 1539 View

asdfgl
发表于 22天前

手机上就不行了

评论列表

  • 加载数据中...

编写评论内容
LoginCan Publish Content