CODEWITHSUNDEEP
javascriptjqueryhtmlcss
robins35
robins35

Reputation: 681

jQuery UI droppable Not Working

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>

Upvotes: 4

Views: 5398

Answers (2)

john
john

Reputation: 1354

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
        });
    });
});

Upvotes: 1

Sinetheta
Sinetheta

Reputation: 9449

Only those elements which are existing when you called .droppable() were made "dropables". Since you ran it once, at doc ready, then never again, any elements which are added to the page after-the-fact are just run-of-the-mill elements.

You will need to initialise each new addition. You can do this quickly by turning around your append statement.

var form = $("#formbuilder");
$('<div class="panel ui-droppable"></div>')
    .appendTo(form)
    .droppable({drop:panelDropHandler});

Upvotes: 1

Related Questions