4

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

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

4

3 回答 3

7

您实际上不需要 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，但这是一个可以轻松解决的技术细节。

于 2013-06-03T19:10:34.790 回答
0

在您没有 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);
于 2014-01-20T22:17:31.713 回答
-1

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

        function dropUser(target, event) {
console.log(event)
          var user = event.dataTransfer.getData('User');
          target.appendChild(event.target||event.srcElement);
        }
于 2013-06-03T20:54:36.463 回答