在原版js上拖放鼠标移动脚本

Question

我正在写一个拖拽&用于拖放类为".draggable"的块的drop脚本。问题是块会周期性地粘在光标上而不会脱落。如何编辑此脚本，使所有类为".tragable"的块都可以用鼠标拖动而不会出现此问题？

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>