附加了新的 div，但它们不可拖动？

Question

我是一个新手，在使新的 div 可拖动方面遇到一些问题。

示例是： http://jsbin.com/iyexi3/

问题是当我显示对话框时名称，我创建了一些 div，但它们不可拖动。

Answer 1

通过执行以下操作，您已经将一些元素硬编码在 HTML 可拖动中：

$('.seleccionable').draggable({
拖动：函数（e，ui）{
$('#status_nombre').html($(this).attr('id'));
$('#status_top').attr('value',$(this).css('top'));
$('#status_left').attr('value',$(this).css('left'));
}
，遏制：'#layout'
,refreshPositions: true
,snap: true
});

当您添加一个新元素时，您也需要为该元素调用 .draggable() 。

一种方法是将选择器/可拖动代码放入函数中，并在添加新元素后调用它。

Answer 2

问题是，当您将新元素附加到 DOM 时，它不会继承现有可拖动元素的事件处理程序。

您可能会运气好 liveQuery

这将允许您创建所有当前和未来的实时事件与选择器匹配的元素。它类似于内置的 live() 方法。我还没有使用过它，但它应该与可拖动一起使用。

Answer 3

最后找到解决方案是在附加新的 div 之后...

$('#nv_objeto').click(function(){   
    var nbr =prompt("Por favor escriba el nombre del Objeto:","");
    $("#layout").append("<div id='"+c_nbr(nbr)+"' class='seleccionable' style='top: 300px; left: 400px; width : 40px; height : 40px; background-color : black;  position :absolute;'></div>");
    $('#layout > div:last').blur().draggable({
                drag: function(e, ui) {
                    $('#status_nombre').html($(this).attr('id'));
                    $('#status_top').attr('value',$(this).css('top'));
                    $('#status_left').attr('value',$(this).css('left'));
        }
        ,containment: '#layout'
        ,refreshPositions: true
        ,snap: true
    });
});

感谢您的帮助。