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=".6.4/jquery.min.js" type="text/javascript"></script>
<script src=".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>
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./ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis./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>
3 Answers
Reset to default 9The 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/v6PME/
And with a defined width you will see the functionality you were probably looking for:
http://jsfiddle/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.
James Montagne answer is right. Especially the reason why it's not working (thanks!).
However better solution in my opinion is to increase drop precition by setting tolerance of droppable to pointer.
http://jsfiddle/org1b75t/2/
It seems to be failing because your droppable div doesn't appear to have any width, so its impossible for you to drop anything there. I took your example and modified it slightly and I was able to get it working:
<html>
<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis./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">DROP HERE</div>
</body>
</html>