0

AJAXを使用してキャンバスの周りにデータベースからロードされたSVG要素(Raphaelを使用)を「ドラッグ」できるようにしようとしています。それらをDBから読み込んで表示することはできますが、個々のイベントハンドラーにイベントハンドラーを追加したい場合、正しく取得できないようです。

DOM の準備ができたら、DB からすべての要素をロードした後、.on() を使用してみました。

$('circle').on("mousedown", function(event) {
        ox = event.screenX;
        oy = event.screenY;
        event.target.attr({opacity: .5});
        dragging = true;
    });

しかし、これは決して呼び出されないようです。

円の作成中にイベントを追加できますが、最後に追加された要素のみが実際に移動しますが、マウスが他のロードされた円の X、Y 内にある場合のみです。

var data = $.ajax({
    type: "POST",
    url: "map.php",
    data: "loadMap=1",
    success: function(text) {
        var item = text.split(";");
        for (x in item)
        {
            if (item[x].length > 0)
            {
                var str = item[x].split(",");
                if (str[0] == "node")
                {
                    var c = svg.circle(str[1], str[2], 10);
                    c.attr("id", str[3]);
                    c.attr("fill", "black");
                    c.attr("stroke", "none");

                    c.mousedown(function(event) {
                        ox = event.screenX;
                        oy = event.screenY;
                        c.attr({opacity: .5});
                        dragging = true;
                    });

                    c.mousemove(function(event) {
                    if (dragging) {
                        c.translate(event.screenX - ox, event.screenY - oy);
                        ox = event.screenX;
                        oy = event.screenY;
                        }
                    });

                    c.mouseup(function(Event) {
                        dragging = false;
                        c.attr({opacity: 1});
                    });

                }
                else if (str[0] == "room")
                {
                }
            }
        }
    }
});

私は何を間違っていますか、またはさらに良いことに、この問題に取り組む最善の方法は何ですか?

4

2 に答える 2

2

円の数によっては、それぞれにイベント リスナーを追加するのは得策ではないかもしれません。より堅牢な解決策は、イベントを svg 要素に追加することです

$("#svgelement").on("mousedown", "circle", function(event){
        target = this;
        ox = event.screenX;
        oy = event.screenY;
        target.setAttribute('opacity', 0.5)
        dragging = true;
});

$("#svgelement").on("mousemove", function(event){
  if (dragging) {
      if(target) target.setAttribute('transform', 'translate('+ event.screenX - ox +','+  event.screenY - oy +')');
      ox = event.screenX;
      oy = event.screenY;
  }
});

//attached to the window, otherwise you might drag
//all the way out of the svg and release there.
$(window).on("mouseup", function(Event) {
   dragging = false;
   target.setAttribute('opacity', 1)
   target = false;
});

もう 1 つの利点は、ajax の成功時にこれをコールバックとしてロードする必要がないため、同期の問題を破棄できることです。

于 2012-07-31T06:04:28.820 に答える
1

cエラーは、サークルにアタッチしているマウスイベントハンドラーの内部から参照している可能性があると思います。

次に、各イベントハンドラーは、c参照するオブジェクト、つまり最後のオブジェクトを参照します。ターゲットメンバーをevent持っているので、代わりにそれを使用する必要があります。

私はjQuerySVGを使用しており、使用しているイベントのメンバーはcurrentTargetです。利用できるかどうかを確認してください（そう思います）

于 2012-07-31T05:56:23.783 に答える