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);
    }
);
*/

拖动下面的圈圈: