Html5 Drag & Drop an Server senden
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
alpha
antwort
art
datei
delta
denkfehler
erweiterung
folgenden code
funktion
gamma
http
projekt
senden
spezielle frage
tabelle
tat
url
zahl
zeta
-
Hallo
Ich habe eine etwas spezielle Frage: ich habe folgenden Code, der eigentlich recht gut funktioniert:
<script> var dragSrcEl = null; /* Drag&Drop beginnt */ function handleDragStart(e) { // Source Elemente dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); // Deaktiviert die Standardreaktion des Browsers. Dadurch wird das "Drop" möglich. } e.dataTransfer.dropEffect = 'move'; // Drag & Drop mit Verschiebung /* Mögliche Werte: copy: A copy of the source item is made at the new location. move: An item is moved to a new location. link: A link is established to the source at the new location. none: The item may not be dropped. */ return false; } /* Verschieben beginnen */ function handleDragEnter(e) { // gestrichelte Umrandung des Elements hinzufügen this.classList.add('over'); } /* Verschiebung aufhören */ function handleDragLeave(e) { // gestrichelte Umrandung des Elements aufheben this.classList.remove('over'); } /* Maus auf Ziel losgelassen */ function handleDrop(e) { // Stoppt die Standardfunktionalität des Browsers, notwendig für Firefox if (e.preventDefault) { e.preventDefault(); } if (dragSrcEl != this) { // Bilder austauschen dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } return false; } // wird am Ende aufgerufen function handleDragEnd(e) { // Umrandung entfernen [].forEach.call(cols, function (col) { col.classList.remove('over'); }); } // Füge zu jedem Bild alle DnD Events hinzu. var attribute_values = document.querySelectorAll('#attribute_values .dice_value'); [].forEach.call(attribute_values, function(dice_value) { dice_value.addEventListener('dragstart', handleDragStart, false); dice_value.addEventListener('dragenter', handleDragEnter, false) dice_value.addEventListener('dragover', handleDragOver, false); dice_value.addEventListener('dragleave', handleDragLeave, false); dice_value.addEventListener('drop', handleDrop, false); dice_value.addEventListener('dragend', handleDragEnd, false); }); </script> <div class="row"> <div class="small-2 columns" style="border: 1px solid #666666;">Alpha</div> <div class="small-2 columns" style="border: 1px solid #666666;">Beta</div> <div class="small-2 columns" style="border: 1px solid #666666;">Gamma</div> <div class="small-2 columns" style="border: 1px solid #666666;">Delta</div> <div class="small-2 columns" style="border: 1px solid #666666;">Epsilon</div> <div class="small-2 columns" style="border: 1px solid #666666;">Zeta</div> </div> <div class="row" id="attribute_values"> <div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">1</div> <div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">2</div> <div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">3</div> <div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">4</div> <div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">5</div> <div class="dice_value small-2 columns" draggable="true" style="border: 1px solid #666666;">6</div> </div>
Das Script funktioniert auch soweit wunderbar. Es werden in einer Art Tabelle (ich verwende hier ein Grid) zuerst jeweils Oben "Alpha", "Beta" usw. aufgelistet (inline) und darunter kommen jeweils die Zahlen 1, 2, 3 usw. Jetzt kann man mit diesem Script wunderbar die Zahlen untereinander vertauschen (mittels Drag & Drop)
Ich möchte das Ganze anschliessend an ein PHP-Script senden. Es muss irgendwie ersichtlich sein, welcher Wert unter "Alpha", "Beta" usw. steht. normalerweise würde ich einfach ein Formular verwenden, aber dies geht leider in diesem Fall nicht, oder ich mache irgendwie einen Denkfehler.
Das einzige, was mir hier einfällt, ist jweils beim Drop ein Ajax-Request zu starten, der die Zahl übermittelt, aber ich möchte eigentlich nur einmal am Schluss alle Werte zusammen an ein PHP-Script übergeben zur Überprüfung.
Hat hier irgend jemand eine Idee oder einen Lösungsansatz? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Schau dir mal diese jquery Erweiterung an http://www.editablegrid.net/en/, denke genau das was du suchst.
-
Danke für deine Antwort all-in1
Dies ist in der Tat genau das was ich gesucht habe. Allerdings ist das fast etwas übertrieben für die Funktion, die ich eigentlich haben möchte. Ich habe mir die Seite aber gespeichert, da sie später im Projekt sehr interessant für mich sein wird.
Ich möchte eigentlich nicht, dass die Zahlen editierbar sind, sondern lediglich per drag & drop untereinander gemischt werden können. Ich versuche zur Zeit gerade dies mit einem AJAX-Script zu lösen, da es anscheinend keine andere Lösung zu geben scheint. -
Das könnte man ja raus nehmen, das man die Werte editieren kann.
Brauche auch genau das für eine Logistiksoftware, so kann ich mir eventuell eine Datei sparen. Bzw. die Mitarbeiter ein paar Klicks. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage