deux listes "sortable" synchronisé avec jquery_ui

27 mars 2010, 17:29

en gros je cherche à synchroniser l'ordre de deux listes "sortable" avec jquery_ui.

si je modifie l'ordre d'une liste, l'ordre de l'autre doit se modifier aussi.

avec serialize j'ai un array de ma liste modifié mais que faire pour modifier l'autre avec ça ??
je suis en train de cramer toute mes neurones !!

si qqu'un a une idée ??

merci.

27 mars 2010, 17:51

Peut-être avec un autre approche, moins "code" et moins "javascript"...

Tu peux expliquer mieux le besoin et le contexte ?

27 mars 2010, 22:18

en gros la premiere liste est le contenue de du site (série de div sortable) ou chaque div contient une fenetre
la deuxieme liste est la liste des titre des div ouverte... elle permet de recupérer une div facilement et la faire remonter par exemple...
pour l'exemple mon code simplifié (mais helas le jquery ne fais rien à part rendre les liste "sortable"...)

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test sortable</title> 
 
<style> 
body{position:fixed;overflow:hidden;}
#menu_gauche{position:fixed;border:solid 1px #F00;top:50px;left:10px;overflow:hidden;width:200px;bottom:10px;}
#fenetres{position:fixed;top:50px;left:220px;right:10px;bottom:10px;border:solid 1px #F00;overflow:auto;}
.fenetre{margin:30px;height:300px;border:solid 1px #00F;}
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> 
<script> 
  $(document).ready(function() {
    $("#fenetres").sortable({ axis: 'y' });
	$("#titre").sortable({ axis: 'y' },{ placeholder: 'ui-state-highlight' });
  });
</script> 
</head> 
 
<body> 
    <div id="menu_gauche"> 
    	<ul id="titre"> 
        	<li>titre1</li> 
            <li>titre2</li> 
            <li>titre3</li> 
            <li>titre4</li> 
            <li>titre5</li> 
            <li>titre6</li> 
        </ul> 
    </div> 
    <div id="fenetres"> 
    	<div class="fenetre" id="fenetre1">1</div> 
        <div class="fenetre" id="fenetre2">2</div> 
        <div class="fenetre" id="fenetre3">3</div> 
        <div class="fenetre" id="fenetre4">4</div> 
        <div class="fenetre" id="fenetre5">5</div> 
        <div class="fenetre" id="fenetre6">6</div> 
    </div> 
 </body> 
</html>

donc voilà mais je voudrais pas en arriver à une solution coté serveur ou je refais carrément ma liste dans un autre ordre... coté u-i ça pus

28 mars 2010, 12:20

Pour moi si tes " deux listes" doivent être liées c'est que tu n'as en fait besoin que d'une seule liste

Après tu dois pouvoir assez facilement te débrouiller en CSS pour que visuellement ça aie l'air d' être 2 listes (mais techniquement ce sera une seule).

28 mars 2010, 16:50

Si j'ai bien compris, tu veux faire en sorte que lorsque tu déplace un item dans l'une ou l'autre des liste, ça déplace l'élément lié de la seconde liste ...

Il te suffirait d'utiliser l'Event {stop : function(event, element){}}

- ensuite, récupérer l'id de l'élément (element.item.id)
- ainsi que celui le précédent dans le nœud parent()
- découper la chaine pour récupérer l'id de l'élément lié ("list_1" => "div_1") et du précédent
- et déplacer la div pour la placer juste après celle qui doit la précéder ....

je suppose que tout ceci doit être possible assez facilement en jQuery !... vu que ça l'est avec prototype ^^

@++

EDIT : $('#'+idDivDest).after($('#'+idDivADep)); .... si je ne me trompe pas :d

@+

deux listes "sortable" synchronisé avec jquery_ui

Qui est en ligne