如何使用纯javascript在屏幕上平滑地拖动图像？
如何使用纯javascript在屏幕上平滑地拖动图像？
提问于 2013-08-01 19:15:41
我正在尝试使用JavaScript在屏幕上拖动一个图像。我已经编写了一个脚本，可以在带有文本的div上很好地工作，但当我在图像上使用它时，它会断断续续地工作。
我把我的代码放在jsfiddle上，这样其他人就能明白我的意思。http://jsfiddle.net/laurence/YNMEX/
如果你运行它，你会发现文本块可以被拖放，但当你对图像做同样的事情时，它会留下图像。就像图像跟不上鼠标的移动一样。
我在jsfiddle上重复了下面的代码：
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
// IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if (targ.className != 'dragme') {
return
};
// calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;
// assign default values for top and left properties
if (!targ.style.left) {
targ.style.left = '0px'
};
if (!targ.style.top) {
targ.style.top = '0px'
};
// calculate integer values for top and left
// properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove = dragDiv;
}
function dragDiv(e) {
if (!drag) {
return
};
if (!e) {
var e = window.event
};
var targ = e.target ? e.target : e.srcElement;
// move div element
targ.style.left = coordX + e.clientX - offsetX + 'px';
targ.style.top = coordY + e.clientY - offsetY + 'px';
return false;
}
function stopDrag() {
drag = false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}.dragme {
position: relative;
width: 270px;
height: 203px;
cursor: move;
}
#draggable {
background-color: #ccc;
border: 1px solid #000;
}<div id="draggable" class="dragme">"Hello World!"</div>
<img src="https://picsum.photos/270/203" alt="drag-and-drop image script" title="drag-and-drop image script" class="dragme">
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-01 19:26:21
只需在startDrag函数的末尾添加return false，以防止浏览器处理单击事件。
Stack Overflow用户
发布于 2014-07-01 21:27:48
此外，应该仅在startDrag和global上分配targ (没有var)：
http://jsfiddle.net/gigyme/YNMEX/132/
<script type="text/javascript">
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
if(e.preventDefault) e.preventDefault();
// IE uses srcElement, others use target
targ = e.target ? e.target : e.srcElement;
if (targ.className != 'dragme') {return};
// calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;
// assign default values for top and left properties
if(!targ.style.left) { targ.style.left='0px'};
if (!targ.style.top) { targ.style.top='0px'};
// calculate integer values for top and left
// properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove=dragDiv;
return false;
}
function dragDiv(e) {
if (!drag) {return};
if (!e) { var e= window.event};
// var targ=e.target?e.target:e.srcElement;
// move div element
targ.style.left=coordX+e.clientX-offsetX+'px';
targ.style.top=coordY+e.clientY-offsetY+'px';
return false;
}
function stopDrag() {
drag=false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
</script>Stack Overflow用户
发布于 2013-08-01 19:36:36
您可以在startDrag函数的末尾添加e.preventDefault();
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17992543
复制相关文章
相似问题