我有以下代碼使div成為可拖動的：
let div = document.querySelector('div')
div.onmousedown = function() {
div.addEventListener('mousemove', move, true)
}
window.onmouseup = function() {
window.removeEventListener('mousemove', move, true)
}
function move(e) {
this.style.position = 'absolute'
this.style.top = e.clientY 'px'
this.style.left = e.clientX 'px'
}div {
background: red;
width: 100px;
height: 100px;
}<div></div>我不知道為什么，這段代碼沒有像我預期的那樣正常作業。
有時，當我只是將滑鼠懸停在 時div，它的位置也會發生變化，這是我沒想到的。代碼查了好幾遍，沒有定義mouseover效果。
誰能告訴我我做錯了什么以及如何解決它？
感謝您的任何回應！
uj5u.com熱心網友回復：
您必須從 div 中洗掉事件偵聽器，而不是從視窗中洗掉：
當用戶拖動它時，我也將 div 居中，因此滑鼠沒有機會離開 div。
let div = document.querySelector('div');
function move(e) {
this.style.position = 'absolute'
this.style.top = e.clientY - (this.offsetHeight / 2) 'px'
this.style.left = e.clientX - (this.offsetWidth / 2) 'px'
}
div.addEventListener('mousedown', function() {
this.addEventListener('mousemove', move, true);
});
window.addEventListener('mouseup', function() {
div.removeEventListener('mousemove', move, true);
});div {
background: red;
width: 100px;
height: 100px;
}<div></div>uj5u.com熱心網友回復：
有兩個問題，
- 您是從視窗中洗掉事件串列器，而不是在 div 上。
- 您需要考慮偏移值以在移動時正確定位 div。
let div = document.querySelector('div')
let offsetX = "";
let offsetY = "";
div.onmousedown = function(e) {
var domRect = this.getBoundingClientRect();
offsetX = e.clientX - domRect.left;
offsetY = e.clientY - domRect.top;
div.addEventListener('mousemove', move, true)
}
window.onmouseup = function() {
div.removeEventListener('mousemove', move, true)
}
function move(e) {
this.style.position = 'absolute'
this.style.top = e.clientY - offsetY 'px'
this.style.left = e.clientX - offsetX 'px'
}#my-div {
background: red;
width: 100px;
height: 100px;
}<div id="my-div"></div>uj5u.com熱心網友回復：
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id "header")) {
document.getElementById(elmnt.id "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader {
height: 100px;
width: 100px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}<h1>Draggable DIV Element</h1>
<div id="mydiv">
<div id="mydivheader"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400002.html
標籤：javascript html css
上一篇：CSS@media問題