Drag & Drop div in HTML5

Question

Ich versuche, ein Div-Element (nennen Sie es A) in eine Box B, die ein anderes div ist. Ich möchte ein neues div A in B jedes Mal, wenn ich ein Tropfen in B.

Eigentlich habe ich so etwas anfügen:

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

Aber wenn ich Drop A in B: [object HTMLDivElement] ist in B anstelle von A angehängt.

Können Sie mir sagen, wo ich falsch liege und ist es der gute Weg, dies zu tun?

Answer 1

Es gibt zahlreiche Probleme mit und getData und die Cross-Browser-Kompatibilität. Sie sollten nur auf der stummen alten text/plain

verlassen ich Sie gerade die id des div A passieren würde raten und dann:

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

Drag & Drop ist ein sehr häufiges Merkmal. Es ist, wenn Sie ein Objekt "greifen" und es an einen anderen Ort ziehen.

In HTML5 ist Drag & Drop Teil des Standards: Jedes Element kann ziehbar sein. Sie können den folgenden Link beziehen: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop