1

我对 JavaScript 相当陌生，所以任何帮助都会很棒！

我创建了一小段代码，让我可以抓取一个 div 并拖动它。我将“dragme”id 分配给 div，一切都很好。问题是，如果我从我的 html 中替换该 div 并放置一个 img 元素（显然将“dragme”id 分配给 img），事情就不会按预期工作。

当我单击拖动 img 时，它实际上移动了大约 3 或 4 个像素，然后它会冻结，直到我抬起鼠标按钮（mouseup）。

是否有一些属性或特征会阻止 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;
        }
    }   
}
4

1 回答 1

0

这解决了问题（由syazdani作为评论提供的答案）：

我敢说，内置的浏览器拖放图像正在启动。尝试 e.preventDefault 并在 mousedown 处理程序中返回 false。– syazdani 2012 年 12 月 2 日在 17:26

于 2013-01-28T17:35:26.400 回答