Drag&Drop funktionert nicht, wie erwünscht

tklustig

Erfahrenes Mitglied
Hallo Leute,
folgender Versuch, ein simples Drag&Drop zu implementieren klappt nur bei Figuren, die ohne CSS-Anweisung außerhalb des Brettes positioniert werden. Vermutlich wird das dragger-Event bereits getriggert, wenn ich die Figur innerhalb des Brettes positioniere. oder aber die fixed-Anweisung unterbindet generell ein Drag&Drop?!. Meine Frage lautet also:
  1. Ist mein Drag&Drop-Ansatz falsch ?
  2. Taugt das Brett nix im Zusammenhang mit Drag&Drop ?
  3. Gibt es Alternativen?
Zusatzfrage: Folgende Anweisung stellt auf dem Bildschirm einen schwarzen Springer dar:
HTML:
<label draggable="true" ondragstart="drag(event)">&#9822;</label>
Das Drag&Drop funktioniert hier allerdings überhaupt nicht. Gibt es eine Möglichkeit, auch Unicode zu drag&droppen, oder funktioniert das nur bei Bilder?
Das hätte den Vorteil einheitlicher Spielfiguren....

Hier die CSS-Anweisungen
CSS:
#schachbrett {
  width: 420px;
  height: 420px;
  background-color: lightgrey;
  border: 2px solid blue;
}
.feld {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: top;
}
.feld.schwarz {
  background-color: black;
}
.feld.weiss {
  background-color: white;
}
.vlabel {
  width: 20px;
  height: 50px;
}
.hlabel {
  width: 50px;
  height: 20px;
}
.hlabel, .vlabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.springerWhite{
position: fixed;
top:49%;
right:41%;
}
Hier der HTML/JS-Code
Code:
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title> Schachbrett mit Drag&Drop </title>
   <link href="css/schachdesign.css" rel="stylesheet">
<style>
</style>
</head>
<body> <!-- ab hier HTML-Code einfügen -->
<center><h3>Schachbrett mit Drag&Drop</h3>
<div id="schachbrett" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<script>
var brett = document.getElementById("schachbrett");
for (var i = 0; i < 8; i++) {
  var zeile = document.createElement("div");
  brett.appendChild(zeile);
  var schwarz = !(i % 2);
  for (var j = 0; j < 8; j++) {
    var feld = document.createElement("div");
    if (schwarz) feld.className = "feld schwarz";
    else feld.className = "feld weiss";
    zeile.appendChild(feld);
    schwarz = !schwarz;
  }
  var vlabel = document.createElement("div");
  vlabel.className = "vlabel";
  vlabel.textContent = 8 - i;
  zeile.append(vlabel);
}
var lzeile = document.createElement("div");
brett.appendChild(lzeile);
for (var k = 0; k < 8; k++) {
  var hlabel = document.createElement("div");
  hlabel.className = "hlabel";
  hlabel.textContent = String.fromCharCode(64 + k + 1)
  lzeile.appendChild(hlabel);
 
}
//Drag and Drop
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
<form id="formular" name="formular" action="" method="post"></form>
<img id="drag1" class="springerWhite"src="img/Springer.png" draggable="true" ondragstart="drag(event)" width="45" height="35">
<img id="drag2"  src="img/Springer.png" draggable="true" ondragstart="drag(event)" width="45" height="35">
<img id="drag3"  src="img/Turm.png" draggable="true" ondragstart="drag(event)" width="45" height="35">
<br><button type="button" onclick="location.reload()">Brett neu aufstellen!</button>
</center>
<?php
?>
</body>
</html>
 
Zuletzt bearbeitet:
Dein Drag&Drop funktioniert bei mir einwandfrei.
die fixed-Anweisung unterbindet generell ein Drag&Drop?
Wenn das heißt, dass Du versucht hast, die Figuren mit position:fixed zu positionieren, heißt die Antwort vermutlich "ja". Ich empfehle, den Feldern IDs zu geben:
Code:
                for (var j = 0; j < 8; j++) {
                    var feld = document.createElement("div");
                    feld.id = "feld" + i + j; // dem Feld eine ID zuweisen
                    if (schwarz) feld.className = "feld schwarz";
                    else feld.className = "feld weiss";
                    zeile.appendChild(feld);
                    schwarz = !schwarz;
                }
und mit deren Hilfe die Figuren als Kindelemente der Felder zu positionieren:
Code:
document.getElementById("feld00").appendChild(document.getElementById("drag1"));
Dann funktioniert es bei mir problemlos.
Die nächste Herausforderung besteht dann wahrscheinlich darin, nur die zulässigen Züge zuzulassen :)
 
Du meinst also, wenn ich eine id einfüge, benötige ich keine CSS-Anweisungen mehr, um die Figuren auf dem Brett, anstatt unter das Brett zu positionieren? Wie steht's mit der Zusatzfrage?
Gibt es irgendeine Möglichkeit, Unicode-Symbole mittels Drag&Drop zu bewegen?
P.S.: Dein Tipp mit der Id ist jedenfalls Gold Wert. Jetzt kann ich jede Figur gezielt auf das Brett positionieren. Nächste Herausforderung ist jedoch erstma das Erstellen geeigneter Figuren mit einem Grafikprogramm. Ich weiß nämlich nicht, wie man mit Pain.NET eine Figur so erstellt, dass sie sich transparent in das Brett integriert. Bisher habe ich mit dem Hintergrund der Figur ein Problem.Die CSS-Anweisung opacity hilft nicht. Der Anhang soll verdeutlichen, was ich meine. Irgendwie ist es mir mit Pain.NET für den Springer gelungen, dass Bild transparent zu erstellen, für den Tum allerdings nicht. Bekommt man dieses Problem mit CSS in den Griff?
 

Anhänge

  • brett.png
    brett.png
    47,3 KB · Aufrufe: 3
Zuletzt bearbeitet:
Gibt es irgendeine Möglichkeit, Unicode-Symbole mittels Drag&Drop zu bewegen?
Ich bin ziemlich sicher, dass das geht, wenn Du das Symbol in ein div legst und dieses für das Drag&Drop einrichtest.
Wie man den Hintergrund transparent macht mit paint.NET kann ich dir leider nicht sagen, weil ich dieses Programm im Moment nicht installiert habe. Normalerweise macht man es, indem man den Hintergrund mit dem Zauberstab auswählt und den Bereich dann mit "Delete" löscht.
 
Hat geklappt, mit Paint.NET
  1. Figur mit Zauberstab oder Lasso "markieren"
  2. Auf Markerung zuschneiden
  3. FERTIG
Ich melde mich wieder, sobald es darum geht, nur regelkonforme Züge zuzulassen. Einen Algorithmus dafür habe ich aus einer C#-Engine. Den muss ich allerdings in JavaScript portieren. Vielleicht bringe ich dafür PHP ins Spiel, obwohl, eher nicht. PHP benötige ich erst im Zusammenhang mit dem Abspeichern der Halbzüge in die Datenbank.....
Danke vielmals für deine kompetente Hilfe. Hat mir sehr geholfen.
Bye!
 
Zurück