1

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

1 回答 1

1

这里的关键部分不是您在问题中包含的部分，而是该代码上方的部分，在您引用的页面上 - 即您初始化可拖动插件的部分。

当在 DOM-ready 上调用时，可拖动插件仅适用于此时 DOM 中的元素。任何不在 DOM 中但后来添加的元素都不会因为它们具有相同的“类型”而自动变为可拖动的。要解决此问题，您必须在添加元素时初始化元素上的可拖动插件。

更新：

我还没有尝试过，但我想你可以像这样重组你的代码：

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

然后，当您添加新元素时，您也可以将该元素传递给 makeDraggable 函数：

// 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);
于 2012-11-07T12:47:39.557 回答