Question

I have a drag and drop code works perfectly on divs that have been created on the server side however when i create a div using jquery (dynamically) i cannot seem to drop anything into the container…

$('.dropcontent').droppable({
            accept: '.item',
            drop: function(ev, ui) {
               /* do something */
            }    
        });

        $(".item").draggable({  
           helper:'clone',
           appendTo: 'body',
           snap: true,
           revert: true

        });

    <div id="row1seo" class="dropcontent" > </div>   // original code on server side
    <div id="row1seo" class="dropcontent ui-droppable"> </div> // the above line becomes this on client side showing it has "binded" with the droppable
    <div id="row2seo" class="dropcontent"></div> // this the dynamically created div which doesn't seem to bind with the droppable. this is created in php file using ajax to retrieve it 

I have also tried

 $(".dropcontent").live('droppable', function() {
......
});

doesnt seem to work… any ideas how to fix this ?

thanks

Answer 1

You have to make the drag function live so it works on generated elements. Too bad jQuery’s live() function doesnt handle drags and drops, so you have to create one yourself. I use this function for example:

(function ($) {
    $.fn.liveDraggable = function (opts) {
        this.live("mouseover", function() {
            if (!$(this).data("init")) {
                $(this).data("init", true).draggable(opts);
            }
        });
        return $();
    };
}(jQuery));

Call it like this:

$( "element" ).liveDraggable()

You can easily make one for droppable too! GL!