javascript - 用 handle 拖动 <div> (无 JQuery)

Question

我想创建一个可以用 handle 拖动的 div 并编写了以下代码:

var mydragg = function() {
  return {
    move: function(divid, xpos, ypos) {
      divid.style.left = xpos + 'px';
      divid.style.top = ypos + 'px';
    },
    startMoving: function(divid, container, evt) {
      evt = evt || window.event;
      var posX = evt.clientX,
        posY = evt.clientY,
        divTop = divid.style.top,
        divLeft = divid.style.left,
        eWi = parseInt(divid.style.width),
        eHe = parseInt(divid.style.height),
        cWi = parseInt(document.getElementById(container).style.width),
        cHe = parseInt(document.getElementById(container).style.height);
      document.getElementById(container).style.cursor = 'move';
      divTop = divTop.replace('px', '');
      divLeft = divLeft.replace('px', '');
      var diffX = posX - divLeft,
        diffY = posY - divTop;
      document.onmousemove = function(evt) {
        evt = evt || window.event;
        var posX = evt.clientX,
          posY = evt.clientY,
          aX = posX - diffX,
          aY = posY - diffY;
        if (aX < 0) aX = 0;
        if (aY < 0) aY = 0;
        if (aX + eWi > cWi) aX = cWi - eWi;
        if (aY + eHe > cHe) aY = cHe - eHe;
        mydragg.move(divid.parentNode, aX, aY);
      }
    },
    stopMoving: function(container) {
      var a = document.createElement('script');
      document.getElementById(container).style.cursor = 'default';
      document.onmousemove = function() {}
    },
  }
}();

#container {
  position: absolute;
  background-color: teal;
}

#dragc {
  position: absolute;
  background-color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

#header {
  position: relative;
  background: black;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#202020, black);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#202020, black);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#202020, black);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#202020, black);
  /* Standard syntax */
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  height: 30px;
  width: 100%;
  color: white;
  font-size: 30px;
}

#taskbar {
  position: absolute;
  background: black;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#202020, black);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#202020, black);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#202020, black);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#202020, black);
  /* Standard syntax */
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  height: 40px;
  width: 100%;
  bottom: 0px;
  color: white;
  font-size: 35px;
}

<div id='container' style="width: 100%;height: 100%;top:0px;left:0px;">
  <div id="taskbar">
    ...
  </div>
  <div id="dragc" style="width: 200px;height: 100px; left: 30%; top: 20%;">
    <div id="header" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'>
      Test window
    </div>
    <div>
      If you drag it, it resets its position, this is the problem.
    </div>
  </div>
</div>

问题是，当你开始拖动时，它的位置重置为 left: 0px;顶部:0px； 我尝试过很多事情，但都失败了。 我不知道如何解决这个问题，请帮忙!

Answer 1

您正在尝试读取 div 上从未设置的样式。因此，当您在 move 中设置样式时，它将默认为 undefined 并被解释为零。

用途:

divid.getBoundingClientRect(); 

然后是矩形的 .top 和 .left 属性。

var mydragg = function() {
  return {
    move: function(divid, xpos, ypos) {
      divid.style.left = xpos + 'px';
      divid.style.top = ypos + 'px';
    },
    startMoving: function(divid, container, evt) {
      evt = evt || window.event;
      var rec = divid.getBoundingClientRect();
      var posX = evt.clientX,
        posY = evt.clientY,
        divTop = rec.top,
        divLeft = rec.left,
        eWi = parseInt(divid.style.width),
        eHe = parseInt(divid.style.height),
        cWi = parseInt(document.getElementById(container).style.width),
        cHe = parseInt(document.getElementById(container).style.height);
        
                console.log(divTop);
                
      document.getElementById(container).style.cursor = 'move';
      //divTop = divTop.replace('px', '');
      //divLeft = divLeft.replace('px', '');
      var diffX = posX - divLeft,
        diffY = posY - divTop;
      document.onmousemove = function(evt) {
        evt = evt || window.event;
        var posX = evt.clientX,
          posY = evt.clientY,
          aX = posX - diffX,
          aY = posY - diffY;
        if (aX < 0) aX = 0;
        if (aY < 0) aY = 0;
        if (aX + eWi > cWi) aX = cWi - eWi;
        if (aY + eHe > cHe) aY = cHe - eHe;
        mydragg.move(divid.parentNode, aX, aY);
      }
    },
    stopMoving: function(container) {
      var a = document.createElement('script');
      document.getElementById(container).style.cursor = 'default';
      document.onmousemove = function() {}
    },
  }
}();

#container {
  position: absolute;
  background-color: teal;
}

#dragc {
  position: absolute;
  background-color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

#header {
  position: relative;
  background: black;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#202020, black);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#202020, black);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#202020, black);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#202020, black);
  /* Standard syntax */
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  height: 30px;
  width: 100%;
  color: white;
  font-size: 30px;
}

#taskbar {
  position: absolute;
  background: black;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#202020, black);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#202020, black);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#202020, black);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#202020, black);
  /* Standard syntax */
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  height: 40px;
  width: 100%;
  bottom: 0px;
  color: white;
  font-size: 35px;
}

<div id='container' style="width: 100%;height: 100%;top:0px;left:0px;">
  <div id="taskbar">
    ...
  </div>
  <div id="dragc" style="width: 200px;height: 100px; left: 30%; top: 20%;">
    <div id="header" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'>
      Test window
    </div>
    <div>
      If you drag it, it resets its position, this is the problem.
    </div>
  </div>
</div>