我的 jQuery 脚本不能处理图像，而是处理所有其他元素答案

【问题标题】：my jQuery script is not working with images, but working with all other elements我的 jQuery 脚本不能处理图像，而是处理所有其他元素
【发布时间】：2010-08-21 02:05:33
【问题描述】：

我创建了一个 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，不适用于图片

我花了两个星期来解决这个问题，希望这个论坛能帮助我

提前非常感谢

【问题讨论】：

奇怪，这两个例子都在 Chrome 上运行得很好。（虽然 img 不会停止 onmouseup）
我也在 chrome 中尝试过，唯一的问题是浏览器在我拖动时试图选择图像。也许你可以让一个 div 可拖动并将图像作为背景应用到它上面？
顺便说一句，如果您正在寻找更多功能，例如，那里有类似这样的脚本，例如jQuery UI Draggable。我不主张为此包含另一个库，但如果它提供您所追求的其他功能，您可能需要考虑它。

标签： javascript jquery

【解决方案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')
})

【讨论】：

e.preventDefault(); IE下不行，有解决办法吗？
谢谢你的宠物，你做得很好，非常感谢，我努力了 2 周，再次感谢:) :) :)

【解决方案2】：

尝试使用类名而不是 id。

同样，在目标元素上鼠标按下 10 次后，该元素将在拖动时有 20 个监听器全部触发，因为您永远不会在鼠标上移时移除监听器。

【讨论】：

这是不正确的，鼠标处理程序附加在document.ready中，而不是在mousedown处理程序中，关闭代码/括号，我将格式化使其更清晰。跨度>
我的立场是正确的，我的建议 ;) 使用 id 而不是类名的 css 表达式但是将拖动脚本限制为一个实体。 Afaik，jQuery 仅根据标准返回最后找到的具有 id X 的元素。使用类名使其更加通用和可预测。

【解决方案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>

【讨论】：