Discussion :

[Merfolk]

Bonjour,
je veux faire deux listes liées entre elles, avec jquery, comme sur cette démo
http://dev.jquery.com/view/tags/ui/l...l/#ui.sortable

une liste "disponibles", une autre "sélectionnes"

mais voilà, 2 soucis : sortable ne semble pas marcher si une liste (un tag html <ul>) ne contient pas au moins un <li>
- bref problème au début
- et problème si on drag & drop tout

Comment s'y prendre ?

j'essaye de rajouter un élément bidon au début <li></li>, mais il se voit à l'affichage, et peut être déplacé aussi ! Donc ce n'est pas génial

merci

[Nimothenicefish]

Je rencontre le même problème :/ . Tu as trouvé une solution ?
J'aimerais aussi pouvoir déplacer un element d'une liste à une autre tout en gardant cet élément dans la 1ere liste et aussi supprimer un element d'une liste en le déplacant dans une zone bien précise (une zone "déplacer ici pour supprimer l'element" par exemple)
Débutant dans ce domaine là je ne trouve pas encore comment m'y prendre.
Quelqu'un pourrait me mettre sur la voie ?

Merci

Cordialement, Nimo

[Merfolk]

salut
désolé réponse tardive,

non je n'ai pas trouvé de solution, j'ai laissé tombé
je re-tenterais dans 6 mois

[Kerod]

Pourquoi attendre 6mois ??

Si je comprends bien le problème, c'est que dès qu'une liste est vide on peut plus rien déplacer. Dans ce cas pourquoi ne pas tester si la liste est vide à chaque déplacement et si on voit que c'est le cas on y ajoute un li à display:none;

Tant qu'à faire pourquoi ne pas le mettre dès le départ, ça évitera les manipulations inutiles

[Merfolk]

hello,

(grr la page démo n'existe plus)

euh je n'ai absolument aucune idée de comment faire ça...jquery gère tout seul

tout ce que tu fais c'est

Code :

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

1
2
3
4
5
6
7
8
 
 
  $("#myList1").sortable({  connectWith myList2 });
  $("#myList2").sortable({  connectWith myList1 });
 
// après ça marche tout seul...
 
  puis $("#myList1").serialize();  pour avoir les id avant un form submit...

maintenant s'il faut s'intercaller et rajouter 10 000 verifs "en évenements callback"
-ça dépasse de loin des connaissances
-si on utilise une lib comme ça, c'est justement pour pas avoir à faire ce genre de trucs

[Kerod]

Pas besoin de vérifier si l'élément ne peut être déplacer vu qu'il n'est pas visible

[Merfolk]

tiens je viens de me réveiller effectivement vu comme ça
je teste et je repasse


ça ne marche pas
dès qu'il n y a plus d'éléments dans la liste je n'arrive plus à interagir avec

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
 
 
<style>
.sortable-container li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	list-style: circle;
	background: #EAEAEA;
	font-size: 12px;
	margin:2px;
	padding: 3px;
	width: 100px
</style>
 
<script type="text/javascript" src="jquery-1.2.6.js"></script>		
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.sortable.js"></script>
 
<div class="sortable-container"> 
 
    <div id="example1"> 
 
        <button onclick="$('#selectedUsers').sortable('enable')">Enable</button> 
        <button onclick="$('#selectedUsers').sortable('disable')">Disable</button> 
        <button onclick="alert($('#selectedUsers').sortable('serialize'))">Serialize!</button> 
        <button onclick="alert($('#selectedUsers').sortable('toArray'))">ID's to Array!</button> 
 
        <br><br> 
 
        <div id="sortable-ex" style="min-height: 110px; min-height:110px; height: auto !important;"> 
 
            <div style="float: left;"> 
                Selected users 
                <ul id="selectedUsers" style="cursor: hand; cursor: pointer;">
                    <li id='user_NONE' style="display:none">DSFLSDFLMDMFSDLMF</li>  
                    <li id='user_Susan'>Susan</li> 
                    <li id='user_Beth'>Beth</li> 
                    <li id='user_Bob'>Bob</li> 
                    <li id='user_Edward'>Edward</li> 
                    <li id='user_Kate'>Kate</li> 
                </ul> 
            </div> 
 
            <div style="float: left; margin-left: 50px;"> 
                User list 
                <ul id="userList" style="cursor: hand; cursor: pointer;"> 
                    <li id='user_NONE2' style="display:none">DSFLSDFLMDMFSDLMF</li>  
                    <li id='user_Jack'>Jack</li> 
                    <li id='user_John'>John</li> 
                    <li id='user_Marry'>Marry</li> 
                    <li id='user_Claire'>Claire</li> 
                    <li id='user_Daniel'>Daniel</li> 
                </ul> 
            </div> 
 
            <br style="clear: both;"> 
 
        </div> 
    </div> 
</div>
 
 
 
<script>
$("#selectedUsers").sortable({ 
    connectWith: ["#userList"]
}); 
$("#userList").sortable({ 
    connectWith: ["#selectedUsers"] 
});
</script>

[Kerod]

Alors j'ai testé de mon côté et mon idée n'est pas superflue

Mais finalement le problème ne vient pas du nombre d'éléments de la liste mais de la liste elle-même. Instinctivement, une personne voyant ce genre de choses aurait pour première idée de déplacer l'élément n'importe où à gauche et là normal que ça fonctionne pas

Un développeur lui se dirait qu'il faut déplacer directement sur la liste de gauche et là il verrait que ce n'est pas possible non plus. Maintenant pourquoi ?

Tout simplement parce que la liste vidée de tout ses éléments n'existe plus.
Mon idée est de tout faire dans le CSS

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
  <title></title>
  <style type="text/css">
.sortable-container ul
{
    height:auto !important; /* Attribue une hauteur auto sous FF */
    height:200px;           /* Une hauteur fixe pour IE qui s'adaptera en fonction du contenu */
    min-height:200px;       /* Une hauteur min pour FF */
    width:auto !important;
    width:200px;
    min-width:200px;
}
.sortable-container li
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    list-style: circle;
    background: #EAEAEA;
    font-size: 12px;
    margin:2px;
    padding: 3px;
    width: 100px;
}
</style>
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
</head>
 
     <body>
 
<div class="sortable-container">
 
    <div id="example1">
 
        <button onclick="$('#selectedUsers').sortable('enable')">Enable</button>
        <button onclick="$('#selectedUsers').sortable('disable')">Disable</button>
        <button onclick="alert($('#selectedUsers').sortable('serialize'))">Serialize!</button>
        <button onclick="alert($('#selectedUsers').sortable('toArray'))">ID's to Array!</button>
 
        <br><br>
 
        <div id="sortable-ex" style="min-height: 110px; min-height:110px; height: auto !important;">
 
            <div style="float: left;">
                Selected users
                <ul id="selectedUsers" style="cursor: hand; cursor: pointer;">
                    <li id='user_Susan'>Susan</li>
                    <li id='user_Beth'>Beth</li>
                    <li id='user_Bob'>Bob</li>
                    <li id='user_Edward'>Edward</li>
                    <li id='user_Kate'>Kate</li>
                </ul>
            </div>
 
            <div style="float: left; margin-left: 50px;">
                User list
                <ul id="userList" style="cursor: hand; cursor: pointer;">
                    <li id='user_Jack'>Jack</li>
                    <li id='user_John'>John</li>
                    <li id='user_Marry'>Marry</li>
                    <li id='user_Claire'>Claire</li>
                    <li id='user_Daniel'>Daniel</li>
                </ul>
            </div>
 
            <br style="clear: both;">
 
        </div>
    </div>
</div>
 
 
 
<script type="text/javascript">
$("#selectedUsers").sortable({
    connectWith: ["#userList"]
});
$("#userList").sortable({
    connectWith: ["#selectedUsers"]
});
</script>
 
 
</html>

Fonctionne avec IE7 et FF3. Pas testé avec les autres mais ça devrait le faire

[Merfolk]

[Nimothenicefish]

ça marche ?? car sinon j'ai une p'tite solution toute bête à vous proposez

[Kerod]

Ça fonctionne oui.

Mais quelle est ta solution toute bête (si c'est encore plus simple ça m'intéresse) ?

[Nimothenicefish]

Voici mon 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
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
<script type="text/javascript">
$(document).ready(
	function () {
		$('div.groupWrapper').Sortable({
		          accept: 'groupItem',
      		          helperclass: 'sortHelper',
           		  activeclass: 'sortableactive',
		          hoverclass: 'sortablehover',
		          handle: 'div.itemHeader',
		          tolerance: 'pointer',
		          onchange : function ( sorted ) {
		          },
		          onStart : function(){
     $.iAutoscroller.start(this,document.getElementsByTagName('body'));
		         },
		         onStop : function(){
		              $.iAutoscroller.stop();
		         }
	});
</script>
 
//1ère liste :
<div id="sort1" class="groupWrapper">
<p>&nbsp;</p>
{section name=widget loop=$tblWidget} 
	{foreach name=outer item=contact from=$tabWidgets}		
		{foreach key=key item=item from=$contact}	
			{if $tblWidget[widget]->m_id eq $item}
				<div class='groupItem' id='groupItem'>
					<div style='-moz-user-select: none;' class='itemHeader'>{$tblWidget[widget]->m_title}<a href='#' class='{$tblWidget[widget]->m_id}' <!--onclick='alert(this.parentNode.nextSibling.nodeName);'-->>[options]</a></div>
					<div class='{$tblWidget[widget]->m_id}'>
						{$tblWidget[widget]->getOptionsUI()}
					</div>
				</div>
			{/if}
		{/foreach}
	{/foreach}
{/section}
</div>
 
//2eme liste :
 
<div id="sort3" class="groupWrapper">
<p>&nbsp;</p>
<ul id="sortlist_top" class="ul_style"> 
{section name=widget loop=$tblWidget}
	{foreach name=outer item=contact from=$tabWidgetsUser}		
		{if $tblWidget[widget]->m_id eq $contact.label}
			<li id="{$contact.id}" class="sortable_item">
			<div class='groupItem' id='groupItem'>
				<div style='-moz-user-select: none;' class='itemHeader'>{$tblWidget[widget]->m_title}<a href='#' class='{$tblWidget[widget]->m_id}'>[options]</a></div>
				<div class='toto{$tblWidget[widget]->m_id}'>
					{$tblWidget[widget]->getOptionsUI()}
				</div>
			</div>
			</li>
		{/if}
	{/foreach}
{/section}
</ul>
</div>

Note : j'utilise des div a la place de simple liste (ul > li). Si j'ai mis une liste dans la 2eme div c'est pour pouvoir sauvé la position des éléments (je n'ai pas mis la partie du code pour la sauvegarde pour alléger le poste).
Très important, pour pouvoir replacer un nouvel éléments lors qu'une liste est vide, rajouter tout simplement

Code :

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

<p>&nbsp;</p>

juste après le début de la div. De cette manière la div ne sera jamais vite, même apres que l'on ai sorti tout les éléments. Je n'ai pas testé pas manque de temps mais ça devrait fonctionner avec les UL < LI

[Kerod]

Avant tout il est préférable d'utiliser des ul li pour former des listes (sémantiquement parlant).

Ta méthode nécessite d'effectuer des manipulations DOM . J'y avais pensé au tout début (cf ma première intervention dans ce thread) mais ça reste assez lourd et à gérer. D'où la solution du display:none sur les li ce qui restait toujours assez lourd juste pour pouvoir accéder à la liste elle-même.

Le CSS est ce qu'il y a de plus léger vu qu'il n'y a aucune manipulation DOM.
Mais ta méthode reste une solution tout de même

[Nimothenicefish]

J'aurais utilisé des listes, seulement pour le travail que je dois effectuer je dois utilisé des divs :/ et de toute facon j'ai pas réussi a faire du drag&drop entre 2 listes toutes simples
Maintenant ce qu'il me reste à effectué c'est le sauvegarde sur la 2eme liste de la position des élèments; Pour ça je te renvoie à ce post :