issue when dragging an image using javascript (jQuery)

Question

Hi all,

I am trying to create a draggable div with an image. I could drag a div with some text, but whenever I replace the text with an image dragging not working fine. Please check this link, If you replace the image with text, it will be able to drag the text on the window,but it wont work if we replace the text with an image as it is now

Please help

Thank you for the consideration

Answer 1

you need to use e.preventDefault() and pass e as a parmeter in the images mousemove function

Answer 2

I just tested it myself, you need to do:

$('#dv').mousedown(function(e){
e.preventDefault ();

x1 = e.pageX - parseInt($('#dv').css('left'));
y1 = e.pageY - parseInt($('#dv').css('top'));
drag = true;

})

This will prevent the browser drag-and-drop function.

HTH.

Answer 3

Another fast fix is just not using the img tag but css to set the background-image of the div and its width , height. This will also work.