如何访问 snapsvg 的拖动停止处理程序中的索引位置 i

Question

我正在使用 snapSVG 的组方法对一些元素进行分组，将它们推送到一个数组，然后通过遍历每个元素对数组元素应用拖动方法。

能否请您帮助我访问拖动停止处理程序中拖动元素 (grps[i]) 的索引位置。

g1 和 var g2 是两个 gropus。 grps 是包含这两个组的数组。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</head>

JavaScript

var s = Snap(800, 600);
var grps = [];
var objects = [];
var red = s.rect(50, 50, 200, 200).attr({
  fill: "red"
});
var green = s.rect(60, 60, 100, 100).attr({
  fill: "green"
});
var g1 = s.group(red, green);
grps.push(g1);

var red = s.rect(300, 50, 200, 200).attr({
  fill: "red"
});
var green = s.rect(310, 60, 100, 100).attr({
  fill: "green"
});
var g2 = s.group(red, green);

grps.push(g1, g2);

var drag_move = function(dx, dy) {
  this.attr({
    transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
  });
};

var drag_start = function() {
  this.data('origTransform', this.transform().local);
};

var drag_stop = function(i) {
  console.log("finished dragging");
  console.log(i);
};

for (i = 0; i < grps.length; i++) {
  grps[i].drag(drag_move, drag_start, drag_stop);
}

JsBin Link: http://jsbin.com/tonazosicu/10/edit?js

谢谢

Answer 1

您可以使用Function.prototype.bind()预设一些参数，如下所示

for (i = 0; i < grps.length; i++) {
  grps[i].drag(drag_move, drag_start, drag_stop.bind(null, i));
}

然后在 drag_stop 您可以像下面那样访问它们。

var drag_stop = function(index, event) {
  console.log("finished dragging");
  console.log(index);
  console.log(event);
};

Answer 2

一个人可以实现同样的事情（我认为在最新版本的 Snap 中）...

grps.ForEach( function( el, i ) { 
    el.drag(drag_move, drag_start, drag_stop.bind(null, i))
};

但最终你不需要使用 i，如果你在大多数情况下只在处理程序中使用 'this'，并且可以简单地做....

grps.ForEach( function( el ) { 
    el.drag(drag_move, drag_start, drag_stop)
};

如何访问 snapsvg 的拖动停止处理程序中的索引位置 i

How to access the index position i in the drag stop handler of snapsvg

javascript

jquery

svg

snap.svg