Drag Maps Le parent bouge aussi

stade13 · 29/10/2011, 14h14

Bien le bonjour à tous,

J'ai un souci avec mes deux div, en gros voilà

Code :

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

1
2
3
4
<div id="fenetrePrincipale">
<div id="laBare"></div>
<div id="laMap"></div>
</div>

Je peux faire un drag sur la map et le problème c'est que ainsi sur la fenetrePrincipale, mais le souci quand je fais un drag sur ma map y a toute la fenêtre qui se déplace. donc voila j'aimerai bien que la fentrePrincipale reste fixe quand je fais un drag sur la map

Merci

danielhagnoul · 29/10/2011, 21h03

Bonsoir

UI Draggable : http://jqueryui.com/demos/draggable/

C'est un peu court comme exemple de code pour travailler sur votre problème.

Si l'on déplace le parent, il est normal que les enfants suivent, mais pas l'inverse. Voici un exemple :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* -- */
		#draggable1 { width: 150px; height: 150px; padding: 0.5em; }
		#draggable2 { width: 80px; height: 80px; padding: 0.5em; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="draggable1" class="ui-widget-content">
			<p>Drag me around</p>
 
			<div id="draggable2" class="ui-widget-content">
				<p>Drag me around</p>
			</div>
 
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-10-29T21:00:00.000+02:00" pubdate>2011-10-29</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7rc1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		$(function(){
			/* -- */
			$( "#draggable1" ).draggable();
			$( "#draggable2" ).draggable();
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>

stade13 · 29/10/2011, 21h41

Dans se cas là que dois-je faire ?

danielhagnoul · 30/10/2011, 01h02

Vous avez copier-coller et testé ?

stade13 · 30/10/2011, 01h13

Citation:

Envoyé par danielhagnoul

Vous avez copier-coller et testé ?

Code :

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

1
2
3
4
5
 $("#laMap").draggable({
 
 $("#fenetrePrincipale").stop();
 
});

mais une erreur

missing : after property id
[Stopper sur une erreur] $("#fenetrePrincipale").stop();

30/10/2011, 01h02	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Vous avez copier-coller et testé ? __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

29/10/2011, 21h41	#3
stade13 Futur Membre du Club Etudiant Inscription : octobre 2011 Messages : 80 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Etudiant Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : octobre 2011 Messages : 80 Points : 18 Points : 18	Dans se cas là que dois-je faire ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email