javascript - 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>

标签： javascripthtmlwebdrag-and-drop

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>