Question

我正在创建一个可拖动的基于暴乱的SVG元素。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g name="green" data-is="r-rect" x="30" y="230" width="256" height="64" rx="5" ry="5" draggable="true" fill="green"></g>
  <g name="blue" data-is="r-rect" x="10" y="110" width="256" height="64" rx="5" ry="5" draggable="true" fill="blue"></g>
</svg>

R-rect.tag

<r-rect>
        <rect ref="rect" onmousedown={hold}   />

        <script>
            tag = this;
    tag.hold = hold;
    tag.x= Number.parseInt(opts.x);
    tag.y= Number.parseInt(opts.y);
    tag._name= opts.name;

    tag.on("mount", function(e) {
        tag.refs.rect.setAttribute("x", opts.x);
      tag.refs.rect.setAttribute("y", opts.y);
      tag.refs.rect.setAttribute("width", opts.width);
      tag.refs.rect.setAttribute("height", opts.height);
      opts.rx && (tag.refs.rect.setAttribute("rx", opts.rx) );
      opts.ry && (tag.refs.rect.setAttribute("ry", opts.ry) );
    })

    function hold(e){
        console.log(tag._name)
    }
  </script>
</r-rect>

我添加了2个r-rect标签。尝试拖动蓝色矩形。但是绿色矩形的mousedown事件始终会触发。

http://jsfiddle.net/1k2gacy1/1/

Answer 1

我发现了这个问题。之所以发生这种情况，是因为我在全局变量中分配了标记实例。所以我已将此行tag = this;更改为var tag = this;。它解决了这个问题。

拖动错误的暴动组件

1 个答案: