Mise en place de draggable

HTML

<script src="http://tutos.sebastienangot.fr/2011/drag-and-drop-jquery-ajax/demo/js/jquery-1.4.2.min.js"></script>
<script src="http://tutos.sebastienangot.fr/2011/drag-and-drop-jquery-ajax/demo/js/jquery-ui-1.8.custom.min.js"></script>
<div class="bougeable">
<div id="1">
  <h4>titre1</h4>
  <p><img src="" alt="img1" title="img1"></p>
  <p>description1</p>
  <p><a href="#">lien1</a></p>
</div>
<div id="2">
  <h4>titre2</h4>
  <p><img src="" alt="img2" title="img2"></p>
  <p>description2</p>
  <p><a href="#">lien2</a></p>
</div>
<div id="3">
  <h4>titre3</h4>
  <p><img src="" alt="img3" title="img3"></p>
  <p>description3</p>
  <p><a href="#">lien3</a></p>
</div>
<div id="4">
  <h4>titre4</h4>
  <p><img src="" alt="img4" title="img4"></p>
  <p>description4</p>
  <p><a href="#">lien4</a></p>
</div>
</div>

CSS

.bougeable > div {
  border : 1px solid black;
}

.bougeable > div > h4 {
  background-color: darkgrey;
}

JavaScript

$(document).ready(function()
		{
      $('.bougeable').sortable({
          axis: "y", // Le sortable ne s'applique que sur l'axe vertical
          containment: ".bougeable", // Le drag ne peut sortir de l'élément qui contient la liste
          handle: "h4", // Le drag ne peut se faire que sur l'élément H4 (le titre)
          distance: 5, // Le drag ne commence qu'à partir de 10px de distance de l'élément
          // Évènement appelé lorsque l'élément est relâché
          stop: function(event, ui){
              // Pour chaque item de liste
              $(obj).children('div').each(function(){
                  // On actualise sa position
                  index = parseInt($(this).index()+1);
                  // On la met à jour dans la page
                  $(this).find(".count").text(index);
              });
          }
      });
		});