在香草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>

​