HTML5 DnD、事件处理程序和 class 索引

Question

是否可以从该处理程序中获取触发 'dragstart' 事件处理程序的 class 元素的节点列表索引偏移量？我需要此信息，以便我可以使用该索引设置数据传输对象，以便稍后在 '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

这是你需要的吗？

HTML5 DnD、事件处理程序和 class 索引

HTML5 DnD, event handlers and class indexes

html

events