IE7 中的可拖动 div 问题

发布于 2024-08-02 03:57:56 字数 2238 浏览 4 评论 0原文

此示例使用 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>

原文

This example uses mootools but I see the same behavior with scriptaculous.

I have a div with some content, in this case a single X and there's plenty of white space around the content. I make the div draggable but I find it's difficult to drag the div in IE. In IE I need to click and drag directly on the content of the div, the single X. If I click in the div, but away from the X, the div just sits there.

It behaves as expected in FF, Chrome and Safari.

Here is a complete working example with mootools. You'll have to update the script tags to reflect what you named your mootools libraries. (on edit I added a scriptaculous example as well)

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

Here's the same example using prototype scriptaculous - same issue

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

分享到QQ

分享到微博