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
也会触发。
开始事件和句柄调用特定的上下文,或者元素自身带有如下参数的上下文:
x
数值。鼠标x位置。y
数值。鼠标y位置。event
对象。DOM事件对象。
移动事件和句柄调用特定的上下文,或者元素自身带有如下参数的上下文:
dx
数值。距离鼠标开始点的x偏移。dy
数值。距离鼠标开始点的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);
c1.drag();
/* 自定义拖拽事件
var l;
c1.drag(function(dx,dy,x,y,event){
//onMove
console.log('onMove');
console.log(dx,dy,x,y,event);
this.attr({
transform: l + (l ? "T" : "t") + [dx, dy]
});
}
,function(x,y,event){
//onStart
l = this.transform().local;
console.log('onStart');
console.log(x,y,event);
}
,function(event){
//onEnd
console.log('onEnd');
console.log(event);
}
);
*/
拖动下面的圈圈: