Hallo,
ich möchte gerne einen einfachen Warenkorb realisieren, beim dem 8 mögliche Artikel per drag and drop in den Warenkorb gelegt werden können.Drag and drop funktioniert einwandfrei nur leider habe ich überhaupt keine Idee wie ich einen Preis beim droppen mit übergeben und addieren kann, bzw. wieder subtrahieren, wenn der Artikel wieder zurückgelegt wird. Ziel ist es die Auswahl der Artikel inkl. Gesamtpreis danach erstmal mit einem Button "Bestellung abschicken" an einen Testserver zu senden.
Vielleicht hat hier jemand einen Ansatz für mich. Die Preise und Artikel sollen nicht aus einer Datenbank kommen.
ich möchte gerne einen einfachen Warenkorb realisieren, beim dem 8 mögliche Artikel per drag and drop in den Warenkorb gelegt werden können.Drag and drop funktioniert einwandfrei nur leider habe ich überhaupt keine Idee wie ich einen Preis beim droppen mit übergeben und addieren kann, bzw. wieder subtrahieren, wenn der Artikel wieder zurückgelegt wird. Ziel ist es die Auswahl der Artikel inkl. Gesamtpreis danach erstmal mit einem Button "Bestellung abschicken" an einen Testserver zu senden.
Vielleicht hat hier jemand einen Ansatz für mich. Die Preise und Artikel sollen nicht aus einer Datenbank kommen.
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
.box {
float: left;
width: 300px;
height: 300px;
margin: 15px;
padding: 0px;
border: 3px solid #E33E2B;
}
.zielbox {
float: left;
width: 300px;
height: 300px;
margin: 15px;
padding: 0px;
border: 3px solid #2BA14B;
}
.dl {
width: 290px;
background-color: #F1B500;
margin: 3px;
line-height: 30px;
border: 2px solid #3A7CEC;
border-radius: 10px;
}
</style>
</head>
<body>
<p>Pack dir deine Box</p>
<div class="box">
<p class="dl" draggable="true" id="leistung1">Dienstleistung 1</p>
<p class="dl" draggable="true" id="leistung2">Dienstleistung 2</p>
<p class="dl" draggable="true" id="leistung3">Dienstleistung 3</p>
<p class="dl" draggable="true" id="leistung4">Dienstleistung 4</p>
<p class="dl" draggable="true" id="leistung5">Dienstleistung 5</p>
<p class="dl" draggable="true" id="leistung6">Dienstleistung 6</p>
<p class="dl" draggable="true" id="leistung7">Dienstleistung 7</p>
<p class="dl" draggable="true" id="leistung8">Dienstleistung 8</p>
</div>
<div class="zielbox"></div>
<p id="auswahl"></p>
<script>
// ........................................................................................................
// .................................. Events für DRAG .....................................................
// ........................................................................................................
// .................................. Die setData-Methode schreibt Daten in den Drag-And-Drop Speicher.
// .................................. Dazu muss als erster Parameter das Format der Daten angegeben werden.
// .................................. Hier ist Text (Text-Daten) oder URL (URL-Daten) möglich.
// .................................. Als zweiter Parameter wird ein String übergeben, der die entsprechenden Daten enthält.
// .................................. Notation: Objekt.setData(Format,Daten)
document.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id);
// .................................. Wenn ein Objekt aufgenommen wird, erscheint ein Hinweis
document.getElementById("auswahl").innerHTML = "Leg deine Auswahl einfach in deine persönliche Seo-Box";
// .................................. Das ausgewählte Objekt bekommt einen niedrigeren Opacity-Wert zur Markierung
event.target.style.opacity = "0.4";
});
// .................................. Während das Objekt bewegt wird, ändert sich die Textfarbe in rot
document.addEventListener("drag", function(event) {
document.getElementById("auswahl").style.color = "green";
});
// .................................. Der Ausgabetext ändert sich.
// .................................. Das Objekt erhält wieder 100% Sichtbarkeit (opacity = 100%)
document.addEventListener("dragend", function(event) {
event.target.style.opacity = "1";
});
// ........................................................................................................
// .................................. Events für DROP .....................................................
// ........................................................................................................
// .................................. Der Style des Rahmens ändert sich, sobald das Objekt in die Dropzone eintritt
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "box" ) {
event.target.style.border = "3px dotted red";
}
});
// .................................. Standardwert ist, dass Objekte nicht in andere Elemente gedropped werden können
// .................................. Dieser Standardwert muss also für das Zielfeld überschrieben werden
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// .................................. Der Style des Rahmens wird wieder normal, sobald das Objekt die Dropzone verlässt
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "box" ) {
event.target.style.border = "";
}
});
/* ................................... Startbox .................................. */
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "box" ) {
document.getElementById("auswahl").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("auswahl").innerHTML = "oh schade ";
}
});
/* ................................... Zielbox .................................. */
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "zielbox" ) {
document.getElementById("auswahl").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("auswahl").innerHTML = "toll gemacht ";
}
});
</script>
</body>
</html>