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!
Wenn Du fertig bist, dann poste mal das Ergebnis!
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
$(document).ready(function(){
$("#send").click(function(){
$.ajax({
url: 'drag.php',
type: 'POST',
data: {
value: value
}
});
});
});
$("#send").click(function(){
var value= $('#div2').html();
$.ajax({
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;
}
<? echo $_POST['div2'];?>
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: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?
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);
}
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.Zum überprüfen ob das Script funktioniert ...
success: function(data){
$("#result").text(data);
}
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);
}
});
});
});
Mir ist nicht ganz klar, was Du mit "value-Wert" meinst. AFAIK haben nur Input-Felder einen value.ist es möglich das man den value Wert vom <div> verschickt?
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?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.
<div id="div3" title="1" draggable="true" ondragstart="drag(event)"></div>