拖错防暴组件

Question

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

<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;。它解决了这个问题。

拖错防暴组件

Dragging wrong riot component

svg

drag

riot.js