Classer des éléments du DOM avec jQuery

Pourquoi des éléments du DOM ? Le besoin vient généralement du fait que des éléments doivent être classés dans un ordre précis et qu'il n'y a pas mieux que de pouvoir le faire dans l'interface en les faisant glisser à l'aide de la souris. C'est convivial et tellement mieux que d'essayer de maintenir un ordre avec n'importe quelle autre technique.

J'avais expérimenté l'effet sortable avec Prototype et Scriptaculous mais depuis le virage vers jQuery, c'était mon premier essai avec la librairie. Je mets à votre disposition un exemple fonctionnel en guise de snippet de départ qui utilise jQuery UI sortable.

La première chose à faire est de lier à la page les librairies jQuery et jQuery UI :

<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.2.custom.min.js"></script>

<style type="text/css" media="screen">
#list{
  /* annuler l'indentation */
  marign-left: 0;
  padding-left: 0;

  list-style: none;
}

.item{
  /* annuler l'indentation */
  marign-left: 0;
  padding-left: 0;

  padding:5px;
  margin:5px;
  border:1px solid black;
  background-color: #ececec;
  width: 300px;

  /* curseur de la souris lorsqu'on se trouve sur un item déplaçable */
  cursor: move;
}
</style>

<form id="frmList" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post">

  <ul id="list">
  <?php for($i=1; $i<=5; $i++){ ?>
  <li class="item" id="li_<?php echo $i; ?>">
      <input type="text" id="input_<?php echo $i; ?>" name="input_<?php echo $i; ?>" value="Bloc <?php echo $i; ?>" />
  </li>
  <?php } ?>
  </ul>

  <input type="button" id="btnSubmit" name="btnSubmit" value="Enregistrer" />
</form>

var $j = jQuery.noConflict();

$j(document).ready(onLoad);

function onLoad(){
  $j('#list').sortable({ 'update': onDrop });
  $j('#btnSubmit').click( onSubmit );
}

function onDrop(){
  console.log('order has changed');
}

function onSubmit(){
  $j('#frmList').submit();
}

var arr = $j('#list').sortable('toArray');

<input type="hidden" id="items_order" name="items_order" value="">

function onSubmit(){
  var arr = $j('#list').sortable('toArray');

  $j(arr).each(
      function(i, e){
          // arr est utilisé en "closure"
          arr[i] = e.replace('li_', '');
      }
  );

  $j('#items_order').val( arr );
  $j('#frmList').submit();
}

function onSubmit(){
  var arr = $j('#list').sortable('toArray');

  arr = $j(arr).map(
      function(){
          return this.replace('li_', '');
      }
  );

  $j('#items_order').val( arr.get().join(',') );
  $j('#frmList').submit();
}

Tags: JavaScript