Draggable div issue in IE7

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"&gt;
<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"&gt;
<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>

ansaurus

tags:

views:

answers:

Draggable div issue in IE7

related questions