Question

我创建了一个jQuery脚本来拖动文档上的元素。我完成了脚本并且工作正常。但是当我添加图像时，脚本失败了。为什么我不能将图像拖到我的文档上，我可以拖动其他元素，如div，span等。我不想为此目的使用jQuery UI

我的代码如下

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

请检查此olario.com/jquery/first.php（正常div与文字）完美运作

秒olario.com/jquery/second.php，不适用于图片

我花了两周时间来解决这个问题，希望这个论坛会帮助我

提前多多感谢

Answer 1

你可以在你的mousedown事件处理程序中进行微调：

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

    e.preventDefault();

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

});

preventDefault()调用会阻止浏览器尝试本机移动图像并让您的脚本接管。

修改

要在IE中使用此功能，您还必须向mousemove事件处理程序添加preventDefault（）调用：

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

Answer 2

尝试使用classNames over id。

此外，在对目标元素进行10次mousedowns之后，该元素将有20个侦听器在拖动时全部触发，因为您从不在mouseup上删除侦听器。

Answer 3

<!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>

我的jQuery脚本不使用图像，但使用所有其他元素

3 个答案: