[JS] Jquery UI Drag&Drop de cellules dans un tableau

Jquery UI Drag&Drop de cellules dans un tableau [JS] - HTML/CSS - Programmation

Marsh Posté le 03-03-2011 à 10:34:26    

Bonjour à tous !
 
Je cherche actuellement à intégrer le principe de Drag&Drop de Jquery UI (voir les exemples ici)
 
Mon but est de pouvoir déplacer le contenu d'une cellule vers une autre cellule, et ce autant de fois que nécessaire.
 
Pour l'instant mon code permet  

  • de drag le contenu vers une cellule,  
  • drop ce même contenu dans une autre cellule,
  • de drag le nouveau contenu vers une cellule


Mon dernier problème est de drop ce nouveau contenu dans une cellule (en cas de mauvais choix par exemple)...
 
Chaque cellule est de cette forme :

Code :
  1. <td>
  2. <div class="cell ui-droppable ui-sortable">
  3.  <div class="postit ui-draggable">
  4.   TEXTE A DEPLACER
  5.  </div>
  6. </div>
  7. </td>


 
Mon script (largement inspiré des exemples) :

Code :
  1. <script>
  2. $(function() {
  4. /*
  5.  Éléments déplaçables :  
  6.  <div class=postit>
  7. */
  8. $( ".postit" ).draggable({
  9.  appendTo: "body",
  10.  revert: "invalid",
  11.  helper: "clone",
  12.  cursor: "move"
  13. });
  15. /*
  16.  Zone où on peut droper :
  17.  <div class=cell>
  18. */
  19. $( ".cell" ).droppable({
  20.  activeClass: "ui-state-default",
  21.  hoverClass: "ui-state-hover",
  22.  accept: ":not(.ui-sortable-helper)",
  23.  //accept: ".postit"
  24.  drop: function( event, ui ) {
  25.   $( this ).find( ".cell" ).remove();
  26.   $( '<div class="postit"></div>' ).text( ui.draggable.text() ).addClass( "ui-draggable" ).appendTo( this );
  27.  }
  28. }).sortable({
  29.  items: ".postit:not(.cell)",
  30.  sort: function() {
  31.   // gets added unintentionally by droppable interacting with sortable
  32.   // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
  33.   $( this ).removeClass( "ui-state-default" );
  34.  }
  35. });
  36. });
  37. </script>


 
 
Merci par avance à tous ceux qui m'aideront à résoudre ce soucis !

Reply

Marsh Posté le 03-03-2011 à 10:34:26   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed