javascript - 我的 jQuery 脚本不处理图像，但处理所有其他元素

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