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 :
- <td>
- <div class="cell ui-droppable ui-sortable">
- <div class="postit ui-draggable">
- TEXTE A DEPLACER
- </div>
- </div>
- </td>
|
Mon script (largement inspiré des exemples) :
Code :
- <script>
- $(function() {
- /*
- Éléments déplaçables :
- <div class=postit>
- */
- $( ".postit" ).draggable({
- appendTo: "body",
- revert: "invalid",
- helper: "clone",
- cursor: "move"
- });
- /*
- Zone où on peut droper :
- <div class=cell>
- */
- $( ".cell" ).droppable({
- activeClass: "ui-state-default",
- hoverClass: "ui-state-hover",
- accept: ":not(.ui-sortable-helper)",
- //accept: ".postit"
- drop: function( event, ui ) {
- $( this ).find( ".cell" ).remove();
- $( '<div class="postit"></div>' ).text( ui.draggable.text() ).addClass( "ui-draggable" ).appendTo( this );
- }
- }).sortable({
- items: ".postit:not(.cell)",
- sort: function() {
- // gets added unintentionally by droppable interacting with sortable
- // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
- $( this ).removeClass( "ui-state-default" );
- }
- });
- });
- </script>
|
Merci par avance à tous ceux qui m'aideront à résoudre ce soucis !
