javascript - ラファエルのドラッグ アンド ドロップ

Question

問題があります:

path.drag(onmove, onstart, onend)

特に、次のような関数を定義しました。

function onmove(x,y)
{
   console.log(x,y);

}

私の問題は、x と y が私の論文に関連していないことです。どうすれば正しい座標を取得できますか? JQueryが使えません。

ありがとう

Answer 1

返される座標は、ウィンドウに関連している可能性があります。ただし、 http://www.quirksmode.org/js/findpos.htmlで説明されているような関数を使用して、document.body から論文のオフセットを計算できます 。

次に、移動中の座標を紙の座標と比較します。

ページでスクロールが許可されている場合は、それを考慮する必要があります。

Answer 2

このデモを見てください。

http://jsfiddle.net/CHUrB/

move = function (dx, dy) 
{
   // Move main element
   var att = this.type == "ellipse" ? {cx: this.ox + dx, cy: this.oy + dy} : 
                                               {x: this.ox + dx, y: this.oy + dy};
   this.attr(att);

   // Move paired element
   att = this.pair.type == "ellipse" ? {cx: this.pair.ox + dx, cy: this.pair.oy + dy} : 
                                               {x: this.pair.ox + dx, y: this.pair.oy + dy};
   this.pair.attr(att);   

   // more on the jsfiddle site
}