通过拖动拉伸和缩小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事件，然后获取鼠标coords，然后开始侦听mousemove事件和每个触发器根据新的coords设置div的大小/位置，然后在mouseup事件中删除mousemove事件监听器。我以前做过，我敢肯定 - 我会找代码并把它放在jsfiddle中。