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

<强>更新

我没试过这个，但我想你可以重构一下这样的代码：

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

新动态创建的div不会变得可拖动

1 个答案: