Javascript拖放代码适用于div,但不适用于img

Javascript拖放代码适用于div,但不适用于img,javascript,image,drag,Javascript,Image,Drag,我对JavaScript相当陌生,所以任何帮助都会很棒 我创建了一小段代码,让我抓起一个div并拖动它。我把dragme id分配给div,一切都很好。问题是,如果我从html中替换该div,并放置一个img元素,而不是将dragme id分配给img,那么事情就不会像预期的那样工作 当我点击拖动img时,它实际上会移动大约3或4个像素,然后它会冻结,直到我提起鼠标按钮mouseup 是否有某些属性或特征会阻止img元素以与div相同的方式工作 var isClicked = false; va

我对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;
        }
    }   
}

这修复了syazdani作为评论提供的问题答案:


我敢说,内置的浏览器可以拖放图像 他正在踢足球。在mousedown中尝试e.preventDefault并返回false 处理者–syazdani 12月2日17:26


你为什么不把img包在一个div里,把dragme放在div上呢?没错,我也试过了,虽然我在帖子里没有提到,但结果完全一样=图像是否渲染为块级元素?我敢说,内置的图像浏览器拖放功能正在发挥作用。请在mousedown处理程序中尝试e.preventDefault并返回false。@Zeta:这是我的html->,我的CSS中没有display:块。。。但我会彻底搜索,以找到它的作用!谢谢