kostenloser Webspace werbefrei: lima-city


Html5 Drag & Drop an Server senden

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    stoerchu

    Kostenloser Webspace von stoerchu

    stoerchu hat kostenlosen Webspace.

    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. Schau dir mal diese jquery Erweiterung an http://www.editablegrid.net/en/, denke genau das was du suchst.
  4. Autor dieses Themas

    stoerchu

    Kostenloser Webspace von stoerchu

    stoerchu hat kostenlosen Webspace.

    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. 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?

Über lima-city

Login zum Webhosting ohne Werbung!