操作动态创建的 SVG 元素

Question

我试图能够使用 AJAX 从数据库中“拖动”从数据库加载的 SVG 元素（使用 Raphael）。我可以很好地加载它们并从数据库中显示它们，但是当我想为每个单独的事件处理程序添加事件处理程序时，我似乎无法正确处理。

当 DOM 准备好时，我尝试在从数据库加载所有元素后使用 .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")
                {
                }
            }
        }
    }
});

我做错了什么，或者更好的是，解决这个问题的最佳方法是什么？

Answer 1

根据圆圈的数量，为每个圆圈添加事件侦听器可能不是一个好主意。更强大的解决方案是将事件添加到 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;
});

另一个好处是您不需要在 ajax 成功时将其加载为回调，因此您可以丢弃同步问题。

Answer 2

我认为错误可能是您从要附加到圆圈的鼠标事件处理程序中引用 c。

然后每个事件处理程序引用c所引用的对象，即最后一个对象。 event 带有一个 target 成员，您应该使用它。

我使用的是 jQuerySVG，我使用的 event 成员是 currentTarget，看看你是否可以使用（我想是的）