Javascript – jQuery UI droppable Not Working

csshtmljavascriptjquery

I am trying to make a form building tool. Everything was working just fine. I was able to drag my first icon and drop it on the main form body, just fine. When I do this, it appends a new div of class panel. I make panel droppable as well, however when I try to drop something on it nothing happens. If I hard code the div in it works fine, however when I append the div it does not. I'm having a lot of trouble figuring this out.

Here's my code:

<html>
<head>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>

<style type="text/css">
    #toolbox
    {
        width: 100%;
        height: 200px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #666666;
        z-index: 2;
    }
    .icon
    {
        padding-top: 20px;
        padding-left: 20px;
        text-align: center;
        display: table-cell;
    }
    #formbuilder
    {
        width: 100%;
        position: absolute;
        top: 200px;
        left: 0px;
        bottom: 0px;
        padding-top: 5%;
        background-color: orange;
        opacity: 0.4;
        overflow: visible;
    }
    .panel
    {
        margin: 0 auto;
        margin-bottom: 20px;
        height: 150px;
        width: 150px;
        background-color: blue;
        opacity: 0.4;
    }
</style>

</head>

<body>

    <script type="text/javascript">
        function formDropHandler(event, ui)
        {
            if(ui.draggable.hasClass("pan"))
            {
                var form = $("#formbuilder");
                form.append('<div class="panel ui-droppable"></div>');

                $(".panel").droppable({
                    drop: panelDropHandler
                });
            }
        }

        function panelDropHandler(event, ui)
        {
            if(ui.draggable.hasClass("tab")) alert("TRUE");
        }

        $(document).ready(function() {
            var icons = $('.icon');

            $('.icon').draggable({
                cursor: 'move',
                helper: 'clone',
                revert: true
            });

            $("#formbuilder").droppable({
                drop: formDropHandler
            });

            $(".panel").live('mouseover',function(){
                $(".panel").droppable({
                    drop: panelDropHandler
                });
            });
        });
    </script>

    <div id="toolbox">
        <div class="icon pan">Panel<br /><img src="panel.png" alt="PANEL.PNG" /></div>
        <div class="icon tab">Table<br /><img src="table.png" alt="TABLE.PNG" /></div>
    </div>

    <div id="formbuilder">
        <div class="panel"></div>
        <div class="panel"></div>
    </div>

</body>

</html>

Best Answer

Try this. Both drops are working now. The panel drops on the form builder and the table drops on the panels, (even the newly created ones). Just remember that the formbuilder is only the area that is colored in under the toolbar section. So the further you go down you won't be able to drop anything unless you scroll back up. But that's just a simple matter of CSS, change the position:absolute to position:relative and it should grow with the panels.

function formDropHandler(event, ui) {
    if (ui.draggable.hasClass("pan")) {
        var form = $("#formbuilder");
        form.append('<div class="panel ui-droppable"></div>');
    } else if (ui.draggable.hasClass("tab")){
       alert("TRUE");
    }
}

$(document).ready(function() {
    var icons = $('.icon');

    $('.icon').draggable({
        cursor: 'move',
        helper: 'clone',
        revert: true
    });

    $("#formbuilder").live('mouseover', function() {
        $("#formbuilder").droppable({
            drop: formDropHandler
        });
    });
    $(".panel").live('mouseover', function() {
        $(".panel").droppable({
            drop: formDropHandler
        });
    });
});
Related Topic