[英]Javascript drag and drop code works on div but doesn't work on img
我对JavaScript还是很陌生,所以任何帮助都很棒!
我创建了这一小段代码,让我抓取一个div并将其拖动。 我将“ dragme” ID分配给div,一切正常。 问题是,如果我从html替换该div并放入一个img元素(显然为img分配了“ dragme” id),那么事情将无法按预期进行。
当我单击以拖动img时,它实际上会移动约3或4像素,然后冻结,直到我抬起鼠标按钮(鼠标)。
是否有某些属性或特性会阻止img元素像div一样起作用?
var isClicked = false;
var startClientX = 0;
var startClientY = 0;
var startLeft = 0;
var startTop = 0;
window.addEventListener("load", addListeners, true);
function addListeners()
{
document.getElementById("dragme").addEventListener("mousedown", mouseIsDown, false);
document.getElementById("dragme").addEventListener("mouseup", mouseIsUp, false);
window.addEventListener("mousemove", moveImage, false);
function mouseIsDown(e)
{
if (isClicked == false)
{
isClicked = true;
startClientX = e.clientX;
startClientY = e.clientY;
startLeft = document.getElementById("dragme").offsetLeft;
startTop = document.getElementById("dragme").offsetTop;
}
}
function mouseIsUp()
{
if (isClicked == true)
{
isClicked = false;
}
}
function moveImage(e)
{
if (isClicked == true)
{
imageLeftDif = e.clientX - startClientX;
imageTopDif = e.clientY - startClientY;
var newLeftPos = (startLeft + imageLeftDif) + "px";
var newTopPos = (startTop + imageTopDif) + "px";
document.getElementById("dragme").style.left = newLeftPos;
document.getElementById("dragme").style.top = newTopPos;
}
}
}
这样可以解决问题( syazdani作为评论提供了答案):
我敢说是内置的浏览器拖放功能开始起作用。尝试e.preventDefault并在mousedown处理程序中返回false。 – syazdani '12 Dec 2'在17:26
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.