Hallo zusammen!
Ich habe folgendes Skript im Netz gefunden, mit dem ich eine Drag&Drop-Funktion von Bildern realisiert habe.
skript.js
Der entsprechende HTML-Code sieht wie folgt aus:
index.html
Das funktioniert auch so weit. Nur möchte ich auch folgendes realisieren. Wenn bereits ein Bild in den Antwort-Container mit der id "antwort_box" gezogen wurde, soll es nicht möglich sein ein anderes Bild hinenzubewegen, sodass sich diese überlagern. Stattdessen soll es in die Box zurück wandern, in der es war.
Kann mir jemand einen Tipp geben, wie man das hinbekommt?
Gruß
Ich habe folgendes Skript im Netz gefunden, mit dem ich eine Drag&Drop-Funktion von Bildern realisiert habe.
skript.js
Code:
// Erlaubt es dem Objekt ziehbar/bewegbar zu sein
function allowDrop(ev) {
ev.preventDefault();
}
// Funktion ist zuständig für das Ziehen (Drag)
function drag(ev) {
ev.dataTransfer.setData("content", ev.target.id);
}
// Funktion ist zuständig für das Loslassen (Drop)
function drop(ev) {
ev.preventDefault();
// Bild in der Variable "image" zwischenspeichern
var image = ev.dataTransfer.getData("content");
// Bild in einen der Kästen verschieben
ev.target.appendChild(document.getElementById(image));
if(image == "4") {
alert("Ihre Antwort ist richtig!");
} else {
alert('Ihre Antwort ist leider falsch. Bitte klicken Sie auf "Neu Laden" und versuchen Sie es noch mal.');
}
}
Der entsprechende HTML-Code sieht wie folgt aus:
index.html
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Title</title>
<style type="text/css">
#antwort_box {
width: 190px;
height: 30px;
border: 1px dashed #424242;
margin-bottom: 30px;
margin-left: 100px;
}
.funktionen_box {
float: left;
width: 190px;
height: 30px;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid gray;
}
</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="antwort_box" name="antwort" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div class="funktionen_box" ondrop="drop(event)">
<img src="1.png" alt="bild" id="1" draggable="true" ondragstart="drag(event)"/>
</div>
<div class="funktionen_box" ondrop="drop(event)">
<img src="2.png" alt="bild" id="2" draggable="true" ondragstart="drag(event)"/>
</div>
<div class="funktionen_box" ondrop="drop(event)">
<img src="3.png" alt="bild" id="3" draggable="true" ondragstart="drag(event)"/>
</div>
<div class="funktionen_box" ondrop="drop(event)">
<img src="4.png" alt="bild" id="4" draggable="true" ondragstart="drag(event)"/>
</div>
<div class="funktionen_box" ondrop="drop(event)">
<img src="5.png" alt="bild" id="5" draggable="true" ondragstart="drag(event)"/>
</div>
</body>
</html>
Das funktioniert auch so weit. Nur möchte ich auch folgendes realisieren. Wenn bereits ein Bild in den Antwort-Container mit der id "antwort_box" gezogen wurde, soll es nicht möglich sein ein anderes Bild hinenzubewegen, sodass sich diese überlagern. Stattdessen soll es in die Box zurück wandern, in der es war.
Kann mir jemand einen Tipp geben, wie man das hinbekommt?
Gruß