2
Pourquoi la table se déforme-t-elle lorsque je fais glisser mon gif dans les cellules? Comment puis-je résoudre ce problème? Je veux que la table (et chaque cecll) reste la taille quand je glisse le gif dans les cellules.Tableau déformé lorsque GIF a été déplacé
Voici un jsFiddle de ma situation: http://jsfiddle.net/MjMcr/3/
<body>
<img id="drag1" src="http://files.myopera.com/supersagitta/Pokemon/BW_Sprites/Pikachu.gif" draggable="true" ondragstart="drag(event)">
<div id="play1">
<table border="1" class="play">
<tr>
<td>
<div id="div1" class="room left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
<td>
<div id="div2" class="room center" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
<td>
<div id="div3" class="room right" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
<tr>
<td>
<div id="div4" class="room left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
<td>
<div id="div5" class="room center" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
<td>
<div id="div6" class="room right" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
</table>
</div>
CSS
.play {
width: 100%;
height: 100%;
}
.play td {
}
.play .room {
width:100%;
height:100%;
border:1px solid #aaaaaa;
}
.left{
background-color:blue;
}
.center{
background-color:white;
}
.right{
background-color:red;
}
javascript
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));
}
Notez que les tables sont pour les données tabulaires. Vous voulez six divs avec des dimensions explicites définies en CSS. –
Donc je ne devrais pas utiliser de table? – bdeonovic
pas à moins que ce soit vraiment des données tabulées. utiliser un seul div comme "parent", avec six divs à l'intérieur de sorte qu'ils s'alignent 3/3 vous donne beaucoup plus de flexibilité, et trouver la bonne "cellule" est encore assez facile avec un sélecteur CSS (nativement en utilisant 'document. querySelector', ou avec quelque chose comme jQuery). Dans ce cas, la partie importante est que les cellules ont toutes une largeur réelle, sinon elles sont redimensionnées pour s'adapter à votre contenu, et les choses vont très mal (indépendamment de la table vs div) –