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

Question

我正在使用snapSVG的group方法对一些元素进行分组，将它们推送到一个数组，并通过循环遍历每个元素在数组元素上应用drag方法。

你能帮我看一下拖动停止处理程序中拖动元素（qazxsw poi）的索引位置吗？

g1和var g2是两组。 groups是包含两个组的数组。

HTML

grps[i]

JavaScript的

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

JsBin链接：

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

谢谢

Answer 1

您可以使用http://jsbin.com/tonazosicu/10/edit?js预设一些参数，如下所示

Function.prototype.bind()

然后在

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

你可以像下面这样访问它们。

drag_stop

Answer 2

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

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

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

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