HTML5 DnD, event handlers and class indexes - html

Question

Is there anyway to obtain the node list index offset, of a class element, that triggered a 'dragstart' event handler, from within that handler? I require this information so that I may set a data transfer object with that index for use later in a 'dragend' event handler.
<div id="div1">
<div draggable="true" class="thetiles">goo</div>
<div draggable="true" class="thetiles">hoo</div>
<div draggable="true" class="thetiles">zoo</div>
</div>
function registerSource() {
var matches = document.querySelectorAll('div.thetiles');
for (var i = 0; i < matches.length; i++) {
matches[i].addEventListener('dragstart', handleDragStart, false);
}
}
function handleDragStart(e) {
this.style.opacity = '0.3';
e.dataTransfer.effectAllowed = 'move';
/* need to get index of the class element that triggered this
for the following data transfer object set */
e.dataTransfer.setData('text/html', ????);
}

Answer 1

function registerSource() {
var matches = document.querySelectorAll('div.thetiles');
for (var i = 0; i < matches.length; i++) {
matches[i].addEventListener('dragstart', handleDragStart, false);
matches[i].addEventListener('dragstart', handleDragEnd, false);
}
}
var index
function handleDragStart(e) {
this.style.opacity = '0.3';
// Here is your index
index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target)
e.dataTransfer.effectAllowed = 'move';
//e.dataTransfer.setData('text/html', ????);
}
function handleDragEnd(e) {
e.target.style.opacity = "";
console.log(index) // Quick confirmation
}
registerSource()
jsfiddle
Is this what you need?