Drop ziehbares Element mit ID X, um Container mit ID Y fallen zu lassen

Ich versuche, eine Funktion zu erstellen, die es mir ermöglicht, ein ziehbares Element in einen Drop-Container mithilfe von IDs zu löschen. Aber ich weiß nicht, wie ich anfangen soll.Drop ziehbares Element mit ID X, um Container mit ID Y fallen zu lassen

dropToContainer("myDraggable", "div3"); 
 

 
function dropToContainer(contentID, containerID) 
 
{ 
 
\t //move draggable Element with contentID to the container with containerID 
 
} 
 

 
/* ----- DRAG & DROP FUNCTIONS ----------- */ 
 

 
function allowDropStatus(ev) { 
 
    ev.preventDefault(); 
 
\t return false; 
 
} 
 

 
function dragInitialize(ev) { 
 
    ev.dataTransfer.effectAllowed='move'; 
 
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); 
 
    return true; 
 
} 
 

 
function dropComplete(ev) { 
 
    ev.preventDefault(); 
 
    var src = ev.dataTransfer.getData("Text"); 
 
    ev.target.appendChild(document.getElementById(src)); 
 
    ev.stopPropagation(); 
 
    return false; 
 
}

#div1, #div2, #div3 
 
{ 
 
    float:left; 
 
    width:280px; 
 
    height:180px; 
 
    margin:10px; 
 
    padding:10px; 
 
    border:1px solid #aaaaaa; 
 
}

<div id="div1" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"> 
 
    <img id="myDraggable" src="https://www.webcodegeeks.com/wp-content/uploads/2015/12/WebCodeGeeks-logo.png" draggable="true" ondragstart="return dragInitialize(event)" width="250" height="150" id="drag1"> 
 
</div> 
 

 
<div id="div2" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"></div> 
 

 
<div id="div3" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"></div>

Ist das möglich?

JSFIDDLE

https://jsfiddle.net/08u9zmau/ (Scheint nicht in JSFIDDLE arbeiten)

Quelle

2016-04-01 Black

Ich war in der Lage, die Funktion zu schreiben, ist es eigentlich ganz einfach:

function dropToContainer(contentID, containerID) 
 
{ 
 
    var targetElement = document.getElementById(contentID); 
 
    var clone \t = targetElement.cloneNode(true); 
 

 
    document.getElementById(containerID).appendChild(clone); 
 
    targetElement.parentNode.removeChild(targetElement); 
 

 
} 
 

 
/* ----- DRAG & DROP FUNCTIONS ----------- */ 
 

 
function allowDropStatus(ev) { 
 
    ev.preventDefault(); 
 
    return false; 
 
} 
 

 
function dragInitialize(ev) { 
 
    ev.dataTransfer.effectAllowed='move'; 
 
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); 
 
    return true; 
 
} 
 

 
function dropComplete(ev) { 
 
    ev.preventDefault(); 
 
    var src = ev.dataTransfer.getData("Text"); 
 
    ev.target.appendChild(document.getElementById(src)); 
 
    ev.stopPropagation(); 
 
    return false; 
 
}

#div1, #div2, #div3 
 
\t { 
 
\t float:left; 
 
\t width:280px; 
 
\t height:180px; 
 
\t margin:10px; 
 
\t padding:10px; 
 
\t border:1px solid #aaaaaa; 
 
\t }

<input type="button" value="move image" onclick="dropToContainer('myDraggable', 'div3');"> 
 
<div id="div1" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"> 
 
\t <img id="myDraggable" src="https://www.webcodegeeks.com/wp-content/uploads/2015/12/WebCodeGeeks-logo.png" draggable="true" ondragstart="return dragInitialize(event)" width="250" height="150" id="drag1"> 
 
\t </div> 
 

 
\t <div id="div2" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"></div> 
 

 
\t <div id="div3" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"></div>

Quelle

2016-04-01 21:33:22 Black

Sie haben alles richtig gemacht bisher.

Das einzige, was Sie beachten müssen, wenn Sie Funktionen an DOM-Elemente binden, ist, dass die Funktionen bereits definiert sein müssen, wenn das DOM das Rendern beendet hat.

Das heißt, Sie können Ihr Skript in das -Tag oder am Ende Ihrer Seite laden, kurz bevor das <body>-Tag geschlossen wird.

Die von Ihnen bereitgestellte JSfiddle funktioniert nicht, da sie JS-Bindung an das onLoad-Ereignis bindet, was bedeutet, sobald die Seite geöffnet wird. Ändern Sie es in head oder body und alles wird gut.

Quelle

2016-04-01 13:24:12

Mein Problem ist eine Funktion Whit zwei ID params zu schaffen, und wenn ich diese Funktion aufrufen, dann mein ziehbares Element mit der angegebenen ID sollte in den Container mit der angegebenen ID fallen. Aber ich denke, ich weiß jetzt, wie ich es lösen kann, ich muss nur mit 'document.getElementById()' arbeiten und den Inhalt in meinen Container verschieben. – Black

Drop ziehbares Element mit ID X, um Container mit ID Y fallen zu lassen

Antwort

Verwandte Themen