-1
Tahtaya sürükleyip bıraktığınız bir boru oyunu oluşturuyorum ancak sürükleyip bıraktığımda kaynak öğenin silinmesini istemiyorum. yazı tahtası. Buna javascript cevabını bulamıyorum. Ben JSFiddle içinde a simple use case oluşturulanJavascript - sürükleyin ve bırakın kaynak bırakın
<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>
'un bir kopyasına ihtiyacınız olacaktır. Şimdiye kadar sahip olduğunuz bir kod örneği ekleyebilir misiniz? –
Temel fikir, sürükleme başladığında ve kopyasını eski konumda bırakırken öğenin bir kopyasını oluşturmanızdır. Herhangi bir kod görmeden daha spesifik bir şey vermek çok zordur. – JJJ
jQuery'de, düşürülmüş pencere öğesi, bırakma hedefine HTML ekleyeceğiniz bir "bırakma" seçeneğine sahiptir. Bir UX nit olarak, sürüklenebilir seçeneklerde bir yardımcı tanımlamak istersiniz, böylece kullanıcı orijinal nesnenin bir kopyasını sürüklediğini bilir. http://api.jqueryui.com/draggable/ http://api.jqueryui.com/droppable/ –