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:
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
Hier der HTML/JS-Code
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:
- Ist mein Drag&Drop-Ansatz falsch ?
- Taugt das Brett nix im Zusammenhang mit Drag&Drop ?
- Gibt es Alternativen?
HTML:
<label draggable="true" ondragstart="drag(event)">♞</label>
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%;
}
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: