CODEWITHSUNDEEP
javascriptajaxdraggable
Robert Dam
Robert Dam

Reputation: 309

New dynamic created div is not becoming draggable

I am creating new div's in seating chart, but the will not become draggable after they have been inserted.

Maybe someone can shine a light on it and make my new dynamically created div draggable.

$(document).ready(function() {

$("#addSeat").bind("click", function(e){

    $.getJSON("getrecord.php?format=raw&ticketid=1",

    function(data){

        $(".seat-element").clone(true).removeAttr("id").attr("id", data.id).appendTo("#glassbox").html(data.seatid).css({ "top": "10px", "left": "10px"});      

    });
});

}); 

Thanks Christopher, can you tell me how to do this?

This is my draggable code:

 $(document).ready(function () {
    $(".seat-element").draggable({ 
            containment: '#glassbox', 
            scroll: false
     }).mousemove(function(){
                    var coord = $(this).position();
                    $("p:last").text( "left: " + coord.left + ", top: " + coord.top );
     }).mouseup(function(){ 
        var coords=[];
        var currentId = $(this).attr('id');
        //alert(currentId);
        var coord = $(this).position();
        var item={ coordTop:  coord.left, coordLeft: coord.top, coordId: currentId };
        coords.push(item);
        var order = { coords: coords };
        $.post('updatecoords.php', 'data='+$.toJSON(order), function(response){
        if(response == "success")
            $("#respond").html('<div class="success"style="text-align:center;">Seat Position has been saved to the database.</div>').hide().fadeIn(1000);
            setTimeout(function(){ $('#respond').fadeOut(2000); }, 2000);
        }); 
    });
});

Upvotes: 1

Views: 323

Answers (1)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

The critical part here is not the part that you've included in your question, but the part just above that code, on the page you've referenced - namely the part where you initialize the draggable plugin.

When called on DOM-ready, the draggable plugin is only applied to the elements that are in the DOM at that point. Any element not in the DOM, but added later on, will not automatically become draggable just because they are of the same "type". To fix this, you will have to initialize the draggable-plugin on the elements as you add them.

Update:

I haven't tried this, but I guess you could restructure your code something like this:

$(document).ready(function () {
    makeDraggable($(".seat-element"));
});

function makeDraggable (jQueryElm) {
    jQueryElm.draggable({ 
            containment: '#glassbox', 
            scroll: false
     }).mousemove(function(){
                    var coord = $(this).position();
                    $("p:last").text( "left: " + coord.left + ", top: " + coord.top );
     }).mouseup(function(){ 
        var coords=[];
        var currentId = $(this).attr('id');
        //alert(currentId);
        var coord = $(this).position();
        var item={ coordTop:  coord.left, coordLeft: coord.top, coordId: currentId };
        coords.push(item);
        var order = { coords: coords };
        $.post('updatecoords.php', 'data='+$.toJSON(order), function(response){
        if(response == "success")
            $("#respond").html('<div class="success"style="text-align:center;">Seat Position has been saved to the database.</div>').hide().fadeIn(1000);
            setTimeout(function(){ $('#respond').fadeOut(2000); }, 2000);
        }); 
    });
}

Then when you add the new element, you could just pass that element to the makeDraggable function as well:

// Keep the newly added element in a variable
var elm = $(".seat-element").clone(true).removeAttr("id").attr("id", data.id).appendTo("#glassbox").html(data.seatid).css({ "top": "10px", "left": "10px"}); 
// Pass the element to makeDraggable
makeDraggable(elm);

Upvotes: 1

Related Questions