SVG 要素をドラッグで動かす

SVG 要素（ rect 要素）をマウスのドラッグで動かせるようにしました。mouseup、mousemove 時のイベントハンドラは document 要素に設定しました。

mousedown 時のイベントハンドラは、ソースの draggable 関数を使って svg 要素に設定します。そのとき、element.preventDefault(); でイベントを上流に送らないようにするのがミソです。これがないとデフォールトのマウスドラッグ時にゴーストが現れて、マウスに対する反応がおかしくなります。

上の rect 要素をドラッグしてみてください。ソースは各ブラウザの開発ツールで見ることができます。