Question

I’m fairly new to JavaScript, so any help would be awesome!

I created this small block of code that let’s me grab a div and drag it around. I assign the “dragme” id to the div and all is fine and dandy. The problem is that if I replace that div from my html and put an img element instead (obviously assigning the “dragme” id to the img), things don’t work as expected.

When I click to drag the img, it actually moves for about 3 or 4 pixels then it freezes until I lift the mouse button (mouseup).

Is there some property or characteristic that would prevent the img element from acting the same way as the div does?

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

Answer 1

This fixed the problem (answer provided as a comment by syazdani):

I’d venture to say that the built in browser drag and drop for images
is kicking in. Try e.preventDefault and return false in the mousedown
handler. – syazdani Dec 2 ’12 at 17:26