✔ Html5 Drag&Drop + Formular

Mit HTML5 ist es wirklich fast kinderleicht, da braucht man kein jQuery mehr.
Wenn Du fertig bist, dann poste mal das Ergebnis!
 
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:
Javascript: 
$(document).ready(function(){
    $("#send").click(function(){
        $.ajax({
            url: 'drag.php',
            type: 'POST',
            data: {
                value: value
            }
        });
    });
});

weis aber leider nicht woran es genau liegt.


Lg Stefan
 
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: 
$("#send").click(function(){
        var value= $('#div2').html();
        $.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: 
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.innerHTML);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.innerHTML = data;
}
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?
 
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: 
<? 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
 
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 Vergrößern anklicken....
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: 
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
ele = document.getElementById(id);
ev.target.innerHTML = ele.innerHTML;
ele.parentNode.removeChild(ele);
}

Zum überprüfen ob das Script funktioniert ...
Zum Vergrößern anklicken....
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.
 
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: 
success: function(data){
         $("#result").text(data);
}
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.
 
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:
Javascript: 
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("text");
    ele = document.getElementById(id);
    ev.target.innerHTML = ele.innerHTML;
    ele.parentNode.removeChild(ele);
}


$(document).ready(function(){
    $("#send").click(function(){
        $.ajax({
            url: 'dragcheck.php',
            type: 'POST',
            data: {
                ref: $('#div2').html(),
                ump: $('#div3').html(),
                hl: $('#div4').html(),
                lj: $('#div5').html(),
                bj: $('#div6').html(),
                fj: $('#div7').html(),
                sj: $('#div8').html()
            },
            success: function(data){
                $("#result").text(data);
             }
        });
    });
});

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
 
ist es möglich das man den value Wert vom <div> verschickt?
Zum Vergrößern anklicken....
Mir ist nicht ganz klar, was Du mit "value-Wert" meinst. AFAIK haben nur Input-Felder einen value.

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.
Zum Vergrößern anklicken....
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?
 
habe gerade nochmal nachgesehen: ich meine den title-Wert
zB:
HTML: 
<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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück