Drag'n'drop, HTML/CSS/Javascript (Jquery ui )

Résolu/Fermé
UnEtudiant - 23 mars 2013 à 20:07
 UnEtudiant - 24 mars 2013 à 14:56
Bonjour,

Je suis entrain de travailler sur une petite page HTML, et j'ai rencontré un problème.

Je veut pouvoir drag une image, la drop dans une case de table, et faire en sorte que l'image soit repositionnée dans la table.
J'arrive à drag ( c'est DUR en Jquery ui ) mais j'ai plus de mal sur le drop...

Je vais donc poster les parties concernées de mon code ici 

		
<body>	
    <div id="Toolbox">
        <!-- Ici on mets 9 images 100x100 ( si on travaille en 300x300) -->
	<div id="img1" class="drag"> <figure> <img src="Test.gif" alt="image"/> </figure> 
    </div>

    <div id="Game">
	<table>
		<tr>
			<div id="hg"> <td></td> </div>
		</tr>
	</table>
    </div>
</body>

<script type="text/javascript">

/* L'objectif de ce script est de rendre l'image draggable, et la case de la table droppable.
Si l'image est droppée sur la case de la table, l'image devra être replacée afin de rentrer dans la table */

	jQuery(document).ready(function($){
		$(".drag").draggable();
		$( "#hg" ).droppable({
			accept: "#img1", 
			drop: function( event, ui ) {   
				ui.draggable.appendTo( $(this) )            
					.css({                              
						left: '0px',
						top:  '0px'
					})
			}
		});
	});
</script>

<style type="text/css">
table {
	border: 1px solid black ;
	border-collapse: collapse;
}

table td{
	border: 1px solid black ;
	width: 100px;
	height: 100px;
        /* la taille de mon image */
}
</style>


Je vous ai écrit que le code d'une seule image, et une seule case de la table, vu que je pourrais adapter moi même une fois que j'aurais compris le problème.
J'espère que vous pourrez m'aider à comprendre ce que j'ai fait de mal ^^'

Et après, une autre question!
Je voudrais qu'on puisse drag l'image UNIQUEMENT dans la case correspondante de la table, et que si l'image n'est pas drop, elle revienne à son point de départ.
Je ne vois pas du tout comment le faire, j'espère que vous pourrez me montrer/me donner des pistes ^^
A voir également:

2 réponses

Réponse 1 / 2
UnEtudiant
24 mars 2013 à 14:56
Bonjours pour la 3eme fois!

J'ai contourné mon problème en redimensionnant mon objet #Game de telle sorte qu'on puisse aligner x tables de 1 case l'une a coté de l'autre.
J'ai ensuite créé mes tables au lieu de créer des cases...
J'arrive a drag'n'drop dans une table, donc ça résout mon problème... même si c'était pas exactement ce que je voulais faire!
0
Réponse 2 / 2
UnEtudiant
24 mars 2013 à 13:02
Rebonjour,

J'étais un peu fatigué hier, du coup j'ai mis un peu n'importe quoi dans mon .droppable, pardon ^^

MAIS, revenons en au problème s'il vous plaît.
Je pense avoir trouvé la source du problème, mais je ne sais pas pourquoi ça marche pas...

en faisait 
	$("#Game").droppable({over:function() {
		alert('working');
		}
		})


J'ai reçu une alerte working.
En remplaçant #Game par #hg ( CAD en remplaçant le div de ma table par le div d'une case ) ça ne renvoie plus rien.

Je ne sais pas pourquoi ça marche pas, et j'espère recevoir votre aide!
L'objectif de ces div est que, j'ai plusieurs images, et je veut que chaque image puisse aller uniquement dans une case donnée de ma table.
J'ai donc créé un div pour chaque image avec id="nom" et class="drag",
puis créé un div pour chaque case de la table avec un 
<div id="hg"> <td> </td> </div>
-1

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses