DIV draggable avec div enfant > div parent

**mister-benoit** · 02/09/2014, 18h23

Bonjour

Je suis en train de créer un site web, et j'ai une carte qui est tréééés grande, donc je voudrais pouvoir la bouger à la souris (dans un div)

On m'a conseillé JQuery draggable, voici mon code :

Code html :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="../inc/js/jquery-ui.css">
<script src="../inc/js/external/jquery/jquery.js"></script>
<script src="../inc/js/jquery-ui.js"></script>
<script>

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
$(function() {
    var parentPos = $('#carte').offset();
    var childPos = $('#draggable').offset();
 
    $( "#draggable" ).draggable({
    drag: function(event, ui) {
        if (ui.position.top > parentPos.top) {
            ui.position.top = parentPos.top;
        }
        if (ui.position.left > parentPos.left) {
            ui.position.left = parentPos.left;
        }
    },
    scroll: false
});
  });

Code html :

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
</script>
</head>
<body>
	<p>
		<a href="<c:url value="../deconnexion" />">Déconnexion</a>
	</p>
	<p>
		Bonjour Capitaine <c:out value="${ membre.pseudo }" />, bienvenue à bord de votre vaisseau #<c:out value="${ vaisseau.id }" />. Quelles sont vos ordre ?
	</p>
 
 
	<div id="carte" style="width: 1000px; height: 700px; overflow: hidden; margin: auto;">
	<div id ="draggable" style="width: 4100px; height: 2500px;">
 
 
        </div>
        </div>
</body>
</html>

Sauf que j'ai un probléme : la carte peut sortir complètement du cadre !!!

Avez vous une solution, ou connaissez vous un autre moyen de faire ce que je veux faire ?

merci de vos réponses

Au passage je suis nouveau ici, je connais depuis longtemps developpez et je voudrais voir si la communauté est active

**ABCIWEB** · 02/09/2014, 18h49

Bonjour,

Il faudrait regarder du côté de http://jqueryui.com/draggable/#constrain-movement
Cliques sur view source et tu observeras qu'on peut définir "containment" ce qui pourrait peut-être t'aider.

**mister-benoit** · 02/09/2014, 18h52

J'ai déjà regardé mais justement ça ne marche que si l'élément enfant est plus petit que le parent.

**danielhagnoul** · 03/09/2014, 00h00

Bonsoir

Voici la seule solution que j'ai trouvée :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/sunny/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <script>
        $( function(){
            var limite = 50,
                widthCarte = $( "#carte" ).innerWidth() - limite,
                heightCarte = $( "#carte" ).innerHeight() - limite,
                widthDraggable = $( "#draggable" ).outerWidth() - limite,
                heightDraggable = $( "#draggable" ).outerHeight() - limite;
 
            $( "#draggable" ).draggable({
                "drag" : function( event, ui ){
                    if ( ( ui.position.top > heightCarte ) ||
                         ( ui.position.left > widthCarte ) ||
                         ( heightDraggable + ui.position.top <= 0 ) ||
                         ( widthDraggable + ui.position.left <= 0 )
                       ) return false;
                }
            });
        });
    </script>
    <style>
        #carte { width: 1000px; height: 700px; overflow: hidden; margin: auto; border:1px solid black; }
        #draggable { width: 4100px; height: 2500px; background-image: url("../images/imageTest.png"); }
    </style>
</head>
<body>
    <p>
        <a href="">Déconnexion</a>
    </p>
    <p>
        Bonjour Capitaine bienvenue à bord de votre vaisseau. Quelles sont vos ordre ?
    </p>
    <div id="carte">
        <div id ="draggable"></div>
    </div>
</body>
</html>

**mister-benoit** · 03/09/2014, 09h36

Merci de ta réponse

limite doit être égal à quoi ?

Car si je met 500 j'ai l'impression que seul la moitier de l'écran sort de l'écran, mais si je met 1000 ou 900 le draggable ne bouge carrément pas !

**danielhagnoul** · 03/09/2014, 10h06

C'est le nombre minimum de pixels qui doivent rester visible lorsqu'on fait glisser le "draggable" en dehors de la zone carte. Il me semble logique de ne pas dépasser 100px.

**mister-benoit** · 03/09/2014, 13h25

Envoyé par danielhagnoul

C'est le nombre minimum de pixels qui doivent rester visible lorsqu'on fait glisser le "draggable" en dehors de la zone carte. Il me semble logique de ne pas dépasser 100px.

Je ne comprend pas trop, moi je veux que la carte ne puisse pas sortir du cadre (je ne veux pas qu'il y ait de trou), donc je dois mettre 0 ?

**mister-benoit** · 03/09/2014, 18h38

merci ça marche en définissant 1000 à limite_width et 700 à limite_height

Il y a quelques soucis comme quoi si je suis au top de la map, et que j'emméne vers le haut (sa me bloque) je suis obligé de lacher le clic pour pouvoir dragger mais ça doit être résolvable en cherchant

merci pour tout !

**ABCIWEB** · 03/09/2014, 21h45

Salut,

Pas certain que cet effet de bord soit facile à résoudre.
Ci-dessous une autre méthode qui n'a pas cet inconvénient en créant un conteneur dynamiquement :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/sunny/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <script>
        $( function(){
 
			function draggContainOut(fenetre,draggable,left,top)
			{
				// oD -> objet draggable, fV -> fenêtre visible, cD -> content draggable créé dynamiquement
				var oD =  $(draggable),
					fV = $(fenetre);
 
				if(oD && fV)
				{
					  var oDHeight = oD.outerHeight(),
						oDWidth = oD.outerWidth(),
 
						fVHeight = fV.height(),
						fVWidth = fV.width(),
 
						cDHeight = 2*oDHeight - fVHeight,
						cDTop = oDHeight - fVHeight,
						cDWidth = 2*oDWidth - fVWidth,
						cDLeft = oDWidth - fVWidth,
 
						cD = $('<div class="contentDraggable" style="position:absolute;width:'+cDWidth+'px; height:'+cDHeight+'px;top:-'+cDTop+'px;left:-'+cDLeft+'px;"></div>');
 
						// si left ou top non renseigné, on centre l'élément dragué
						var g = left != undefined ? cDLeft - parseInt(left) : parseInt(cDLeft - oDWidth/2 + fVWidth/2);
						var t = top != undefined ? cDTop - parseInt(top) : parseInt(cDTop - oDHeight/2 + fVHeight/2);
 
						oD.wrap(cD);
 
						oD.css({'left':g+'px','top':t+'px'});
 
						oD.draggable({
						containment: fV.find(".contentDraggable")
						});
				}
			}
 
			/*draggContainOut(fenêtre visible, élément draggable, position initiale gauche, position initiale top)	
			si position gauche ou position top non renseignées la fonction centre l'élément dragué
			*/
 
			draggContainOut('#carte','#draggable');
       });
    </script>
    <style>
        #carte {
			position:relative; 
			width: 1000px; 
			height: 700px; 
			overflow: hidden; 
			margin: auto; 
			border:1px solid black;
			cursor:move 
	}
        #draggable { 
			/*Utiliser les troisième et quatrième arguments de la fonction draggContainOut pour positionner les positions left et top */
			width: 4100px; 
			height: 2500px; 
			position:absolute;
			background-image: url("../images/imageTest.png");
	}
    </style>
</head>
<body>
    <p>
        <a href="">Déconnexion</a>
    </p>
    <p>
        Bonjour Capitaine bienvenue à bord de votre vaisseau. Quelles sont vos ordre ?
    </p>
    <div id="carte">       
        <div id ="draggable"></div>    
    </div>
</body>
</html>

**mister-benoit** · 03/09/2014, 22h32

ABCIWEB merci !!!!!!
juste un truc : si je veux ajouter une bordure de 10px à #draggable, il faut que je rajoute +10 où ? (si je ne fais rien elle ne s'affiche pas quand je suis à un bout de la carte)

**ABCIWEB** · 03/09/2014, 22h40

Ben dans le css de #carte, genre

Code :

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

1
2
3
4
5
6
7
8
9
#carte {
position:relative; 
width: 1000px; 
height: 700px; 
overflow: hidden; 
margin: auto; 
border:10px solid black;// ici on défini le bord
cursor:move 
}

par contre je ne comprend pas ton message quand tu dis "si je ne fais rien elle ne s'affiche pas quand je suis à un bout de la carte"

**mister-benoit** · 03/09/2014, 22h46

non pas dans #carte, mais #draggable. C'est à dire qu'on voit la bordure quand on arrive à la fin du contenu draggable. si je rajoute :

Code :

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

1
2
3
4
5
6
7
8
#draggable { 
			/*Utiliser les troisième et quatrième arguments de la fonction draggContainOut pour positionner les positions left et top */
			width: 4080px; 
			height: 2550px; 
			position:absolute;
			border: 10px solid green;
 
	}

ça ne fait rien du tout

j'ai essayer aussi de le mettre dans .contentDraggable sauf que ça fait n'importe quoi

**ABCIWEB** · 03/09/2014, 22h57

Ah ok.

J'ai édité mon code, ça devrait fonctionner maintenant.

**ABCIWEB** · 03/09/2014, 23h21

Tien d'ailleurs en l'éditant je me suis aperçu qu'on pouvait facilement enlever la référence à la classe "contentDraggable" et donc pour éviter un hypothétique futur conflit avec d'autres codes on peut faire :

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
$( function(){
	function draggContainOut(fenetre,draggable,left,top){
		// oD -> objet draggable, fV -> fenêtre visible, cD -> content draggable créé dynamiquement
		var oD =  $(draggable),
		    fV = $(fenetre);
		if(oD && fV){
			var oDHeight = oD.outerHeight(),
			    oDWidth = oD.outerWidth(),
			    fVHeight = fV.height(),
			    fVWidth = fV.width(),
			    cDHeight = 2*oDHeight - fVHeight,
			    cDTop = oDHeight - fVHeight,
			    cDWidth = 2*oDWidth - fVWidth,
			    cDLeft = oDWidth - fVWidth,
			    cD = $('<div style="position:absolute;width:'+cDWidth+'px; height:'+cDHeight+'px;top:-'+cDTop+'px;left:-'+cDLeft+'px;"></div>');
			// si non renseigné, on centre l'élément dragué
			var g = left != undefined ? cDLeft - parseInt(left) : parseInt(cDLeft - oDWidth/2 + fVWidth/2);
			var t = top != undefined ? cDTop - parseInt(top) : parseInt(cDTop - oDHeight/2 + fVHeight/2);
			oD.wrap(cD);
			oD.css({'left':g+'px','top':t+'px'});
			oD.draggable({
				containment: oD.parent()
			});
		}
	}
	/*draggContainOut(fenêtre visible,élément draggable,position initiale gauche,position initiale top);
	si position gauche ou position top non renseignées la fonction centre l'élément dragué
	*/
	draggContainOut('#carte','#draggable');
});

**mister-benoit** · 04/09/2014, 10h18

merci

c'est parfait !

DIV draggable avec div enfant > div parent

jQuery

Discussions similaires

Partager

Partager