Question

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

你能否帮我看一下拖拽停靠处理程序中拖动元素（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链接：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

2 个答案: