DIV draggable avec div enfant > div parent

Version imprimable

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:

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:

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:

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 :)

02/09/2014, 18h49
ABCIWEB

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.
02/09/2014, 18h52
mister-benoit

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

Bonsoir

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

Code:

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>

03/09/2014, 09h36
mister-benoit

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 !
03/09/2014, 10h06
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.
03/09/2014, 13h25
mister-benoit

Citation:

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 ?
03/09/2014, 18h38
mister-benoit

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 !

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:

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>

03/09/2014, 22h32
mister-benoit

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)
03/09/2014, 22h40
ABCIWEB
Ben dans le css de #carte, genre
Code:

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"

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:

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

03/09/2014, 22h57
ABCIWEB

Ah ok.

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

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:

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');
});

04/09/2014, 10h18
mister-benoit

merci :D:D:D
c'est parfait !