... avec un drag & drop!
Bonjour,
Voila mon probleme : ma page permet un drag and drop d'élément (<img) dans un tableau et je veux pouvoir sortir ces valeurs de mon tableau ( chaque image a un nom tel que drive ou AHF etc), et les afficher! seulement voila je n'arrive pas a sortir les alt ou value enfin peu importe quel valeur qui me permettrai de différencier chaque image ...
Voici mon code :
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<style>
h1{
font-size:30pt;
}
.Cell{
height: 40px;
width: 60px;
border: 2px solid black;
}
.image{
margin: 10px;
height: 40px;
width: 60px;
border: 2px solid black;
}
.toolbox{
border-collapse: collapse;
border: 2px solid black;
height: 250px;
width: 60px;
margin: 7px;
float: left;
}
.workplace{
float: center;
height: 250px;
width: 60px;
}
</style>
<form id="post" onsubmit="return Analys()" action="">
<br>
<div>
<table class="toolbox">
<tr><td class="Cell"><img class="image" id="a" ondragstart="drag(this, event)" alt="Source"></td></tr>
<tr><td class="Cell"><img class="image" id="b" ondragstart="drag(this, event)" alt="Drive"></td></tr>
<tr><td class="Cell"><img class="image" id="c" ondragstart="drag(this, event)" alt="Choke"></td></tr>
<tr><td class="Cell"><img class="image" id="d" ondragstart="drag(this, event)" alt="AHF"></td></tr>
<tr><td class="Cell"><img class="image" id="e" ondragstart="drag(this, event)" alt="PHF"></td></tr>
</table>
</div><br>
<center>
<table class="workplace">
<tr>
<td><div class="Cell" id="11" ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" id="12"ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" id="13"ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" id="14"ondragover="return false" ondrop="drop(this, event)"></div></td>
</tr>
<tr>
<td></td>
<td><div class="Cell" id="22"ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" id="23"ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" id="24"ondragover="return false" ondrop="drop(this, event)"></div></td>
</tr>
<tr>
<td></td>
<td><div class="Cell" ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" ondragover="return false" ondrop="drop(this, event)"></div></td>
</tr>
<tr>
<td></td>
<td><div class="Cell" ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" ondragover="return false" ondrop="drop(this, event)"></div></td>
<td><div class="Cell" ondragover="return false" ondrop="drop(this, event)"></div></td>
</tr>
</table>
<br><br><input type="submit" value="Start Analysis" name="fonction"/>
</center>
</form>
<div style="clear:both"></div>
<script type="text/javascript">
function drag(target, evt) {
var newtarget = document.getElementById(target.id);
var newtarget2 = newtarget.cloneNode(true);
evt.dataTransfer.setData("Text", target.id);
newtarget.parentNode.appendChild(newtarget2);
}
function drop(target, evt) {
var id = evt.dataTransfer.getData("Text");
target.appendChild(document.getElementById(id));
evt.preventDefault();
}
function Analys(){
var Case11 = document.getElementById('11');
var Case11txt = Case11.options[Case11.selectedIndex].alt;
alert(Case11txt);
}
</script>
<!-- Détection automatique -->
<script src="_html5detect.js"></script>
</body>
</html>
Et puis que pensez vous de se système de drag and drop ? je n'arrive pas bien a dimensionner les cellules a déplacer ... et je les clonent pour toujours en avoir dans ma toolbox mais elle se clonent aussi depuis mon workspace ... si vous avez une solution je suis preneur !!
Merci d'avance
cordialement
Afficher la suite
