Evénement stop sur draggable position dans une div

**morhead** · 07/09/2012, 15h08

Bien le bonjour, je viens faire appel à votre aide encore une fois.

Principe :

Sur le l'évènement "stop" d'une div draggée je souhaite que la div draggée :
-soit revienne à sa position d'origine si elle n'est pas droppée dans une zone autorisée.
-soit prenne place dans une div mais de manière précise comme une pièce de puzzle.

Je ne peux pas utiliser la methode .position(), il faudra la meme chose mais non pas avec x,y mais avec l'aide du DOM.

Z'avez une piste ?

Le drag'n drop est terminé(je n'utilise pas de sortable), me manque "cette petite" finition.

**SpaceFrog** · 07/09/2012, 15h12

en jquery ?

http://dorkage.net/blog/2010/06/06/h...-jigsaw-works/

http://innovativephp.com/demo/puzzles/

**morhead** · 07/09/2012, 15h30

Oui en jqueryUI excuse moi.

Pour faire ce que je veux ne faut il pas que je fasse un delete de la div sur le stop et que je clone cette div draggée dans la div container?

**SpaceFrog** · 07/09/2012, 15h32

pourquoi deleter ...
suffit de l'appender , il s'agit bien de deplacer ? pas de cloner des elements ...

**morhead** · 07/09/2012, 16h44

Il faut que la div droppée puisse etre draggable a tout moment.
Ce qui complexifie un peu non ?
Mon contenu de div draggée est alimenté dynamiquement via php.

Je vois l'append comment le faire en gros mais ca fait usine a gaz non ?

J'admet etre un peu largué ^^

**danielhagnoul** · 07/09/2012, 22h18

Pour le retour d'un UI Draggable, il y a les méthodes revert et revertDuration.

Pour accepter un drop, il y a la méthode scope (Draggable et Droppable) en plus de la méthode accept (Droppable).

Pour le positionnement d'un UI Draggable dans un UI Droppable, il y a les méthodes Draggable : snap, snapMode et snapTolerance.

Voir : http://jqueryui.com/demos/draggable/ et http://jqueryui.com/demos/droppable/

**morhead** · 10/09/2012, 09h21

Pour les méthodes revert, scope, accept je les utilse déjà.
Les méthodes "snap" ne fonctionnent pas...Pourquoi alors ca... Peut etre car mais div sont dans un tableau ? (dans les td)

J'ai écumé jQuey UI depuis 1 semaine, en effet ca devrait fonctionner mais ca fonctionne pas...

L'id de la div drop, de la div drag, j'ai tout je récupère bien tout.
Mais sur le stop la div drag qui est en "hittest" avec la div drop, la div drag ne prend pas la position exacte de la div drop.

Le but étant qu'à la manière d'un sortable, la div drag du moment qu'elle est en hittest avec la div drop prenne la place exacte de la div drop.

**danielhagnoul** · 10/09/2012, 21h45

Sans la totalité des codes (HTML, CSS, JS, jQuery) et la possibilité de les tester, je ne peux rien faire.

Avez-vous vu le code source de l'exemple "smap to element or grid"

Le gestionnaire d'événement UI Draggable stop ? Peut-être. Mais pour agir au moment du drop, je regarderais plutôt le gestionnaire d'événement over de UI Droppable.

**morhead** · 11/09/2012, 08h58

J'ai regardé mon code html et une balise n'était pas fermée qui faisait que le snap ne fonctionnait pas ..... boulet

Cela fonctionne pas exactement comme je l'aurais souhaité mais on verra plus tard pour cela. Dans le principe c'est fonctionnel.

La dernière étape que je me sui fixé c'est de faire en sorte que si une div droppable avait deja une div draggable, il n'est pas possible de dragger une autre div dans la div drop.

Ici je pense qu'une fonction JS devra suffir, enfin j'espere....

**danielhagnoul** · 11/09/2012, 22h11

Bonsoir

Suite à nos échanges, voici ma page de test qu'il suffit de copier-coller pour tester.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/overcast/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css">
	<style>
		/* TEST */
		.draggable { width: 150px; height: 150px;  background-color : black; color : white; border :solid; }
		.trash { width: 150px; height: 120px; background-color: #617673; border :red solid; }
		#left { float : left; }
		#right { float:left; }
		.joueur_survole { width: 153px; height: 153px; background-color :#54BFB1; margin : -10px 3px 0 0; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2><a href="http://www.developpez.net/forums/newreply.php?do=newreply&noquote=1&p=6883375">Lien</a></h2>
	<section class="conteneur">
 
<div id="drag"> <!-- Div drag -->
	<div id="left"> <!-- Block gauche -->
		<table>
			<colgroup><col width="100"/></colgroup>
			<tbody>
				<tr><td></td></tr>
				<tr><td><div class="draggable">Messi</div></td></tr>
				<tr><td><div class="draggable">test</div></td></tr>
				<tr><td></td></tr>
				<tr><td></td></tr>
				<tr><td></td></tr>	
				<tr><td></td></tr>
				<tr><td></td></tr>
				<tr><td></td></tr>						
			</tbody>
		</table>				
	</div> <!-- Fin block gauche -->
	<div id="right"> <!-- Block droit -->
		<div class="trash">	</div>
		<table>
			<tbody>
				<tr>				
					<td><div id="joueur_1"></div></td>
					<td><div id="joueur_2"></div></td>
				</tr>
			</tbody>
		</table>
		<br>
		<table>
			<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
			<tbody>
				<tr>
					<td><div id="joueur_3"></div></td>
					<td><div id="joueur_4"></div></td>
					<td><div id="joueur_5"></div></td>
					<td><div id="joueur_6"></div></td>
				</tr>						
			</tbody>
		</table>
		<br>
		<table>
			<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
			<tbody>
				<tr>
					<td><div id="joueur_7"></div></td>
					<td><div id="joueur_8"></div></td>
					<td><div id="joueur_9"></div></td>
					<td><div id="joueur_10"></div></td>
				</tr>						
			</tbody>
		</table>
		<br>			
		<table>
			<colgroup><col width="100"/></colgroup>
			<tbody>
				<tr>
					<td><div id="joueur_11"></div></td>
				</tr>						
			</tbody>
		</table>
	</div> <!-- Fin block droit -->
</div> <!-- Fin div drag -->
 
<div style="clear:both;">&nbsp;</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-09-11T21:52:12.224+02:00" pubdate>2012-09-11T21:52:12.224+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
"use strict";
 
$(function(){
 
	$( ".draggable" ).draggable({
		scope : "dragNdrop",
		revert : "invalid",
		snap : ".droppable",
		snapMode : "inner",
		snapTolerance : 100
	});
 
	$( "[id^='joueur_']" )
		.append( '<div class="droppable" style="width:150px; height:150px; border:solid"></div>' )
		.droppable({
			scope : "dragNdrop",
			hoverClass : "joueur_survole",
			drop : function( event, ui ){
 
			/*
				Il me reste plus qu'à faire en sorte qu'une div drop 
				ne puisse accueillir qu'une seule div draggable.
			*/
				// bloque le droppable et le draggable
				// mais on ne peut plus changer d'avis !
				// http://jqueryui.com/demos/droppable/#method-disable
				$( this ).droppable( "disable" );
 
				// $.get( "js/deleteNews.php", { boite: this.id } );		
			}
		});
 
	$( ".trash" ).droppable({
		scope : "dragNdrop",
		drop: function( event, ui ){
			var idSup = $( ui.draggable ).text();
 
			$( this )
				.removeClass( "hover" )
				.addClass( "deleted" );
 
			//On supprime la ligne dans la base de donnée
			// $.get( "js/deleteNews.php", { idSup : idSup } );
 
			$( this ).text( " Joueur supprimé : " + idSup );
 
			// On supprime l’élément de la page, 
			// le setTimeout est un fixe pour IE 
			//(http://dev.jqueryui.com/ticket/4088)
			setTimeout( function(){
				ui.draggable.remove();
			}, 1 );
		}
	});
 
});
 
$(window).load(function(){
 
});
	</script>
</body>  
</html>

Evénement stop sur draggable position dans une div [UI]

jQuery

Discussions similaires

Partager

Partager