Скрипт перемещения мыши перетаскиванием на vanilla js

Я пишу скрипт перетаскивания для перетаскивания блоков с классом .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>

# web drag-and-drop
Источник
Codelisting
за 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>

Codelisting
Популярные категории
На заметку программисту