javascript - 如何解决 "negative"高度和宽度？

Question

我正在文档上绘制一个 div，但它仅在宽度和高度为正值时有效:

var div;

function onMouseMove (e) {
    div.height(parseInt(e.pageY) - parseInt(div.css("top")) );
    div.width( parseInt(e.pageX) - parseInt(div.css("left")));
    console.log(div.width());
    console.log(div.height());
};

$(document).on("mousedown", function(e){
    div = $("<div></div>").prependTo("body");
    div.css({
        "top": e.pageY,
        "left": e.pageX
    });
    $(this).on("mousemove", onMouseMove);
});

$(document).on("mouseup", function(){
    setTimeout(function(){
        div.remove();
    }, 1000);
    $(this).off("mousemove", onMouseMove);
});

fiddle here

当宽高变为负值时，如何实现？

提前致谢。

Answer 1

您需要添加 Math.abs 并执行如下操作:

var div;
var startX = 0 / 1;
var startY = 0 / 1;

function onMouseMove(e) {
  div.height(Math.abs(parseInt(e.pageY)-parseInt(div.css("top"))));
  div.width(Math.abs(parseInt(e.pageX) - parseInt(div.css("left"))));


  if (parseInt(e.pageY) < startY) {
    div.css({
        "top": e.pageY
    });
   div.height(Math.abs(parseInt(e.pageY)-startY));
  }
 if (parseInt(e.pageX) < startX) {
    div.css({
        "left": e.pageX
    });
        div.width(Math.abs(parseInt(e.pageX) - startX));
}

  console.log(div.width());
  console.log(div.height());
  console.log(e.pageX + '<--x y--> ' + e.pageY)
};

$(document).on("mousedown", function (e) {
div = $("<div></div>").prependTo("body");
startX = parseInt(e.pageX);
startY = parseInt(e.pageY);
div.css({
    "top": e.pageY,
        "left": e.pageX
});
$(this).on("mousemove", onMouseMove);
});

$(document).on("mouseup", function () {
setTimeout(function () {
    div.remove();
}, 1000);
$(this).off("mousemove", onMouseMove);
});

fiddle example