problem with Drag & Drop and Dialog
I am trying to drag a div, and drop it onto a div within a Dialog.
It works fine when the div is not within the Dialog, but not when it's
surrounded by the Dialog.
I am brand new to jQuery, and have searched for a solution but can not
find one.
Here is my simple test code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link type="text/css" href="js/theme/ui.all.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-
personalized-1.6rc6.js"></script>
<script type="text/javascript">
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: true,
width: 400,
height: 500,
position: [20, 200]
});
$('#dragme').draggable({
revert: true,
zIndex: 9999
});
$('.droponme').droppable({
accept: "#dragme",
hoverClass: "drop-active",
drop:function(ev,ui){
alert("DROPPED");
}
});
});
</script>
<style>
.drop-active { border: solid 3px red }
</style>
</head>
<body>
<div id="dragme">HI</div>
<div class="droponme">PLACE HERE WORKS</div>
<div id="dialog">
<div class="droponme">PLACE HERE DOES NOT WORK</div>
</div>
</body>
</html>