11548 sujets

JavaScript, DOM et API Web HTML5

Jquery, probleme de drag&drop

Bonjour,

Me voila en prise de tête sur le drag and drop depuis quelques jours.
J'utilise la librairie jquery ui.
Voici l'exemple de ce que je veux obtenir, j'ai 4 conteneurs draggable, 1 élément draggable qui de base est dans un des conteneurs.
Cet élément ne peut-être placé que dans un des 4 conteneurs.

Le probleme, lorsque je place l'élément dans un conteneur, il reste lié au conteneur de départ, donc si je le premier conteneur, l'élément vient avec.
Or je souhaiterai que l'élément soit lié au conteneur dans lequel on vient de le déposer.

Et la je sèche totalement Smiley decu 



<script type="text/javascript">

	
jQuery(document).ready(function(){
	
	$("#Conteneur1").draggable();
	$("#Conteneur2").draggable();
	$("#Conteneur3").draggable();
	$("#Conteneur4").draggable();
	
	$("#Element1").draggable({
		snap: '.conteneur',
		revert: "invalid",
		revertDuration: 100
	});

	$(".conteneur").droppable({
  		accept: ".element",
  		tolerance: 'pointer'
  });

})
</script>

<body>
<style type="text/css">
div#Conteneur1 {
	width:100px;
	height:100px;
	background-color: red;
}
div#Conteneur2 {
	width:100px;
	height:100px;
	background-color: green;
}
div#Conteneur3 {
	width:100px;
	height:100px;
	background-color: grey;
}
div#Conteneur4 {
	width:100px;
	height:100px;
	background-color: yellow;
}
div#Element1 {
	width:50px;
	height:50px;
	background-color: black;
}
</style>


<div id="Conteneur1" class="conteneur"></div>
<div id="Conteneur2" class="conteneur"></div>
<div id="Conteneur3" class="conteneur"></div>
<div id="Conteneur4" class="conteneur">
	<div id="Element1" class="element"></div>
</div>


merci d'avance pour votre aide !
Personne n'a une petite idée ? Je tourne toujours en rond et commence à désespérer que ca soit possible... ce qui m'étonne quand même Smiley decu
Salut,

je n'ai pas le temps de regarder dans le détail mais un début de piste :
$(".conteneur").droppable({
	accept: ".element",
	tolerance: 'pointer',
	drop: function(ev, ui) {
		var dropped = ui.draggable;
		$(dropped).appendTo(this);
	} 
});
Hoï,

La réponse d'Heyoan est normallement la bonne, il faut rajouter à la main l'élément draggé dans le conteneur. Ça n'est malheureusement pas automatisé.
Super !

J'ai jamais cherché aussi simple Smiley decu
Y a juste le positionnement qui ne donne pas un bon résultat, mais la je devrais arriver à m'en tirer Smiley lol

Merci beaucoup !
Sujet clos
Aller à