6

同じ紙の中に要素をドラッグアンドドロップすることができました。次に、ラファエル要素をある紙のコンテナから別のコンテナにドラッグアンドドロップできるようにする必要があります。次に例を示します。

最初のsvgから2番目のsvgにドラッグします

htmlの最初のsvg要素

<svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="260">
  <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x="10" y="15" width="64" height="64" r="5" rx="5" ry="5" fill="#ffc0cb" stroke="#000">
  </rect>
</svg>

HTMLの2番目のsvg要素

<svg style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" </svg>

まず第一に、それは可能ですか？可能であれば、それを行う方法の手がかりを教えてください。ありがとう！

4

1 に答える 1

0

数日後、単純な JavaScript と svg を使用して、「ドラッグ ドロップ」機能をユーザーに提供しました。パンやズームに関係なく、マウスポインターの正確な位置を決定する関数を提供しました。それを見て、それがあなたにとって役立つかどうかを確認してください。(rapheal でどのように機能するかはわかりません)

 var mainsvg = document.getElementsByTagName('svg')[0];
function mouseup(event) {
    var svgXY = getSvgCordinates(event);// get current x,y w.r.t to your   svg.
}
    function getSvgCordinates(event) {
                var m = mainsvg.getScreenCTM();
                var p = mainsvg.createSVGPoint();
                var x, y;

                x = event.pageX;
                y = event.pageY;

                p.x = x;
                p.y = y;
                p = p.matrixTransform(m.inverse());

                x = p.x;
                y = p.y;

                x = parseFloat(x.toFixed(3));
                y = parseFloat(y.toFixed(3));

                return {x: x, y: y};
            }
于 2015-04-12T08:41:01.453 に答える