wip
This commit is contained in:
commit
cddd2d8d4c
1 changed files with 69 additions and 0 deletions
69
index.html
Normal file
69
index.html
Normal file
|
@ -0,0 +1,69 @@
|
|||
<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>
|
Loading…
Reference in a new issue