javascript - JS 调整 div 大小

Question

我想创建 div 元素，其行为类似于在 Windows 桌面上单击并拖动。

到目前为止，我的代码执行以下操作:

• 当页面检测到鼠标按下时，我们创建(只需将 display:none 的 CSS 样式更改为 display:block)一个 `div`
• 如果用户在按住鼠标的同时移动鼠标，则会修改 div 的大小。
• 当用户释放鼠标按钮时，我们隐藏 div (display:none)

我的问题是调整大小部分。目前，div 只能向东南方向扩展。

引用这个Fiddle一个例子。

尝试使用 Fiddle 示例来了解我的意思(例如，您不能垂直扩展超出原点)。

我认为原因是因为 newX 和 newY 是负值。我该如何解决这个问题？

Answer 1

你没有考虑鼠标移动坐标小于绘图起始坐标的情况，我稍微修改了JS代码，

var clientBox = document.getElementById("userBox");
var startX, startY, currentX, curentY;

function initRect(event) {
    startX = event.clientX;
    startY = event.clientY;
    window.addEventListener("mousemove", drawRect);
    window.addEventListener("mouseup", dstryRect);

}

function drawRect(event) {
    var width = event.clientX-startX;
    var height = event.clientY-startY;
    var x = startX;
    var y = startY;
    if (width < 0) {
        x = startX + width;
        width=-width;
    }
    if (height < 0) {
        y = startY + height;
        height = -height;
    }
    clientBox.style.display = "block";   // Hideen until click detected
    clientBox.style.top  = y + "px";
    clientBox.style.left = x + "px";
    clientBox.style.width = width + "px";
    clientBox.style.height = height + "px";
}

function dstryRect() {
    window.removeEventListener("mousemove", drawRect);
    window.removeEventListener("mouseup", dstryRect);
    clientBox.style.display = "none";
    clientBox.style.height = "0px";
    clientBox.style.width = "0px";
}

只需更新 JS 文件中的这些更改即可完成。这是工作fiddle谢谢。