javascript - 没有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);
}

See it in action .

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