CODEWITHSUNDEEP
javascriptjqueryjquery-ui
JackBurton
JackBurton

Reputation: 191

Simple jQuery droppable not working

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>

Upvotes: 4

Views: 9066

Answers (3)

PeterM
PeterM

Reputation: 1532

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.net/org1b75t/2/

Upvotes: 5

Matt Healy
Matt Healy

Reputation: 18531

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.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">DROP HERE</div>



        </body>
        </html>

Upvotes: 0

James Montagne
James Montagne

Reputation: 78760

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.

Upvotes: 9

Related Questions