javascript - 新动态创建的 div 无法拖动

Question

我正在座位表中创建新的 div，但插入后将无法拖动。

也许有人可以照亮它并使我的新动态创建的 div 可拖动。

$(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? 

这是我的可拖动代码:

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

Answer 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);