0

私は一種の 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 パラメーターを変更しても、少なくとも 17 ピクセル離れている必要があります。

4

1 に答える 1

1

次のコードを置き換えてみてください。

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

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

これについて：

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

idjQueryがそれを取得するほど迅速にdomの新しいセットが更新されない可能性があるためです。

更新：
そうする場合：

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

コンソールに何を出力しますか? 画像がまだ作成されていない可能性があります。画像が作成されたときのコールバックが jqGraphics にあるかどうかを確認してください。

于 2012-10-25T10:59:39.860 に答える