JQuery-ui：元素失去了“可拖动性”

Question

我正在开发一种基于Web的地图编辑器，并且正在使用JQuery和JQuery-ui。 我主要使用后者来使对象可拖动。 当用户单击按钮时，将创建对象并将其插入页面的默认位置。 创建对象时，我使其可拖动。

发生的事情是，如果我创建两个或多个重叠的对象，则只能拖动顶部的对象，其他对象将失去其可拖动性。 如果我添加了这些对象并将它们移动到某个位置，并且使它们重叠，就没有问题了，我仍然可以将它们拖到想要的位置。 仅当对象在创建时重叠时，问题才会发生。

这是我写的代码。

<html>
    <head>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.24.custom.min.js"></script>

<script type="text/javascript"> 
     var lastNodeId;

     $(function() {
         lastNodeId = 0;
         $("#nodeButton").click( addNode ); 
     });


    function addNode() {
        var id = "node" + lastNodeId;

        $("#drawArea").append("<div id=\"" + id + "\" class='node'></div>");

        var jg = new jsGraphics(id);
        jg.setColor("#000000"); 
        jg.drawImage("pc_icon.png", 50, 50, 50, 50);
        jg.paint();

        var idImg = "img" + lastNodeId;
        $("#" + id + " img").attr("id", idImg);

        lastNodeId++;
        $("#" + idImg).draggable();

}

</script>
</head>

<body>
    <button type="button" id="nodeButton">Aggiungi Nodo</button>
    <div id="drawArea"> </div>
</body>
</html>

我使用JSGraphics只是在页面上绘制图标，可以在http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm上找到它。 我真的希望有人能帮助我了解发生了什么以及我做错了什么！ :)

更新资料

我尝试将下一个对象添加到其他位置。 我发现，如果到先前添加的对象的距离至少为17px，则最下面的对象不会失去其可拖动性。 无论我是否修改x或y参数，它都必须至少相距17px。

Answer 1

尝试替换以下代码：

$("#" + id + " img").attr("id", idImg);

lastNodeId++;
$("#" + idImg).draggable();

为此：

$("#" + id + " img").attr("id", idImg).draggable();
lastNodeId++;

由于它可能是新的id集，因此没有为dom更新，jQuery很快就抓住了它。

更新 ：
如果您这样做：

lastNodeId++;
console.log('im len: '+$("#" + idImg).length);
$("#" + idImg).draggable();

它在控制台中显示什么？ 可能是尚未创建图像，请参阅jqGraphics是否具有创建图像时的回调。