my jQuery script is not working with images, but working with all other elements_问答_开发者

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

开发者 https://www.devze.com 2023-01-10 05:32 出处：网络

I have created a jQuery script to drag elements over the document. I done the script and is working perfectly. but when I add an image the script fails. Why I cant drag an image over my document, I can drag other elements such as div, span etc . I am not interested to use jQuery UI for this purpose

my code follows

<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript">
  var x1 = y1 = 0;
  var drag = false;
  $(document).ready(function(e){
    $('#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>

please check this olario.com/jquery/first.php ( a normal div with text) working perfectly

second ola开发者_如何学Gorio.com/jquery/second.php, that doesn't work with image

I spent two weeks to fix this issue, hope this forum will help me

Thanks a lot in advance

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')
})

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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>