Drag constraint dans un div

Version imprimable

18/02/2009, 14h11
calitom

Drag constraint dans un div

Bonjour,

Y a t'il un moyen de contraindre un drag dans un div?
J'arrive à le contraindre soit en largeur, soit en hauteur, mais je voudrais qu'il ne puisse pas sortir du div conteneur...

Comment puis je faire?

La librairie tool-man permet de faire ce que je veux, mais je ne peux pas l'inclure si j'ai déjà la librairie prototype, cela crée un conflit entre les deux librairies...

Voici la fonction permettant de contraindre un element draggable dans un cadre de [x1,y1](coin haut gauche) [x2,y2](coin bas droit):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ToolMan._dragFactory._constraintFactory = { vertical : function() { return function(coordinate, dragEvent) { var x = dragEvent.topLeftOffset.x return coordinate.x != x ? coordinate.factory.create(x, coordinate.y) : coordinate } }, horizontal : function() { return function(coordinate, dragEvent) { var y = dragEvent.topLeftOffset.y return coordinate.y != y ? coordinate.factory.create(coordinate.x, y) : coordinate } } }
Comment pourrais je utiliser cette fonction pour mon cas?

J'ai essayé ceci, mais ca ne marche pas:
Code:

1 2 3 4 5 6 7 8 9 var mydrag = new Draggable('drag', { constraint:contr,change:contraindre}); function contraindre() { if(document.getElementById('drag').style.top<document.getElementById('conteneur_drag').style.top) { document.getElementById('drag').style.top=document.getElementById('conteneur_drag').style.top; } }
Une idée? Parce que la je galère un peu!!

18/02/2009, 15h54
le_chomeur

essaye ce script non intrusif : http://www.developpez.net/forums/d63...op-delimiteur/
18/02/2009, 19h56
gwyohm
Tu mets dans la style de ton droppable (par css ou en inline)
Code:

1 2 overflow:hidden;
19/02/2009, 10h52
calitom

J'ai essayé, de mettre overflow hidden dans le style de mon div conteneur, mais ca ne marche pas...

Pourquoi est ce que tu parles de drop alors que je n'utilise que le drag?
19/02/2009, 11h06
calitom

En mettant mon div draggable en position relative, ca marche, mais ce n'est pas ce que je veux...

Je veux que le div ne puisse pas sortir du div conteneur...
Avec l'overflow, il passe derrière le contenu de la page, donc il sort du div conteneur...

Je vais essayer en partant du script du chomeur...

Sinon, tu peux définir la fonction snap :

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
 
<html>
<head>
<title>Tests...</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("prototype", "1.6.0.3");
	google.load("scriptaculous", "1.8.2");
</script>
</head>
<body>
<div id="container" style="float:left;width:500px;height:500px;border:1px solid black;">
	<div id="drag" style="float:left;width:100px;height:100px;background-color:green;"></div>
</div>
<script type="text/javascript">
	var container = $("container");
	var containerPos = container.cumulativeOffset();
	var containerDim = container.getDimensions();
	var minLeft = containerPos.left;
	var maxLeft = minLeft + containerDim.width;
	var minTop = containerPos.top;
	var maxTop = minTop + containerDim.height;
	var dragDim = $("drag").getDimensions();
	new Draggable("drag", {snap:
		function (x, y) {
			var xy = [x, y];
			if(x < minLeft) {
				xy[0] = minLeft;
			}
			if(x + dragDim.width > maxLeft) {
				xy[0] = maxLeft - dragDim.width;
			}
			if(y < minTop) {
				xy[1] = minTop;
			}
			if(y + dragDim.height > maxTop) {
				xy[1] = maxTop - dragDim.top;
			}
			return xy;
		}
	});
</script>
</body>
</html>

J'ai testé ton code, j'ai vu que le div etait contraint, mais en essayant de l'appliquer au mien, ca ne marche pas...

Voici mon code:

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
 
function active_Slide()
{
                var container = document.getElementById('conteneur_drag');
		var minLeft = calculeOffsetLeft(container);
		var maxLeft = minLeft + container.offsetWidth;
		var minTop = calculeOffsetTop(container);
		var maxTop = minTop + container.offsetHeight;
		var draglarg = document.getElementById('drag').offsetWidth;
		var draghaut = document.getElementById('drag').offsetHeight;
		var mydrag = new Draggable('drag', { snap:
		function (x, y) {
			var xy = [x, y];
			if(x < minLeft) {
				xy[0] = minLeft;
			}
			if(x + draglarg > maxLeft) {
				xy[0] = maxLeft - minLeft;
			}
			if(y < minTop) {
				xy[1] = minTop;
			}
			if(y + draghaut > maxTop) {
				xy[1] = maxTop - minTop;
			}
			return xy;
		}});
}

Code:

1
2
3
4
5
 
<div id='conteneur_drag' width='400'>
<div style='position:absolute; width:400px; height:400px; background:#7baaed; border:1px solid #333;' id='drag' onClick=active_Slide();></div>
<img width='400' src='../monimage.jpg'>
</div>

Une idée?

Ca ne marche pas du tout ou ca marche mal ?
Code:

1 2 3 4 5 <div id='conteneur_drag' width='400'> <div style='position:absolute; width:400px; height:400px; background:#7baaed; border:1px solid #333;' id='drag' onClick=active_Slide();></div> <img width='400' src='../monimage.jpg'> </div>
Ton conteneur et ton drag ont la même largeur ? ton conteneur a vraiment une largeur (parce que width='400', je pense pas que ca marche...
Pourquoi créer le drag qu'au click ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function (x, y) { var xy = [x, y]; if(x < minLeft) { xy[0] = minLeft; } if(x + draglarg > maxLeft) { xy[0] = maxLeft - minLeft; } if(y < minTop) { xy[1] = minTop; } if(y + draghaut > maxTop) { xy[1] = maxTop - minTop; } return xy; }
Il faut utiliser draglarg et draghaut Non ?

19/02/2009, 15h37
calitom

En fait je crois que je dois avoir un conflit avec une autre librairie...

En fait je travail dans une page qui est incluse dans l'ossature de mon site...

En gros si je teste dans la page, sans l'ossature du site, ca marche...

Mais si je test en faisant l'include de ma page dans le fichier index avec l'ossature de mon site ca ne marche plus...

C'est horrible!

Je trouve pas le truc qui fait que ca plante!!

Il y a bien juste besoin de prototype et scriptaculous?
19/02/2009, 15h46
gwyohm

Pour utiliser la classe Dragable de scriptaculous, oui

J'ai réussi a contraindre le div dans une zone, mais maintenant le div draggable se positionne par rapport au div conteneur (x=320 y=205), et non par rapport au coin de la page (x=0 y=0)...

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
 
var container = $("conteneur_drag");
		var containerPos = container.cumulativeOffset();
		var containerDim = container.getDimensions();
		var minLeft = containerPos.left;
		var maxLeft = minLeft + containerDim.width;
		var minTop = containerPos.top;
		var maxTop = minTop + containerDim.height;
 
		var dragDim = $("drag").getDimensions();
		new Draggable("drag", {snap:
		function (x, y) {
			var xy = [x, y];
			if(x < minLeft) {
				xy[0] = minLeft;
			}
			if(x + dragDim.width > maxLeft) {
				xy[0] = maxLeft - dragDim.width;
			}
			if(y < minTop) {
				xy[1] = minTop;
			}
			if(y + dragDim.height > maxTop) {
				xy[1] = maxTop - dragDim.height;
			}
			return xy;
		}
		});

D'où ca peut venir?