-1
Ich erstelle ein Pipe - Spiel, in dem Sie Teile auf das Board ziehen und ablegen, aber ich möchte nicht, dass das Quellelement gelöscht wird, wenn ich es auf die Tafel. Ich kann nicht scheinen, die Javascript-Antwort zu diesem zu finden.Javascript - Drag & Drop, aber Quelle verlassen
<html>
<head>
<script>
var arrayP = ["pics/pipe00.jpg", "pics/pipe01.jpg", "pics/pipe02.jpg"];
var randNum;
function genTable()
{
randNum= Math.floor((Math.random() * 4) + 0);
for(i = 0; i < 4; i++)
{
document.images[i].src = arrayP[num];
}
}
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>
</head>
<body>
<table align="left">
<tr>
<td>
<img id="drag1" src="pics/pipe00.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80">
</td>
</tr>
<tr>
<td>
<img id="drag1" src="pics/pipe01.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80">
</td>
</tr>
<tr>
<td>
<img id="drag1" src="pics/pipe02.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80">
</td>
</tr>
</table>
<div id="imgBody">
<section>
<table align="center">
<tr>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
<tr>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
<tr>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
<tr>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
</table>
</section>
</body>
</html>
Können Sie ein Codebeispiel von dem, was Sie bisher haben, hinzufügen? –
Die Grundidee besteht darin, dass Sie eine Kopie des Elements erstellen, wenn das Ziehen beginnt, und die Kopie an der alten Position belassen. Es ist sehr schwierig, etwas Spezifischeres zu geben, ohne Code zu sehen. – JJJ
In jQuery enthält das Drop-fähige Widget eine Drop-Option, mit der Sie HTML an das Drop-Ziel anhängen können. Als UX-Nite sollten Sie in den ziehbaren Optionen einen Helfer definieren, damit der Benutzer weiß, dass er eine Kopie des ursprünglichen Objekts zieht. http://api.jqueryui.com/draggable/ http://api.jqueryui.com/droppable/ –