Html5 Drag&Drop + Formular


Sempervivum

Erfahrenes Mitglied
ich meine den title-Wert
So eine Art ID? Für so etwas ist der eigentlich nicht gedacht:
http://wiki.selfhtml.org/wiki/HTML/Universalattribute#title
Besser geeignet wäre IMO ein data-Attribut.
Würde dann so aussehen:
Code:
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
/*ele = document.getElementById(id);
ev.target.innerHTML = ele.innerHTML;
ele.parentNode.removeChild(ele);*/
src = $("#" + id);
dst = $(ev.target);
dst.text(src.text());
dst.attr("data-id", src.attr("data-id"));
src.remove();
}


$.ajax({
url: 'dragcheck.php',
type: 'POST',
data: {
ref: $('#div2').attr("data-id"),
ump: $('#div3').attr("data-id"),
hl: $('#div4').html(), // usw.
lj: $('#div5').html(),
bj: $('#div6').html(),
fj: $('#div7').html(),
sj: $('#div8').html()
},
success: function (data) {
$("#result").text(data);
}
});
HTML:
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div data-id="1" draggable="true" ondragstart="drag(event)" id="drag1" width="100px" height="40px" style="border:1px solid #aaaaaa;">test 1</div>
<div data-id="2" draggable="true" ondragstart="drag(event)" id="drag2" width="100px" height="40px" style="border:1px solid #aaaaaa;">test 2</div>
Für das Zurücklegen (manuell oder automatisch bei Überschreiben) würde ich folgendes vorschlagen: Die Elemente in der Vorratsliste oben nicht löschen, sondern nur verbergen (oder einfach sichtbar und leer lassen). Die ID des Feldes oben in ein data-Attribut unten eintragen, damit man das Element leicht wiederfindet. Ist eine interessante Aufgabe!
 
Zuletzt bearbeitet: