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

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();

Drag Maps Le parent bouge aussi

jQuery

Vue hybride

Discussions similaires

Partager

Partager