Dynamically use the droppable function - jQuery UI

Question

I am trying to create a drag and drop of elements. I have a piece of html in the main section:

<div class="dashboard_container ui-droppable">
    <div class="ab-builder-el el-empty ui-droppable" ordering="-0.5">
         <p>Plaats hier je element</p>
    </div>
</div>

To drop and add a piece of html (generated by some variables with php) in between the div with id=div(number) I have the following JavaScript:

   //Draggable part
   $('.ab-nav-element').draggable({
            appendTo: '.scroll-container',
            revert: 'invalid',
            cursor: "move", 
            distance: 50,
            revertDuration: 250,
            helper: 'clone',
            start: function(){
                $('.el-empty').addClass('el-receptive');
                elementName = 'standard_columns';//$(this).attr('')
            },
            stop: function(){
                $('.el-receptive').removeClass('el-receptive');
            }
        });
//Droppable part
var dropContent = '<div id="div2" ordering="0"></div><div class="ab-builder-el el-empty ui-droppable" ordering="0.5"><p>Plaats hier je element</p></div>';
$('.el-empty').droppable({
        hoverClass : 'ui-hover',
        drop: function() {
            $('.el-empty').after(dropContent);
            $('#div2').load("builder-loader.php",
            {
            elementname: elementName,
            }
            );
        }});

As you can see I use an AJAX call to update the content of the div. Because I add content after, my new div's arent connected to the droppable event.

How am I able to bind the new div's to the droppable event?

The result is somewhat like this: http://jsfiddle.net/abayob/mws94soj/12/

Answer 1

I misunderstood how droppable works.

In this part: "$('.el-empty').droppable({" I initialize the droppable. The only thing I had to is create is a function that I call after the drop:

function dropreload () {$('.ab-builder-el').droppable({
hoverClass : 'ui-hover',
drop: function() {
    $('.el-empty').after(dropContent);
    var divId = 2;
    $('#div2').load("builder-loader.php",
    {
    elementname: elementName,
    divId:divId
    }
    );
dropreload();
}})};

Call the function in between the $(document).ready({}) to initialize the droppable event for the first time. The rest is done after the drops.

I guess it was a long day :)

Answer 2

Break your code out into functions:

var make_droppable = function($elements) {
    $elements.droppable({
        hoverClass : 'ui-hover',
        drop: drop_function
    });
}

var drop_function = function() {

   var dropContent = '<div id="div2" ordering="0"></div><div class="ab-   builder-el el-empty ui-droppable" ordering="0.5"><p>Plaats hier je element</p></div>';

   $('.el-empty').after(dropContent);
            $('#div2').load("builder-loader.php",
            {
            elementname: elementName,
            }
            );
   // rebind new elements
   make_droppable($('.el-empty'));
}

// call this for the first time.
make_droppable($('.el-empty'));