我正在尝试使一个框移动和调整大小。
我已经完善了移动部分和调整大小的权利和底部。
我有一个问题，调整左和顶部。
这是我的初始变量……

var mousePosition;
var offset;
var wrSizeOffset, wlSizeOffset, hbSizeOffset;
var div;
var isDown = false;
var wlSizeDown, wrSizeDown, htSizeDown, hbSizeDown = false;
var divWidth, divHeight;

然后我检查鼠标是否按下了盒子。

div.addEventListener('mousedown', function(e){

   isDown = true;

   offset = {
      x: div.offsetLeft - e.clientX,
      y: div.offsetTop - e.clientY
   }

   // get width without px
   divWidth = parseInt(div.style.width, 10);

});

然后我检查鼠标移动像这样...

document.addEventListener('mousemove', function(e){

mousePosition = {
  x: e.clientX,
  y: e.clientY
}

// move div while mouse is down
if(isDown){
  div.style.left = (mousePosition.x + offset.x) + 'px';
  div.style.top = (mousePosition.y + offset.y) + 'px';
}

// resize the div from left to right
// I am having no issues here
if(wrSizeDown){
  div.style.width = divWidth + mousePosition.x - wrSizeOffset.x + 'px';
}

// resizing the div from right to left
// here is where I am having an issue ...
if(wlSizeDown){
  div.style.width = divWidth - (mousePosition.x - wlSizeOffset.x) + 'px';
  // specially the below line of code
  div.style.left = divWidth + (mousePosition.x - wlSizeOffset.x) + 'px';
}

});

每当我从右到左调整大小时，div就会跳来跳去，就像它在添加样式一样。
我该怎么做？
这里有一个例子。。

var mousePosition;
var offset;
var wrSizeOffset, wlSizeOffset, hbSizeOffset;
var div;
var isDown = false;
var wlSizeDown, wrSizeDown, htSizeDown, hbSizeDown = false;
var divWidth, divHeight;

div = document.createElement('div');
div.style.position = 'relative';
div.style.left = '100px';
div.style.top = '100px';
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'red';
div.style.border = '1px solid black';

wrSize = document.createElement('div');
wrSize.style.position = 'absolute';
wrSize.style.right = '-10px';
wrSize.style.top = '40px';
wrSize.style.width = '20px';
wrSize.style.height = '20px';
wrSize.style.backgroundColor = 'black';
wrSize.style.border = '1px solid black';

wlSize = document.createElement('div');
wlSize.style.position = 'absolute';
wlSize.style.left = '-10px';
wlSize.style.top = '40px';
wlSize.style.width = '20px';
wlSize.style.height = '20px';
wlSize.style.backgroundColor = 'black';
wlSize.style.border = '1px solid black';

htSize = document.createElement('div');
htSize.style.position = 'absolute';
htSize.style.left = '40px';
htSize.style.top = '-10px';
htSize.style.width = '20px';
htSize.style.height = '20px';
htSize.style.backgroundColor = 'black';
htSize.style.border = '1px solid black';

hbSize = document.createElement('div');
hbSize.style.position = 'absolute';
hbSize.style.left = '40px';
hbSize.style.bottom = '-10px';
hbSize.style.width = '20px';
hbSize.style.height = '20px';
hbSize.style.backgroundColor = 'black';
hbSize.style.border = '1px solid black';

document.body.appendChild(div);
div.appendChild(wrSize);
div.appendChild(wlSize);
div.appendChild(htSize);
div.appendChild(hbSize);

div.addEventListener('mousedown', function(e){

  isDown = true;

  offset = {
    x: div.offsetLeft - e.clientX,
    y: div.offsetTop - e.clientY
  }

});

wrSize.addEventListener('mousedown', function(e){

  wrSizeDown = true;

  wrSizeOffset = {
    x: e.clientX,
    y: e.clientY
  }

  divWidth = parseInt(div.style.width, 10);

});

wlSize.addEventListener('mousedown', function(e){

  wlSizeDown = true;

  wlSizeOffset = {
    x: e.clientX,
    y: e.clientY
  }

  divWidth = parseInt(div.style.width, 10);

  console.log(divWidth);
  console.log(wlSizeOffset.x);

});

hbSize.addEventListener('mousedown', function(e){

  hbSizeDown = true;

  hbSizeOffset = {
    x: e.clientX,
    y: e.clientY
  }

  divHeight = parseInt(div.style.height, 10);

});

document.addEventListener('mouseup', function(e){

  isDown = false;
  wrSizeDown = false;
  wlSizeDown = false;
  hbSizeDown = false;

});

document.addEventListener('mousemove', function(e){

  mousePosition = {
    x: e.clientX,
    y: e.clientY
  }

  if(isDown && (!wrSizeDown && !wlSizeDown && !hbSizeDown)){
    div.style.left = (mousePosition.x + offset.x) + 'px';
    div.style.top = (mousePosition.y + offset.y) + 'px';
  }

  if(wrSizeDown){
    div.style.width = divWidth + mousePosition.x - wrSizeOffset.x + 'px';
  }

  if(hbSizeDown){
    div.style.height = divHeight + mousePosition.y - hbSizeOffset.y + 'px';
  }

  if(wlSizeDown){
    div.style.width = divWidth - wlSizeOffset.x + mousePosition.x + 'px';
    div.style.left = divWidth + wlSizeOffset.x - mousePosition.x + 'px';
  }

});

body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

#box{
  position: absolute;
  display: block;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: #d80000;
  border: 1px solid #000;
}