ansaurus

Question

my jQuery script is not working with images, but working with all other elements

Answer 1

A:

You can get it working with a tiny tweak in your mousedown event handler:

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

    e.preventDefault();

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

});

The preventDefault() call stops the browser from trying to natively move the image itself and lets your script take over.

Edit

To get this working in IE, you'll also have to add a preventDefault() call to your mousemove event handler:

$(document).mousemove(function(e){ 
    if(!drag) return;

    e.preventDefault();
    $('#dv').css('left',eval(e.pageX - x1)+'px')
    $('#dv').css('top',eval(e.pageY - y1)+'px')
})

Pat 2010-08-03 14:56:20

e.preventDefault(); doesn't work in IE, do you have a solution ?

john 2010-08-03 15:25:11

But of course - check out my edits to see the fix.

Pat 2010-08-03 17:03:05

Thank you pet, you have done a great job, Thank you very much, I was trying to get this for 2 weeks, Thanks again :) :) :)

john 2010-08-04 07:50:45

Answer 2

A:

Try using classNames over ids.

Also after say 10 mousedowns on a target element, that element will have 20 listeners all firing when dragging since you never remove the listeners on mouseup.

BGerrissen 2010-08-03 14:59:46

This is incorrect, the mouse handlers are attached in `document.ready`, not in the `mousedown` handler, look closed at the code/parenthesis, I'll format to make it even clearer.

Nick Craver 2010-08-03 15:23:27

I stand corrected, my appologies ;)Using id's instead of classnames for css expressions however limit the drag script to one single entity. Afaik, jQuery only returns the last found element with id X as per standard. Using classnames makes it more generic and predictable.

BGerrissen 2010-08-04 08:56:00

Answer 3

A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml"&gt; 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery Drag and drop</title> 
<style type="text/css"> 
#dv {
             position: absolute;
             cursor: move;
           }  
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> 


<script language="javascript"> 
var x1 = y1 = 0;
var drag = false;
$(document).ready(function(e){

    //this is a possible solution
    jQuery('#dv>img').disableSelection();

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

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

    })

    $(document).mouseup(function(e){ drag = false; })

    $(document).mousemove(function(e){ 

        if(!drag) return
        $('#dv').css('left',eval(e.pageX - x1)+'px')
        $('#dv').css('top',eval(e.pageY - y1)+'px')

    })
});
</script> 
</head> 
<body> 

<div id="dv" style="position:absolute;left:300px;top:200px;"> 
    <img src="http://olario.com/jquery/drupal.png" /> 
</div> 


</div> 
</body> 
</html>

andres descalzo 2010-08-03 15:41:47

this script wont work with images

john 2010-08-03 16:24:01

it works, I tried it before sending

andres descalzo 2010-08-03 17:55:37

ansaurus

tags:

views:

answers:

my jQuery script is not working with images, but working with all other elements

related questions