Question

此示例使用mootools，但我看到了与scriptaculous相同的行为。

我有一个包含一些内容的div，在这种情况下是一个X，内容周围有很多空白区域。我使div可拖动，但我发现在IE中拖动div是很困难的。在IE中我需要直接点击并拖动div的内容，即单个X.如果我点击div，但是远离X，div就在那里。

它在FF，Chrome和Safari中的表现与预期相同。

这是一个使用mootools的完整工作示例。您必须更新脚本标记以反映您为mootools库命名的内容。（在编辑时我也添加了一个scriptaculous示例）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Mootools problem</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<style type="text/css">
#my-drag{
  width: 100px;
  height: 100px;
  border: solid 1px black;
}
#my-drag p{
  text-align: center;
}
</style>
<script type="text/javascript">
function start() {
  var e = $('my-drag');
  e.makeDraggable();
}
</script>       
</head>
<body onload="start();">
<div id="my-drag">
  <p>X</p>
</div>
</body>  
</html>

这是使用原型scriptaculous的相同示例 - 同样的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>IE Drag problem</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<style type="text/css">
#my-drag{
  width: 100px;
  height: 100px;
  border: solid 1px black;
}
#my-drag p{
  text-align: center;
}
</style>
<script type="text/javascript">
    function start() {
        new Draggable('my-drag', { starteffect: null, endeffect: null }); ;
    }
</script>       
</head>
<body onload="start();">
<div id="my-drag">
  <p>X</p>
</div>
</body>  
</html>

Answer 1

使用最新版本的原型（1.6.0.3）和scriptaculous（1.8.2）可以正常使用。要使用mootools进行修复，请尝试将position:relative添加到#my-drag。

IE7中的可拖动div问题

1 个答案: