Question

Well,Hello folks I developed a page to create forms drag and drop, but I’m having trouble with the drop of internal elements, eg:

<div class="container">
   <div classs="row"> <! - I drop here -!> </ div>
   <- Content is dropped here! : '(-!>
</ div>

Here is my Javascript:

        $(document).ready(function(){

                $( "#a .row-element" ).draggable({ 
                    revert: "invalid",
                });

                $(  "#a .span2-element" ).draggable({ 
                    revert: "invalid",
                });

                $(".row").droppable({
                    accept: '.span2-element',
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    greedy: true,
                    drop: function(event, ui) {
                        $('<div class="span2"></div>"').appendTo(this);
                    },
                    activate: function(event, ui) {
                        $(ui.helper).draggable({ revert: "valid"});
                    }
                });

                $(".container").droppable({
                    accept: '.row-element , .span2-element',
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    greedy: true,
                    drop: function(event, ui) {
                        $('<div class="row"></div>"').appendTo(this);
                    },
                    activate: function(event, ui) {
                        $(ui.helper).draggable({ revert: "valid"});
                    }
                });
        });

It seems to me that the newly created element is not dropavel … :/

Any suggestions?! thank you in advance!

Answer 1

First of all, make sure your HTML code is :

<div class="container">
   <div class="row"></div>
</div>

Then, why do you have :

$('<div class="span2"></div>"').appendTo(this);

You should have :

 $('<div class="span2"></div>').appendTo(this);