Drag constraint dans un div [Fait]

**calitom** · 18/02/2009, 14h11

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?

**calitom** · 18/02/2009, 15h15

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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!!

**le_chomeur** · 18/02/2009, 15h54

essaye ce script non intrusif : http://www.developpez.net/forums/d63...op-delimiteur/

**gwyohm** · 18/02/2009, 19h56

Tu mets dans la style de ton droppable (par css ou en inline)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
overflow:hidden;

**calitom** · 19/02/2009, 10h52

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?

**calitom** · 19/02/2009, 11h06

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...

**gwyohm** · 19/02/2009, 11h31

Sinon, tu peux définir la fonction snap :

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

**calitom** · 25/02/2009, 10h54

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 :

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
 
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?

Drag constraint dans un div [Fait]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager