javascript - 通过拖动拉伸和收缩 div

Question

在没有 jQuery 的情况下使用 javascript，我想让用户绘制一个可以标记照片的矩形。通过在照片上拖动鼠标来选择矩形。当用户拖出该区域时，矩形会拉伸和收缩。用户可以向任何方向拖动，包括向上和向左拖动，就像大多数计算机桌面上的可拖动矩形一样。我应该设置的 div 对象的样式属性是什么？

---

编辑：我只是在寻找正确的属性来设置拖动 div 边缘。

Answer 1

我想到了。我需要使用 offsetLeft, offsetRight, offsetTop, offsetBottom, offsetWidth, 和offsetHeight 来获取测量值，以及 style.left, style.right, style.top, style.bottom,style.width并style.height 设置它们。

Answer 2

看看jQuery Resizable。

如果它符合您的需求，请使用它，否则请查看它是如何实现的。

Answer 3

有一个“可调整大小”的 css 属性，但我认为这只适用于右下角......我建议只监听 mousedown 事件，然后获取鼠标坐标，然后开始监听 mousemove 事件并作为每个事件fires 根据新坐标设置 div 的大小/位置，然后在 mouseup 事件上删除 mousemove 事件侦听器。我以前做过，我敢肯定 - 我会查找代码并将其放入 jsfiddle 中为您服务。