69 lines
2 KiB
HTML
69 lines
2 KiB
HTML
<html>
|
|
<head>
|
|
<title>Drag and Drop</title>
|
|
<style>
|
|
body { font-family: monospace; }
|
|
table { border: solid;}
|
|
img {
|
|
width:50px;
|
|
height:50px;
|
|
}
|
|
td {
|
|
width:60px;
|
|
height:30px;
|
|
text-align: center;
|
|
border: solid 1px;
|
|
}
|
|
.card { border: solid 2px #FDD; border-radius: 4px; width: 1em; height: 1em; padding: 3px; text-align: center;
|
|
weight: bold; margin: 0 auto; display: inline-block;}
|
|
.yann { background-color: #C32; color: white; }
|
|
.wanderson { background-color: #3A2; color: white; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<center>
|
|
<h1>Plan</h1>
|
|
<div><h3>people</h3>
|
|
<div id="wanderson" class="card wanderson">W</div>
|
|
<div id="yann" class="card yann">Y</div>
|
|
</div>
|
|
<table border="1" max-width="50%" max-height="50%">
|
|
<tr>
|
|
<th><b>FT</b></td>
|
|
<th><b>v1.81</b></td>
|
|
<th><b>v1.82</b></td>
|
|
</tr>
|
|
<tr>
|
|
<th>SX Session</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr id="tr2">
|
|
<th>SX</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
</body>
|
|
<script>
|
|
|
|
|
|
function drag(ev) {
|
|
ev.dataTransfer.setData("text", ev.target.id);
|
|
}
|
|
var cells = document.querySelectorAll("td");
|
|
cells.forEach(function(cell) {
|
|
cell.ondragover = function(event){ event.preventDefault(); };
|
|
cell.ondrop = function(ev){drop(ev,this);};
|
|
});
|
|
var cards = document.querySelectorAll(".card");
|
|
cards.forEach(function(card){ card.draggable = true; card.ondragstart = drag; });
|
|
|
|
function drop(ev,el) {
|
|
ev.preventDefault();
|
|
var data = ev.dataTransfer.getData("text");
|
|
el.appendChild(document.getElementById(data));
|
|
}
|
|
</script>
|
|
</html>
|