Question

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

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

当页面检测到鼠标按下时，我们创建（只是将display：none的CSS样式更改为display：none）

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 谢谢。

JS可调整大小的div

1 个答案: