Question

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

如果我创建2个或更多重叠的对象，我只能拖动顶部的对象，其他对象会失去可拖动性。如果我添加这些对象并将它们移动到某个地方并且在我重叠之后没有任何问题，我仍然可以将它们拖动到我想要的地方。只有当对象在创建时重叠时才会出现问题。

这是我写的代码。

<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 set没有为dom更新，所以jQuery抓住它。

<强>更新：
如果你这样做：

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

它在控制台中打印了什么？可能是图像尚未创建，请查看jqGraphics是否有创建图像的回调。

JQuery-ui：元素失去了“draggability”

1 个答案: