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