在HTML5中拖放div

Question

我尝试将div元素（称为A）拖放到另一个B框B中。 每当我将A放入B中时，我想在B中添加一个新的divA。

其实我有这样的事情：

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时： [对象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/zh-CN/docs/Web/API/Node/cloneNode

Answer 2

拖放是非常常见的功能。 这是当您“抓取”对象并将其拖到其他位置时。

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