在 vanilla js 上拖放鼠标移动脚本

Question

我正在编写一个拖放脚本，用于拖放带有“.draggable”类的块。问题是该块会定期粘在光标上并且不会脱落。如何编辑此脚本，以便可以用鼠标拖动所有具有“.draggable”类的块而不会出现此问题？let elements = document.querySelectorAll('.draggable');elements.forEach(function(el) {  let mover = false,    x, y, posx, posy, first = true;  el.onmousedown = function() {    mover = true;  };  el.onmouseup = function() {    mover = false;    first = true;  };  el.parentNode.onmousemove = function(e) {    el.style.cursor = "move";    if (mover) {      if (first) {        x = e.offsetX;        y = e.offsetY;        first = false;      }      posx = e.pageX - x;      posy = e.pageY - y;      el.style.left = posx + 'px';      el.style.top = posy + 'px';    }  }});.draggable {  position: absolute;  z-index: 1;  top: 100px;}<section class="dragscroll">  <div class="draggable">    <textarea></textarea>   </div></section><section class="dragscroll">  <div class="draggable">    <textarea></textarea>  </div></section>

Answer 1

很难说这有效，因为它很难产生错误，所以请让我知道这有效。我所做的只是

document.addEventListener("mouseup", function() {

    mover = false;

    first = true;

  });

let elements = document.querySelectorAll('.draggable');

elements.forEach(function(el) {

  let mover = false,

    x, y, posx, posy, first = true;

  el.onmousedown = function() {

    mover = true;

  };

  document.addEventListener("mouseup", function() {

    mover = false;

    first = true;

  });

/*

  document.onmouseup = function() {

    mover = false;

    first = true;

  };

*/

  el.parentNode.onmousemove = function(e) {

    el.style.cursor = "move";

    if (mover) {

      if (first) {

        x = e.offsetX;

        y = e.offsetY;

        first = false;

      }

      posx = e.pageX - x;

      posy = e.pageY - y;

      el.style.left = posx + 'px';

      el.style.top = posy + 'px';

    }

  }

});

.draggable {

  position: absolute;

  z-index: 1;

  top: 100px;

}

<section class="dragscroll">

  <div class="draggable">

    <textarea></textarea>

   </div>

</section>

<section class="dragscroll">

  <div class="draggable">

    <textarea></textarea>

  </div>

</section>