how to make a div movable up and down and also swap id variables using jquery

Question

is it possible to make a div movable up and down and also change value of the ID when toggled up and down?

EX:

<div id="main_window">
     <div id="window_1"> //this window moves down and also 
         <input id="var_1"> //gets the value of "3" from the div below
     </div>
     <div id="window_3"> //this window moves up and also
         <select id="var_3"></select> //gets the value of "1" from the div above
     </div>
     <div id="window_6">
         <textarea id="var_6"></textarea>
     </div>
     <div id="window_8">
         <input id="var_7">

     </div>
</div>

the div when pushed up should acquire the highest id / name value but not switch content only the id variable.

the move event can be done by click or drag as long as the goal is accomplished

Answer 1

For easy movable divs using jQuery I would suggest using jQueryUI Sortable

You can reassign the id/name values in a event handler like update [docs]