1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Html5 Drag&Drop + Formular

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von ihop, 19. Juni 2015.

  1. ihop

    ihop Mitglied

    Hallo zusammen,

    da ich grad dabei bin eine kleine Idee umzusetzen (auch um mein Wissen auf den aktuellen stand zu bringen), brauch ich gerade eure Hilfe.

    Was ist geplannt:
    ich möchte gern ein "kleines" Script, Besetzungsliste, schreiben, hier habe ich mir gedacht das es recht nett wäre, wenn alle Verfügbaren "Mitarbeiter" in einer Spalte stehen. Es soll dann 7 Felder geben wo ich jeweils einen "Mitarbeiter" ziehen kann aber nicht muss ;) .

    Wenn die Einteilung fertig ist möchte ich dann gerne diese per Button zu einen PHP Script schicken kann und diese dann in eine MySQL Table geschrieben wird.

    in Google habe ich noch nichts passendes gefunden, leider.
    Das einzige was daweil in die "nähe" kommt ist dies: http://www.w3schools.com/html/html5_draganddrop.asp

    hoffe Ihr könnt mir weiter Helfen oder zumindest Denkanstöße geben könnts.


    Lg Stefan
     
  2. Parantatatam

    Parantatatam mag Cookies & Kekse

  3. ihop

    ihop Mitglied

    Danke Crack für deine schnelle Antwort!
    Der erste Link geht schon etwas tiefer (Drag&Drop für Files), leider sehe ich bei beiden Seiten keinen zusammenhang für meine "Wunschlösung",
    aber das kann auch damit zusammenhängen das ich schon lange nichts mehr mit HTML gemacht habe (HTML5 komplett verschlafen)
    und ich eben grad dabei bin mir dieses Wissen wieder anzueignen.

    Lg Stefan
     
  4. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Schau dir mal jQuery-draggable und -droppable an. Das erleichtert Drag-and-Drop ungemein. Das ganze dann an einen Server zu schicken, ist eine unabhängige Aufgabe, die mit Ajax lösbar sein sollte. Aber das Beispiel bei w3schools scheint doch auch relativ einfach zu sein. Möglicher Weise so einfach, dass es jQuery überflüssig macht. Woran scheitert es denn, dieses auf dein Vorhaben zu übertragen?
     
    Zuletzt bearbeitet: 19. Juni 2015
  5. ihop

    ihop Mitglied

    Hallo Sempervivum,
    es scheitert daran das ich nicht ganz verstehe wie ich die Daten gesendet bekomme so das ich dies per PHP verarbeiten kann da sich in jedem Beispiel es sich um <div> handelt.

    Bei mir hat sich das ganze in den Kopf (von früher) gefressen das man dazu ein formular braucht :D

    Lg Stefan
     
  6. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Ein Formular ginge auch, aber das ist eigentlich mehr für manuelle Eingaben gedacht. Informiere dich mal über Ajax, das ist am einfachsten mit jQuery zu handhaben. Ein div kannst Du natürlich nicht an den Server übertragen, aber die Mitarbeiter haben doch sicher Namen und damit sollte es möglich sein.
     
  7. Sempervivum

    Sempervivum Erfahrenes Mitglied

    PS: Nach etwas Überlegung komme ich zu der Meinung, dass es mit einem Formular genausogut möglich ist. In die Eingabefelder wird dann eben nicht etwas eingegeben sondern per Drag-and-Drop etwas eingefügt.
     
  8. ihop

    ihop Mitglied

    Hallo Sempervivum,
    Das hört sich interessant an hast du da vlt eine seite mit einem Beispiel für mich?

    Ich habe bissi wegen jQuery geschaut und folgendes gefunden:
    http://jqueryui.com/sortable/#connect-lists

    Aber auch hier stellt sich für mich die Frage: Wie bekomme ich das hin das ich die "Eingaben" weiter verarbeiten kann?

    Lg Stefan
     
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

    ihop gefällt das.
  10. ihop

    ihop Mitglied

    Super Danke!

    Ich hoffe den rest bekomme ich alleine hin!

    Danke nochmals
     
  11. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Mit HTML5 ist es wirklich fast kinderleicht, da braucht man kein jQuery mehr.
    Wenn Du fertig bist, dann poste mal das Ergebnis!
     
  12. ihop

    ihop Mitglied

    Hallo zusammen, ich bins wieder :D

    ich bin nun endlich dau gekommen Sempervivum seinen Lösungsvorschlag bissi zu erweitern aber stecke nun wieder fest.
    Wobei ich denke es gehört in die Ajax ecke und nicht in die HTML, aber bevor ich noch nen Thread deswegen aufmache probier ich es trotzdem einmal.

    Dies ist meine derzeitige "Programmierung":
    http://jsfiddle.net/8zp3jqvr/5/

    Wenn ich aber den Button klicke passiert genau gar nichts :/

    Ich weis zwar das der Fehler sich hier befindet:
    Code (Javascript):
    1. $(document).ready(function(){
    2.     $("#send").click(function(){
    3.         $.ajax({
    4.             url: 'drag.php',
    5.             type: 'POST',
    6.             data: {
    7.                 value: value
    8.             }
    9.         });
    10.     });
    11. });
    weis aber leider nicht woran es genau liegt.


    Lg Stefan
     
  13. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Ich habe mir mal dein Fiddle angesehen und sehe folgende Probleme:
    1. Dies: var value= $('#div2').html(); hast Du außerhalb des document-ready stehen. Damit hast Du das Problem, dass das HMTL-Element #div2 noch nicht existiert und dass es noch nicht den richtigen Inhalt hat, denn der gelangt ja erst durch das Drag&Drop hinein. Du muss es in das click-event schreiben:
    Code (Text):
    1. $("#send").click(function(){
    2.         var value= $('#div2').html();
    3.         $.ajax({
    2. Beim Drag&Drop wird das gesamte HTML-Element übertragen und Du hast entsprechend das ganze HTML des div in deiner Variable value. Du darfst nur den Inhalt des Divs übertragen:
    Code (Text):
    1. function drag(ev) {
    2. ev.dataTransfer.setData("text", ev.target.innerHTML);
    3. }
    4.  
    5. function drop(ev) {
    6. ev.preventDefault();
    7. var data = ev.dataTransfer.getData("text");
    8. ev.target.innerHTML = data;
    9. }
    3. Für den Bezeichner im ersten Element deines data-Objektes verwendest Du den Namen "value" deiner Variablen.
    4. Im fiddle wird die php-Datei drag.php nicht gefunden, da Du sie relativ addressierst und sie nicht auf dem Server von jsfiddle.net liegt.
    PS: Warum bist Du denn überhaupt von dem Formular abgekommen?
     
  14. ihop

    ihop Mitglied

    Hallo Sempervivum :D

    Ich fange mal mit dem "Warum" an.
    Das Script wird für einem Freund von mir, der bei uns die ganze Schiedsrichter Einteilung machen muss, dies passiert noch "Oldschool" mit Stift+Papier und Excel.
    Es gibt bis zu 7 Schiedsrichter am Feld und eine Ersatzliste (auf Ersatz können bis zu 3 Personen stehen)

    Das Formular würde zwar funktionieren hat sich aber bei meinen Tests für ihn nicht als "praktikabel" herausgestellt, da es auch wärend der Saison zu umteilungen kommen kann.
    Hier müsste er dann erst den Namen aus dem Inputfeld entfernen und einen neuen hinzufügen.

    Weiters benötige ich die ID des Schiedsrichters übertragen, beim Formular überträgt er dann aber denn Namen...
    In Zukunft kommen in das <div> noch mehr Infos wie zB.: Wohnort usw.

    Zu 4.:
    Ich habe mal das Testscipt auf den Webspace hochgeladen damit das mit dem drag.php mal passt.
    http://s409522873.online.de/afsoe/test/drag.php

    Nach den Anpassungen ist mir aufgefallen das zB.: test1 nicht mehr aus der oberen Liste verschwindet,
    Vermute ich richtig das es mit dem innerHTML zutun hat?

    Zum überprüfen ob das Script funktioniert habe ich nach dem <body>-tag
    PHP:
    1. <? echo $_POST['div2'];?>
    eingefügt das müsste doch richtig sein, oder? Wenn Ja, dann funktioniert leider noch immer irgendwas nicht.

    Danke für deine unermüdliche Hilfe!

    Lg Stefan
     
  15. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Darauf hatte ich jetzt gar nicht geachtet. Ja, in deinem ursprünglichen Code wird das Element mit appendChild() im Ziel eingefügt und das wirkt offenbar so, dass es in der Quelle gelöscht wird. Du kannst das mit dem innerHTML so erreichen:
    Code (Text):
    1. function drag(ev) {
    2. ev.dataTransfer.setData("text", ev.target.id);
    3. }
    4.  
    5. function drop(ev) {
    6. ev.preventDefault();
    7. var id = ev.dataTransfer.getData("text");
    8. ele = document.getElementById(id);
    9. ev.target.innerHTML = ele.innerHTML;
    10. ele.parentNode.removeChild(ele);
    11. }
    Wenn Du mit Ajax arbeitest, musst Du berücksichtigen, dass die aufgerufene Seite - anders als beim Submit eines Formular - nicht im Browser angezeigt wird, sondern Du musst explizit die Ausgaben deines PHP-Skriptes auswerten und sichtbar machen. Dazu kannst Du im success-Callback auf den Parameter data zugreifen. Näheres erfährst du aus der Doku von jQuery-ajax.
     
  16. ihop

    ihop Mitglied

    So ich habe den success-Callback eingefügt.
    siehe: http://jsfiddle.net/8zp3jqvr/10/

    aber es macht den Anschein als würde das Script auf den Button nicht reagieren, dabei habe ich ihm die ID gegeben und auch richtig angegeben :mad:
     
  17. Sempervivum

    Sempervivum Erfahrenes Mitglied

    1. Das "$" vor dem data ist überflüssig.
    2. Ich gehe davon aus, dass Du den gelieferten Wert in dem Div #result anzeigen willst. Dann musst Du die jQuery-Funktion text() verwenden. data() hat eine andere Funktion.
    Code (Text):
    1. success: function(data){
    2.          $("#result").text(data);
    3. }
    Wie ich sehe, hast Du das mit dem {value: value} nicht geändert. Ich habe es mal getestet und es funktioniert tatsächlich so. Allerdings IMO nicht zu empfehlen, weil es verwirrend ist.
     
  18. ihop

    ihop Mitglied

    Sempervivum du bist mein HELD! :)

    jetzt hab ich aber noch 2 Fragen an dich und dann bist du mich los! ;)

    Ich habe den script-Sector jetzt bissi angepasst:
    Code (Javascript):
    1. function allowDrop(ev) {
    2.     ev.preventDefault();
    3. }
    4.  
    5. function drag(ev) {
    6.     ev.dataTransfer.setData("text", ev.target.id);
    7. }
    8. function drop(ev) {
    9.     ev.preventDefault();
    10.     var id = ev.dataTransfer.getData("text");
    11.     ele = document.getElementById(id);
    12.     ev.target.innerHTML = ele.innerHTML;
    13.     ele.parentNode.removeChild(ele);
    14. }
    15.  
    16.  
    17. $(document).ready(function(){
    18.     $("#send").click(function(){
    19.         $.ajax({
    20.             url: 'dragcheck.php',
    21.             type: 'POST',
    22.             data: {
    23.                 ref: $('#div2').html(),
    24.                 ump: $('#div3').html(),
    25.                 hl: $('#div4').html(),
    26.                 lj: $('#div5').html(),
    27.                 bj: $('#div6').html(),
    28.                 fj: $('#div7').html(),
    29.                 sj: $('#div8').html()
    30.             },
    31.             success: function(data){
    32.                 $("#result").text(data);
    33.              }
    34.         });
    35.     });
    36. });
    jetzt ist mir Aufgefallen das bei der übertragen "test 1" geschickt wird ist es möglich das man den value Wert vom <div> verschickt?
    Wenn ich jetzt das erste Feld mit zB.: "test 1" befülle und dann doch "test 5" in das Feld geben möchte verschwindet "test 1" komplett, bzw.
    werden die divs in den drop-divs nicht mehr "drag"bar.

    Habe das Gefühl das ich mir nicht das einfachste JS zum wieder einstieg ausgesucht habe :confused:.

    Lg Stefan
     
  19. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Mir ist nicht ganz klar, was Du mit "value-Wert" meinst. AFAIK haben nur Input-Felder einen value.

    Ja, so wie es jetzt ist, wird der Text einfach ersetzt. Die Frage habe ich mir auch schon gestellt: Sollte es auch möglich sein, einen Schiedsrichter aus den unteren Feldern wieder in die obere Liste zurück zu schieben? Oder dass der Wert automatisch in die obere Liste zurück springt, wenn man einen anderen hinein verschiebt?
     
  20. ihop

    ihop Mitglied

    habe gerade nochmal nachgesehen: ich meine den title-Wert
    zB:
    HTML:
    1. <div id="div3" title="1" draggable="true" ondragstart="drag(event)"></div>
    Das in diesem Beispiel die 1 übertragen wird.

    Also das non-plus-ultra wäre natürlich das:
    Wenn ich jemanden von den "Drop-Fields" in ein anderes ziehe wo schon jemand drinnen steht das die einfach Plätz tauschen,
    wird jemand vom "Drag-Field" in ein "Drop-Field" gezogen wo jemand drinnen steht springt derjenige wieder ins "Drag-Field"
    und das ich jemanden vom "Drop-Field" wieder ins "Drag-Field" ziehen kann

    Auf diese Funktion möchte ich hin arbeiten.

    Lg Stefan
     
Die Seite wird geladen...