没有ID的html拖放答案

【问题标题】：Html drag and drop without ID没有ID的html拖放
【发布时间】：2014-01-21 06:17:31
【问题描述】：

在此演示中：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>

所以，我没有办法唯一标识一个元素，所以我不确定如何移动元素。

【问题讨论】：

新浏览器有getElementsByClassName，但您可能需要对返回的列表进行排序才能找到正确的浏览器。这里不得不提一下 jQuery 或其他框架，因为它可以通过多种方式找到元素。
id 属性可能是唯一的，这将是理想的，但您可以创建一个样式类或区分为名称的东西。不推荐，会更加混乱
你有什么理由不能只为你的元素添加唯一的 id 吗？
@LeeMeador，我只是重复元素太多，无法唯一区分这些
您可以创建一个唯一的 id 并将其附加到拖动开始时的元素。

标签： javascript html drag-and-drop

【解决方案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

【讨论】：

感谢乔恩。这太酷了。我花了一段时间试图将整个对象传递给 dropUser，但这个解决方案效果很好。
谢谢，这很有帮助
哈哈，忍者神龟。

【解决方案2】：

如果您没有 id，我们可以为该可拖动元素动态创建和 id，然后将其放入目标元素中，我们必须删除该 id 值。这种情况对我有用。

taskItem.addEventListener('dragstart', function (event) {
event.target.id = "taskid";
event.dataTransfer.setData("taskItem", event.target.id);

}，假）；

而丢弃处理程序是

taskView.addEventListener('drop', function (event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("taskItem");
        var element = document.getElementById(data);
        event.target.appendChild(element);
        element.removeAttribute('id');
    }, false);

【讨论】：

【解决方案3】：

尝试在 dropUser 函数中记录事件并搜索 (event.target||event.srcElement)。这就是你需要的。

        function dropUser(target, event) {
console.log(event)
          var user = event.dataTransfer.getData('User');
          target.appendChild(event.target||event.srcElement);
        }

【讨论】：