_{Snap.svg demo之}Element.drag()

Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])

元素拖拽事件。

参数

• onmove 函数。移动中的事件句柄。
• onstart 函数。拖拽开始时的事件句柄。
• onend 函数。拖拽结束时的事件句柄。
• mcontext 对象。移动事件上下文。
• scontext 对象。拖拽开始事件的上下文。
• econtext 对象。拖拽结束事件的上下文。

另外，以下drag事件被触发：开始时的drag.start.<id>, 结束时的drag.end.<id>以及每次移动的drag.move.<id>. 当元素拖动经过另外一个元素的时候，drag.over.<id>也会触发。//zxx: 这个大家其实可以不要关心，此段直接取自代码注释。我发现这玩意没法使用。

开始事件和句柄调用特定的上下文，或者元素自身带有如下参数的上下文：

• x 数值。鼠标x位置。
• y 数值。鼠标y位置。
• event 对象。DOM事件对象。

移动事件和句柄调用特定的上下文，或者元素自身带有如下参数的上下文：

• dx 数值。距离鼠标开始点的x偏移。
• dx 数值。距离鼠标开始点的y偏移。
• x 数值。鼠标x位置。
• y 数值。鼠标y位置。
• event 对象。DOM事件对象。

结束事件和句柄调用特定的上下文，或者元素自身带有如下参数的上下文：

• event 对象。DOM事件对象。

一般而言，onmove等方法不需要设置。也就是直接drag()实现拖拽效果。因为onmove等方法表示自定义而不是回调。

返回值

元素。元素自身。

使用

<svg id="svg" width="100" height="100"></svg>

var svg = Snap("#svg");
var c1 = svg.paper.circle(50, 50, 40).drag();

效果

点击下面的圈圈显示存储的内容：