kostenloser Webspace werbefrei: lima-city

Html5 Drag & Drop an Server senden

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   stoerchu

   

   stoerchu hat kostenlosen Webspace.

   21:03, 23.10.2015

   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?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. all-in1

   

   all-in1 hat kostenlosen Webspace.

   23:00, 23.10.2015

   Schau dir mal diese jquery Erweiterung an http://www.editablegrid.net/en/, denke genau das was du suchst.
4. Autor dieses Themas

   stoerchu

   

   stoerchu hat kostenlosen Webspace.

   23:12, 23.10.2015

   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.

5. all-in1

   

   all-in1 hat kostenlosen Webspace.

   0:01, 24.10.2015

   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.

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?