ui.sortable sur plusieurs listes et évènement update

**marcha** · 26/06/2009, 18h20

Bonjour,

J'utilise ui.sortable pour trier des listes, ou pour passer des éléments d'une liste
à une autre.

Cas 1

Quand je passe un élément d'une liste à une autre, j'ai un premier update sur
la liste source, puis un receive sur la liste cible et un update sur la liste cible.

Dans ce deuxième update je peux voir que ui.sender est spécifié (et vaut la liste source)

Cas 2

Quand je déplace un élément au sein de la même liste, je n'ai qu'un update avec
un ui.sender NULL.

Comment distinguer lors du premier update si il s'agit du cas 1 ou du cas 2.
Dans les deux cas, lors du premier update, ui.sender est NULL

ui.item[0].parentNode est déjà fixé à la liste de destination

Le seul moyen que j'ai pour le moment c'est d'ajouter une info dans l'élément
sur l'évènement start contenant une référence à la liste source.

Quelqu'un a une solution propre ?

**danielhagnoul** · 27/06/2009, 00h32

Bonsoir.

J'ai construit un test.

Pour un déplacement dans la même liste j'obtiens un seul événement sur une seule liste comme il se doit :

update : id = sortable1, item = Item 5, sender = undefined

Pour un déplacement d'une liste à l'autre j'obtiens toujours trois événements sur la liste qui reçoit (aucun événement de la liste qui donne) :

update : id = sortable1, item = Item 1, sender = undefined

receive : id = sortable1, item = Item 1, sender = sortable2

update : id = sortable1, item = Item 1, sender = sortable2

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Tests sur listes sortables</title>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, 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;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			clear:both;
			margin:12px;
			border:1px solid #999999;
		}
		button#btn {
			clear:left;
			margin:12px;
		}		
		.sortable { list-style-type: none; margin: 0; padding: 0; width: 400px; float:left; margin-left:24px; margin-bottom:24px; }
		.sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
		.sortable li span { position: absolute; margin-left: -1.3em; }
	</style>
	<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			$("#sortable1").sortable({
				connectWith: '.connectedSortable',
				receive: function(event, ui) {
					$("#affiche").append("<p>receive : id = " + $(ui.item).parent()[0].id + ",  item = " + $(ui.item).text() + ",   sender = " + $(ui.sender)[0].id + "</p>");
				},
				update: function(event, ui) {
					$("#affiche").append("<p>update : id = " + $(ui.item).parent()[0].id + ",  item = " + $(ui.item).text() + ",   sender = " + $(ui.sender)[0].id + "</p>");
				}
			}).disableSelection();
 
			$("#sortable2").sortable({
				connectWith: '.connectedSortable',
				receive: function(event, ui) {
					$("#affiche").append("<p>receive : id = " + $(ui.item).parent()[0].id + ",  item = " + $(ui.item).text() + ",   sender = " + $(ui.sender)[0].id + "</p>");
				},
				update: function(event, ui) {
					$("#affiche").append("<p>update : id = " + $(ui.item).parent()[0].id + ",  item = " + $(ui.item).text() + ",   sender = " + $(ui.sender)[0].id + "</p>");
				}
			}).disableSelection();
 
			$("#btn").click(function(){
				$("#affiche").empty();
			});
 
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btn" type="button">Efface</button>
		<ul id="sortable1" class="sortable connectedSortable">
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
		</ul>
		<ul id="sortable2" class="sortable connectedSortable">
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
		</ul>
		<div id="affiche">
		</div>
	</div>
</body>
</html>

**marcha** · 27/06/2009, 11h33

merci de confirmer ce que j'ai déjà énoncé :-) mais je suis preneur
pour une solution aussi

**danielhagnoul** · 27/06/2009, 22h52

Bonsoir.

Dans mon test je montre comment récupérer toutes les infos disponibles, et l'intérêt de receive, comment faire mieux ?

ui.sortable sur plusieurs listes et évènement update

jQuery

Discussions similaires

Partager

Partager