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 対応で呼び出されると、ドラッグ可能なプラグインは、その時点で 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 に答える