UI Draggable et UI Sortable : bug lors du déplacement d'un élément draggable

**Sayrus** · 02/09/2010, 16h10

Bonjour,

J'ai découvert un petit bug bien génant avec Jquery lorsque l'on utilise un élément draggable que l'on souhaite déposer dans 2 listes sortable.

Si j'ai une #liste1 connecté avec plusieurs listes ".listes" via connectToSortable et que je clic sur un élément de ma liste1 pour le déplacer, grâce à "containment:true", l'objet se place directement pendant la phase de "drag" au dessus de ma ".listes".

Cependant, si j'ai plusieurs ".listes" et que je passe avec mon objet (toujours pendant la phase de "drag") par dessus, l'objet reste sur la premier ".listes" qu'il rencontre...

Mais quand je dépose mon élement dans la deuxième liste, il se place tout de même bien dans la liste que je souhaite...

C'est simplement un "bug" visuel pas très pratique et je souhaiterais savoir si il y avait un moyen de résoudre ce problème?

Un grand merci!

**danielhagnoul** · 03/09/2010, 11h11

Bonjour

Je viens de tester l'exemple ci-dessous sur C6, F4 et IE8 sans rencontrer le problème que vous décrivez.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.4.custom.css">	
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#sortable1, #sortable2, #sortable3 {
			list-style-type: none;
			margin: 0;
			padding: 0;
			float: left;
			margin-right: 10px;
		}
		#sortable1 li, #sortable2 li, #sortable3 li {
			margin: 0 5px 5px 5px;
			padding: 5px;
			font-size: 1.2em;
			width: 120px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.4.custom.min.js"></script>
 	<script>
		$(function(){
			$("#sortable1, #sortable2, #sortable3").sortable({
				connectWith: '.connectedSortable'
			}).disableSelection();
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<ul id="sortable1" class="connectedSortable">
			<li class="ui-state-default">Item 10</li>
			<li class="ui-state-default">Item 11</li>
			<li class="ui-state-default">Item 12</li>
			<li class="ui-state-default">Item 13</li>
			<li class="ui-state-default">Item 14</li>
		</ul>
 
		<ul id="sortable2" class="connectedSortable">
			<li class="ui-state-highlight">Item 20</li>
			<li class="ui-state-highlight">Item 21</li>
			<li class="ui-state-highlight">Item 22</li>
			<li class="ui-state-highlight">Item 23</li>
			<li class="ui-state-highlight">Item 24</li>
		</ul>
 
		<ul id="sortable3" class="connectedSortable">
			<li class="ui-state-highlight">Item 30</li>
			<li class="ui-state-highlight">Item 31</li>
			<li class="ui-state-highlight">Item 32</li>
			<li class="ui-state-highlight">Item 33</li>
			<li class="ui-state-highlight">Item 34</li>
		</ul>
 
		<div id="affiche"></div>
	</div>
</body>  
</html>

**Sayrus** · 07/09/2010, 15h20

Bonjour,

Merci pour votre intervention et désolé pour ma réponse tardive...

Je viens de tester votre exemple.

Effectivement ainsi ça fonctionne très bien sauf que dans mon cas, la première colonne est une colonne où la liste n'est pas sortable. Chaque li de cette première liste peut être glissé en drag and drop dans une des 2 autres listes sans jamais disparaitre de sa liste initiale (donc mode "clone").

C'est à ce moment là quand le "drag" démarre que l'élément apparait uniquement dans la première liste qu'il rencontre (attention: il faut cependant ajouter "containment")

C'est la que l'on peut constater un bug lorsque l'on déplace (toujours pendant le "drag" l'élément de liste "li" sur la deuxième liste que le bug se produit.

J'ai modifié votre code pour que vous puissiez voir par vous même le bug:

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.4.custom.css">	
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#sortable1, #sortable2, #sortable3 {
			list-style-type: none;
			margin: 0;
			padding: 0;
			float: left;
			margin-right: 10px;
		}
		#sortable1 li, #sortable2 li, #sortable3 li {
			margin: 0 5px 5px 5px;
			padding: 5px;
			font-size: 1.2em;
			width: 120px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.4.custom.min.js"></script>
 	<script>
		$(function(){
			$("#sortable2, #sortable3").sortable({
 
			})
			$("#sortable1 li").draggable({ connectToSortable: '.connectedSortable', containment:'.connectedSortable',  helper: 'clone'});
 
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<ul id="sortable1">
			<li class="ui-state-default">Item 10</li>
			<li class="ui-state-default">Item 11</li>
			<li class="ui-state-default">Item 12</li>
			<li class="ui-state-default">Item 13</li>
			<li class="ui-state-default">Item 14</li>
		</ul>
 
		<ul id="sortable2" class="connectedSortable">
			<li class="ui-state-highlight">Item 20</li>
			<li class="ui-state-highlight">Item 21</li>
			<li class="ui-state-highlight">Item 22</li>
			<li class="ui-state-highlight">Item 23</li>
			<li class="ui-state-highlight">Item 24</li>
		</ul>
 
		<ul id="sortable3" class="connectedSortable">
			<li class="ui-state-highlight">Item 30</li>
			<li class="ui-state-highlight">Item 31</li>
			<li class="ui-state-highlight">Item 32</li>
			<li class="ui-state-highlight">Item 33</li>
			<li class="ui-state-highlight">Item 34</li>
		</ul>
 
		<div id="affiche"></div>
	</div>
</body>  
</html>

ICI, c'est même pire... Impossible d'ajouter l'élément dans la dernière colonne (chez moi dans mon code ça marche mais ça fait le même effet "bug" lors du drag & drop)

**danielhagnoul** · 07/09/2010, 21h34

Bonsoir

Oui le cas est différent. Voici un exemple qui, je crois, répond à votre demande.

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
136
137
138
<!doctype html>
<html lang="fr">
<head>
       <meta charset="utf-8">
       <meta name="Author" content="Daniel Hagnoul">
       <title>Forum jQuery</title>
       <link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.4.custom.css">
       <style>
            /* BASE */
            body {
                background-color:#dcdcdc;
                color:#000000;
                font-family:sans-serif;
                font-size:medium;
                font-style:normal;
                font-weight:normal;
                line-height:normal;
                letter-spacing:normal;
            }
            h1,h2,h3,h4,h5 {
                font-family:serif;
            }
            div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                margin:0px;
                padding:0px;
            }
            p {
                padding:6px;
            }
            ul,ol,dl {
                list-style:none;
                padding-left:6px;
                padding-top:6px;
            }
            li {
                padding-bottom:6px;
            }
 
            /* dvjh */
            h1 {
                text-align:center;
                font-style:italic;
                text-shadow: 4px 4px 4px #bbbbbb;
            }
            div#conteneur {
                width:95%;
                height:auto;
                margin:12px auto;
                padding:6px;
                background-color:#FFFFFF;
                color:#000000;
                border:1px solid #666666;
            }
            div#affiche {
                clear:both;
                margin:12px;
                padding:6px;
                border:1px solid #999999;
                background-color:#FFFFFF;
                color:#000000;
            }
 
            /* TEST */
            #sortable1, #sortable2 {
                list-style-type: none;
                margin: 0;
                padding: 0;
                float: left;
                margin-right: 10px;
            }
            #sortable1 li, #sortable2 li {
                margin: 0 5px 5px 5px;
                padding: 5px;
                font-size: 1.2em;
                width: 120px;
            }
            #draggable {
                list-style-type: none;
                margin: 0;
                padding: 0;
                float: left;
                margin-right: 10px;
            }
            #draggable li {
                margin: 0 5px 5px 5px;
                padding: 5px;
                font-size: 1.2em;
                width: 120px;
            }
       </style>
       <script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
       <script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.4.custom.min.js"></script>
       <script>
        $(function(){
			$("#sortable1, #sortable2").sortable({
				connectWith: '.connectedSortable'
			}).disableSelection();
 
            $("#draggable li").draggable({
                connectToSortable: '#sortable1, #sortable2',
                helper: 'clone',
                revert: 'invalid'
            }).disableSelection();
        });
    </script>
</head>
<body>
    <h1>Forum jQuery</h1>
    <div id="conteneur">
 
        <ul id="draggable">
                <li class="ui-state-default">Item 10</li>
                <li class="ui-state-default">Item 11</li>
                <li class="ui-state-default">Item 12</li>
                <li class="ui-state-default">Item 13</li>
                <li class="ui-state-default">Item 14</li>
        </ul>
 
        <ul id="sortable1" class="connectedSortable">
                <li class="ui-state-highlight">Item 20</li>
                <li class="ui-state-highlight">Item 21</li>
                <li class="ui-state-highlight">Item 22</li>
                <li class="ui-state-highlight">Item 23</li>
                <li class="ui-state-highlight">Item 24</li>
        </ul>
 
        <ul id="sortable2" class="connectedSortable">
                <li class="ui-state-highlight">Item 30</li>
                <li class="ui-state-highlight">Item 31</li>
                <li class="ui-state-highlight">Item 32</li>
                <li class="ui-state-highlight">Item 33</li>
                <li class="ui-state-highlight">Item 34</li>
        </ul>
 
        <div id="affiche"></div>
    </div>
</body>
</html>

**Sayrus** · 08/09/2010, 10h33

Effectivement cela fonctionne! par contre je n'ai pas eu l'occasion d'appliquer sur mon code...

je suppose que c'est l'ajout de "connectWith: '.connectedSortable'" qui a résolu le problème?

En tout cas merci pour votre aide, j'apprécie!

**danielhagnoul** · 08/09/2010, 21h38

Bonsoir

Envoyé par Sayrus

je suppose que c'est l'ajout de "connectWith: '.connectedSortable'" qui a résolu le problème?

Je crois qu'il s'agit de l'ensemble du script et plus particulièrement de :

Code :

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

connectToSortable: '#sortable1, #sortable2',

**Sayrus** · 13/09/2010, 09h46

Je viens enfin de vérifier...

En fait, c'est "containment" qui joue et non "connectToSortable" ou encore "connectWith" comme on pensait...

Pour que l'effet ne "bug" pas, il faut utiliser comme dans l'exemple les ID de telle manière:

containment:'#sortable1, #sortable2'

Si maintenant et toujours en me basant sur le code ci-dessus je veux utiliser

containement:'.connectToSortable'

Alors, ça fonctionne techniquement parlant mais il y a un bug d'affichage où l'élément pendant le "drag" reste emprisonné dans le premier ".connectToSortable" rencontré. (Ici connectToSortable est le nom de la classe, ça aurait pu être par exemple ".sortables" on est bien d'accord

)

Peut être y aura-t-il un fix à la prochaine version de JQuery... Wait & See

UI Draggable et UI Sortable : bug lors du déplacement d'un élément draggable

jQuery

Discussions similaires

Partager

Partager