没有ID的Html拖放

Question

在这个演示中:http://www.netmagazine.com/files/tutorials/demos/2013/01/create-drag-and-drop-features-in-html5/demo/demo.html
你会发现你可以使用拖放移动项目.
执行此操作的代码非常简单:

  function dragUser(user, event) {
  event.dataTransfer.setData('User', user.id);
} 
function dropUser(target, event) {
  var user = event.dataTransfer.getData('User');
  target.appendChild(document.getElementById(user));
}

它正在做的是它存储一个元素的id,然后在dom中找到该id并使用appendChild移动它.
我遇到的问题是我有没有ID的元素.

<span class=".myClass">item</span>  

所以,我无法唯一地识别元素,所以我不确定如何移动元素.

Answer 1

您实际上并不需要id,任何可以表示为字符串的标识符都可以(这是因为getData/ setData只能使用字符串值).如果没有任何东西,你可以简单地做点什么.这里我们有一个元素数组,允许将一个元素(不能表示为字符串)与其在数组中的索引相关联(可以):

var elements = [];

function dragUser(element, event) {
    var index = elements.indexOf(element);
    if (index == -1) {
        // not already existing in the array, add it now
        elements.push(element);
        index = elements.length - 1;
    }

    event.dataTransfer.setData('index', index);
} 

function dropUser(target, event) {
    var element = elements[event.dataTransfer.getData('index')];
    target.appendChild(element);
}

看到它在行动.

此代码使用的Array.indexOf意思是没有IE <9,但这是一个可以轻松解决的技术细节.