HTML5 DnD，事件处理程序和类索引

Question

有没有办法从该处理程序中获取触发“dragstart”事件处理程序的类元素的节点列表索引偏移量？我需要这些信息，以便我可以使用该索引设置数据传输对象，以便稍后在'dragend'事件处理程序中使用。

<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

这是你需要什么？