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.

DIV draggable avec div enfant > div parent

jQuery

Vue hybride

Discussions similaires

Partager

Partager