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＆lt; 9，但这是一个可以轻松解决的技术细节。

Answer 2

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

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

Answer 3

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

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

}，false）;

和drop handler是

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);

没有ID的Html拖放

3 个答案: