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![]()
Partager