I wonder if anyone else has come across this error with Drag/Drop:
It applies to IE6 (go figure), but not FF - I''ve only tried those 2
browsers though.
Basically, when a margin is applied to the parent DIV of your droppable DIV, the
hovering area is also shifted by that margin.
The key though, is that the parent DIV have relative positioning (if you change
it to absolute, it''ll be fine).
You can see what I mean with the following HTML - just place this file in with
your prototype/scriptaculous scripts:
-----------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="prototype.js"
type="text/javascript"></script>
<script src="scriptaculous.js"
type="text/javascript"></script>
<style type="text/css">
.drag { position: relative; background-color: #00FF00; width: 100px; height:
100px; }
.drop { position: relative; background-color: #0000FF; width: 200px; height:
200px; border: 5px solid #0000AA; }
.over { background-color: #0000AA; border: 5px solid #000000; }
</style>
</head>
<body>
<div style="position: relative; margin-left: 50px; background-color:
#CCCCCC;">
<div class="drag" id="drag">Drag this
DIV</div>
<br />
<div class="drop" id="drop">Drop Here</div>
</div>
<script language="javascript">
new Draggable(''drag'', {revert: true});
Droppables.add(''drop'',
{hoverclass:''over''});
</script>
</body>
</html>
-----------------------------------------
Anyone have any ideas?
Thanks.
--
___________________________________________________
Play 100s of games for FREE! http://games.mail.com/
