Question

我使用jquery开发了一个带有图像的可拖动div。该脚本在Firefox，Chrome中完美运行，但不是IE6。你能不能帮我解决这个问题

点击此处查看网页：my web page

非常感谢您的考虑。

Answer 1

IE使用clientX和clientY而不是pageX和pageY。有些人通过执行以下操作来解决此问题：

//if IE, then:
if (e.srcElement) {
    e.pageX = oEvent.clientX + document.body.scrollLeft;
    e.pageY = oEvent.clientY + document.body.scrollTop;
}

//rest of event handler goes here

Answer 2

我可能不会自己编写代码。 jQuery UI提供了一个应该工作的$(...).draggable()方法，并且经过跨浏览器测试。您甚至可以自定义构建一个只包含所需组件的jQuery UI下载。

http://jqueryui.com/demos/draggable/

http://jqueryui.com/download

Answer 3

除非您希望很多访问者使用它，否则请放弃IE6支持。保持站点IE6兼容会增加代码冗余或降低质量。

Answer 4

由于您已经在使用jQuery，为什么不使用jQuery UI的可拖动组件？这样，您就不必处理所有鼠标按下计算。我将您网站的代码切换为使用jQuery UI的可拖动功能，而且速度非常快，并且需要的代码少得多。

这是我使用的代码：

<!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 type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script language="javascript"> 
    $(document).ready(function() {
        $("#dv").draggable({
            cursor: 'crosshair'
        });
    });
</script>
</head>
<body>

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


</div>
</body>

</html>

希望这会有所帮助!!

javascript（jQuery）无法在IE6中运行

4 个答案: