Question

我尝试将div元素（称之为A）拖放到另一个div的框B中。每次我把A放在B中，我想在B中添加一个新的div A.

其实我有这样的事情：

function handleDragStart(e) {
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('application/x-moz-node', e.target);
}


function handleDrop(e) {
    //stuff
    this.append(e.dataTransfer.getData('application/x-moz-node'));
    return false;
}

但是当我在B中删除A时： [object HTMLDivElement] 附加在B而不是A.

你能告诉我我错在哪里吗？这是做这个的好方法吗？

Answer 1

setData和getData存在许多问题以及跨浏览器兼容性。你应该只依赖于愚蠢的旧text/plain

我建议你只要传递div A的id然后：

function handleDragStart(e) {
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', e.target.id);
}

function handleDrop(e) {
    var a = document.getElementById(e.dataTransfer.getData('text/plain'));
    a = a.cloneNode(true);
    a.id = "a new id here otherwise it is duplicated id";
    this.appendChild(a);

    e.preventDefault();
}

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

Answer 2

拖放是一个非常常见的功能。这是你＆＃34;抓住＆＃34;一个对象并将其拖动到另一个位置。

在HTML5中，拖放是标准的一部分：任何元素都可以拖动。您可以参考以下链接： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

在HTML5中拖放div

2 个答案: