Crear un drag and drop con 2 botones y al soltarlo, intercambiar las posiciones's game

Click here for free DL of the app version that can save data.

No:47094

←

Prev Next

→

Crear un drag and drop con 2 botones y al soltarlo..ALL
Developer User20383｜Date and time 24/2/27 8:08:43
Build time 5.966 sec｜Game capacity 1.287KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Drag & Drop Game</title>
<style>
#div1, #div2, #button1, #button2 {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
  display: inline-block;
}
</style>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
  <img id="drag1" src="pictogram1.png" draggable="true" ondragstart="drag(event)" width="88" height="31">
</div>
<button id="button1" onclick="changePosition()">Intercambiar</button>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
  <img id="drag2" src="pictogram2.png" draggable="true" ondragstart="drag(event)" width="88" height="31">
</div>
<button id="button2" onclick="changePosition()">Intercambiar</button>

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));
}

function changePosition() {
  var temp = document.getElementById("div1").innerHTML;
  document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
  document.getElementById("div2").innerHTML = temp;
}
</script>

</body>
</html>