Droppable area is based on the pointer location instead of the dragged item

Droppable area is based on the pointer location instead of the dragged item


Hi,
I have an issue in IE 6 where a droppable event fires when the
draggable doesn't actually get dropped on the droppable. The draggable
is kept on a "X" axis and cannot be dragged on the droppable, yet when
the draggable is dropped, if the pointer is within the droppable area,
the drop event is triggered. I've created an example
<!doctype html>
<html>
<head>
<title> testing drag </title>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></
script>
<script src="/js/jquery-ui-1.7.custom.min.js" type="text/
javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.drag').draggable({
axis : 'x'
});
$('#drop').droppable({
accept : '.drag',
drop : function () {
alert('dropped on #drop');
}
});
});
</script>
<style type="text/css">
.container {
margin: 10px 0;
}
.drag {
border: 1px solid #ddd;
background: lightblue;
}
#drop {
background: #eee;
border: 1px solid #ccc;
height: 120px;
width: 400px;
}
</style>
</head>
<body>
<div class="container">
<span class="drag">drag</span>
</div>
<div id="drop">
</div>
</body>
</html>
This happens in firefox as well as IE 6, where I found the issue. I
haven't had a chance to try and come up with a patch as I wanted to
see what the list thought first.
Thanks!
Eric Larson