Hi all,
I'm trying to use draggable and droppable methods in a personnal website but having some problems...
My objective is to move content of a cell to an other cell as many times i want...
For now I can move this content, drop it to an other cell, move the new content but i can't drop it again anywhere...
Each cell look like this :
- <td>
<div class="cell ui-droppable ui-sortable">
<div class="postit ui-draggable">
THIS TEXT CAN BE MOVED
</div>
</div>
</td>
My script (inspired from Jquery UI examples)
- <script>
$(function() {
$( ".postit" ).draggable({
appendTo: "body",
revert: "invalid",
helper: "clone",
cursor: "move"
});
$( ".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 ui-draggable"></div>' ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: ".postit:not(.cell)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
Some can help me ?
I apologize for my poor english.