Home/ Questions/Q 7815213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T05:27:13+00:00

Draggable works here, but when I drag the DIV to the droppable area the

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0