JQuery draggable et scroll [Résolu]

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>

02/02/2012, 15h01	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 076 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 076 Points : 45 211 Points : 45 211	http://archive.plugins.jquery.com/pr...Dragscrollable mais il n'a pas l'air de mieux tourner ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/02/2012, 16h06	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 076 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 076 Points : 45 211 Points : 45 211	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/02/2012, 11h57	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonjour Je viens de tester, manifestement ce "scroll" n'est pas au point ! __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

02/02/2012, 14h51	#3
thebestfriend Invité de passage Inscription : décembre 2007 Messages : 8 Détails du profil Informations forums : Inscription : décembre 2007 Messages : 8 Points : 1 Points : 1	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
	00

02/02/2012, 15h43	#5
thebestfriend Invité de passage Inscription : décembre 2007 Messages : 8 Détails du profil Informations forums : Inscription : décembre 2007 Messages : 8 Points : 1 Points : 1	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
	00

02/02/2012, 16h01	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 076 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 076 Points : 45 211 Points : 45 211	http://forum.jquery.com/topic/jquery...verflow-scroll __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email