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

Question

I'm grouping a few elements using snapSVG's group method, pushing them to an array and applying the drag method on the array elements by looping through each element.

Could you please help me in accessing the index postion of the dragged element (grps[i]) in the drag stop handler.

g1 and var g2 are the two gropus. grps is the array that holds the two groups.

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

Thanks

Answer 1

You can using Function.prototype.bind() to preset some parameters like below

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

Then on drag_stop you can access them like below.

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