繁体   English   中英

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

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM