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

【问题标题】：How to access the index position i in the drag stop handler of snapsvg如何在 snapsvg 的拖动停止处理程序中访问索引位置 i
【发布时间】：2018-06-01 19:46:15
【问题描述】：

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

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

g1 和 var g2 是两个组。 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

谢谢

【问题讨论】：

始终在问题中添加代码的相关部分并添加外部链接仅供参考。

标签： javascript jquery svg snap.svg

【解决方案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);
};

【讨论】：

非常感谢，维平。很有用

【解决方案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)
};

【讨论】：