JQuery draggable et scroll

**thebestfriend** · 02/02/2012, 10h43

Bonjour,

J'ai un petit soucis de "drag" avec un scroll en javascript (jQuery).
Lorsque je déplace ma div "draggable" vers le bas, et que la page commence à scroller, mon élément disparaît de la souris, et ce retrouve hors du cadre (alors qu'il n'est pas censé en sortir) tout en bas de la page. Et quand je veux le rebouger, il disparaît complètement.

Voici le code

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#draggable").draggable({
					containment: "#divMepWF",
					cursor: "move",
					scroll: true
				});
			});
		</script>
		<style type="text/css">
			.DIV_INPUT	{font-size: 8pt; color: #101010; background-color: #CCCCCC; height: 16px; width: 126px; border: 1px solid #1A739D;}
		</style>
	</head>
	<body>
		<div id="divMepWF" style="position: relative; width: 400px; height: 4000px; border: 1px solid red;">
			<div id="draggable" class="DIV_INPUT"></div>
		</div>
	</body>
</html>

Est-ce un bug de la fonction draggable ? Quelqu'un a t'il déjà rencontré le même problème ? Y a t'il une solution ?

Testé sous IE8, IE9 et Chrome 16

Merci.

**danielhagnoul** · 02/02/2012, 11h57

Bonjour

Je viens de tester, manifestement ce "scroll" n'est pas au point !

**thebestfriend** · 02/02/2012, 14h51

Merci pour ta réponse.

En cherchant sur le net, j'ai l'impression que ce problème existe depuis plus de 3 ans (ou du moins ça y ressemble) :S
http://bugs.jqueryui.com/ticket/3568

Est-il possible de remédier à ce problème (en conservant le principe du scroll)?
Existe t'il un autre plug-in que jQueryUI (pas forcement officiel) qui ferait la même chose (mais en mieux

) ?

Merci

**SpaceFrog** · 02/02/2012, 15h01

http://archive.plugins.jquery.com/pr...Dragscrollable
mais il n'a pas l'air de mieux tourner ...

**thebestfriend** · 02/02/2012, 15h43

C'est pas vraiment ce que je cherche à faire!

Ce que je veux, c'est placer des éléments div (de la taille d'un champ de saisie par exemple) dans une div conteneur, en utilisant la fonction de draggable.
La div conteneur peut avoir n'importe quelle hauteur. Et lorsque je déplace une élément dans le conteneur vers le bas, celui-ci devrait "scroller" automatiquement.
C'est ce qu'est censé faire la fonction "draggable" de jQueryUI, mais elle ne fonctionne pas correctement

**SpaceFrog** · 02/02/2012, 16h01

http://forum.jquery.com/topic/jquery...verflow-scroll

**SpaceFrog** · 02/02/2012, 16h06

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d
sur cet exemple lorsque je reduis la hauteur de la fenetre de sorte a avoir du scroll sur le div de destination il scrolle ...

le code http://stackoverflow.com/questions/2...099100#2099100

**danielhagnoul** · 02/02/2012, 22h19

Bonsoir

Le comportement est meilleur avec une zone droppable, mais au niveau du "scroll" on risque de dérouter l'utilisateur.

Code :

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

1
2
3
4
5
6
7
8
9
10
$( "#divMepWF" ).droppable({
	accept: "#draggable"
});
 
$("#draggable").draggable({
	appendTo: "#divMepWF",
	revert: "invalid",
	cursor: "move",
	scroll: true
});

**thebestfriend** · 03/02/2012, 09h26

J'ai trouver un solution qui permet de "contourner" le problème du scroll.
Lorsque l'on ajoute l'option "helper : 'clone'", celui-ci créer un clone de l'élément draggable, et ce clone n'a pas de soucis de scroll lorsqu'on le bouge vers le bas (aller savoir pourquoi

).

Voici le code que j'utilise:

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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				dragObject("draggable");
			});
 
			function dragObject(ident) {
				$("#"+ident).draggable({
					containment: "#divMepWF",
					scroll: true,
					scrollSpeed: 100,
					helper: "clone",
					start: function(event, ui) {
						//Lorsque l'on commence à déplacer le clone, on cache l'objet principal
						$(this).hide();
					},
					stop: function(event, ui) {
						//Lorsqu'on relache le clone, on supprimer l'objet principal.
						$(this).remove();
						//on met l'id de l'objet principal sur le cloné
						$(ui.helper).attr("id", ident);
						//On lui applique la fonction draggable
						dragObject(ident);
						//On ajoute le clone dans la div conteneur (sinon il disparait ^^)
						ui.appendTo($("#divMepWF"));
					}
				});
			}
		</script>
		<style type="text/css">
			.DIV_INPUT	{font-size: 8pt; color: #101010; background-color: #CCCCCC; height: 16px; width: 126px; border: 1px solid #1A739D;}
		</style>
	</head>
	<body>
		<div id="divMepWF" style="position: relative; width: 400px; height: 4000px; border: 1px solid red;">
			<div id="draggable" class="DIV_INPUT">test</div>
		</div>
	</body>
</html>

J'espère qu'il sera utilie à quelqu'un

Encore merci à tous pour votre réactivité et votre aide !

**danielhagnoul** · 03/02/2012, 11h17

Bonjour

C'est un appel récursif, c'est une boucle sur $("#"+ident).draggable( ... ) à l'infini !

[Edit]

En combinant les efforts, je crois que je suis arrivé à quelque chose qui fonctionne correctement :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:200rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* --- */
 
		.divInput { /* il faut une classe, ne fonctionne pas avec #draggable */
			position: relative;
			background-color: #CCCCCC;
			height: 16px; 
			width: 126px;
			border: 1px solid #1A739D;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="draggable" class="divInput"></div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-02-03T12:07:32.000+01:00" pubdate>2012-02-03</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.2b1.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* -- */
 
			$("#draggable").draggable({
				appendTo: "body",
				containment: "section.conteneur",
				cursor: "move",
				scroll: true,
				scrollSpeed: 100,
				helper: "clone",
				start: function( event, ui ) {
					$( this ).hide();
				},
				stop: function( event, ui ) {
					$( this ).css({
						"position" : "absolute",
						"left" : ui.offset.left,
						"top" : ui.offset.top
					}).show();
				}
			});
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
	</script>
</body>  
</html>

**StefW2b** · 09/03/2013, 08h24

Envoyé par thebestfriend

J'ai trouver un solution qui permet de...
Lorsque l'on ajoute l'option "helper : 'clone'", celui-ci créer un clone de l'élément draggable...
J'espère qu'il sera utilie à quelqu'un

Ohhh que oui ça m'a aidé

Un grand merci à toi et aux forums

Je bataillais depuis 24h avec mon clone, et je commençais à désespérer

Même si mon problème était différent du tien, ta solution m'a permis non seulement de le résoudre... et en plus de mieux comprendre comment fonctionne les clones

Nickel, encore merci !

JQuery draggable et scroll

jQuery

Discussions similaires

Partager

Partager