0

我正在开发一种基于网络的地图编辑器，我正在使用 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 的距离。

4

1 回答 1

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 是否具有创建图像时的回调。

于 2012-10-25T10:59:39.860 回答