Here are fragments of code:

1. $ ( ".letter" ).draggable();
2. $ ( ".simpleSlot" ).droppable({
3. drop : function ( event, ui ) {
4. var idDrag = ui.draggable. attr ( "id" );
5. var idDrop = $ ( this ). attr ( "id" );
6. doneWord [ idDrop . charAt ( 0 )]= idDrag ;
7. $ ( "#test ). text ( "Good dragged!" + "IdDrag:" + idDrag + " IdDrop:" + idDrop );
8. $ ( "#test2" ). text ( "doneWord:" + doneWord );
9. $ ( "#test3" ). text ( "splitedWord:" + splitedWord );
10. }
11. });
12. (.....................................)
13. (...................................)
14. (next function, about draggable element, droppable is doing the same way)
15. for ( var i = 0 ; i < splitedWord . length ; i ++){
16.      var divId = i + splitedWord [ i ];
17.      var positionX = (( slotsWidthArea / splitedWord . length ))* i ;
18.      var simpleSlot = $ ( "<div class= \" simpleSlot ui-widget-header \" id= \" " + divId + " \" ></div>" ). text ( splitedWord [ i ]);
19.      $ ( "#slots" ). append ( simpleSlot );
20.      $ ( "#" + divId ). css ({
21.          left : positionX
22.      });
23. }

Problems:

1. When I put any draggable element into dropable "slot" - I can't move it anymore. Why?

I was verifying html, css etc - everything works. Only this two problems are for me completely incomrehesible.