Menu
Draggable works here, but when I drag the DIV to the droppable area the alert function isnt firing. I'm sure it's something stupid, but maybe someone here can stop me from banging my head on the wall, what am I not doing right?
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<script>
$(function() {
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function(event, ui) {
alert('dropped');
}
});
});
</script>
<div id=10 class="draggable">one</div>
<div id="trash" class="droppable"></div>
</body>
</html>
593
The issue is with the fact that by default the center of the element is used to determine where the element is dropped. Your div does not have a defined size so it is the width of the screen. If you manage to drop it so that the center of this element is in the droppable you will see the alert.
This fiddle with background colors illustrates the problem.
http://jsfiddle.net/v6PME/
And with a defined width you will see the functionality you were probably looking for:
http://jsfiddle.net/v6PME/1/
NOTE: I've made the assumption that you've left out your css and the #trash div has some size so that it can be dropped in at all.
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
