How to save the sequence in the database after dragging dropping

How to save the sequence in the database after dragging dropping

i have this code which is interchanging images location as soon as they are clicked and dragged and place on the other image below is the javascript code and i am using jquery ui for this
  2. <script >
  3.         (function () {
  4.             var droppableParent;

  6.             $('ul .element').draggable({
  7.                 revert: 'invalid',
  8.                 revertDuration: 200,
  9.                 start: function () {
  10.                     droppableParent = $(this).parent();

  12.                     $(this).addClass('being-dragged');
  13.                 },
  14.                 stop: function () {
  15.                     $(this).removeClass('being-dragged');
  16.                 }
  17.             });

  19.             $('ul li').droppable({
  20.                 hoverClass: 'drop-hover',
  21.                 drop: function (event, ui) {
  22.                     var draggable = $(ui.draggable[0]),
  23.                         draggableOffset = draggable.offset(),
  24.                         container = $(event.target),
  25.                         containerOffset = container.offset();

  27.                     $('.element', event.target).appendTo(droppableParent).css({ opacity: 0 }).animate({ opacity: 1 }, 200);

  29.                     draggable.appendTo(container).css({ left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top }).animate({ left: 0, top: 0 }, 200);
  30.                 }
  31.             });
  32.         }());


  35.       </script>
this is the code in .aspx page
  2. <div >
  3.            <asp:DataList   ID="DataList1" runat="server" RepeatColumns="5" CellPadding="4" CellSpacing="10" AllowSorting="True"  OnItemCommand="DataList1_ItemCommand">
  4.             <ItemTemplate>
  5.                <%-- <table width="90%" >
  6.                     <ul>
  7.                     <tr>
  8.                         <td>

  10.                          <li >
  11.                              <div class="element">
  12.                              <asp:ImageButton CssClass="element" ID="ImageButton1" CommandArgument='<%#Eval("D_NAME") %>' runat="server" Height="300px" Width="250px" ImageUrl='<%#Eval("D_IMAGE") %>'  />

  14.                           <br /></td>  
  15.                         </div>
  16.                          </li>
  17.                                     
  18.                         <td><br /></td>
  19.                     </tr>
  20.                     <ul>
  21.                 </table>--%>
  22.                  <ul>
  23.     <li>
  24.         <div class="element">
  25.     <asp:LinkButton ID="LinkButtonID"  CommandArgument='<%#Eval("D_NAME") %>' runat="server" >
  26.             <asp:Image ID="Image1" runat="server" Height="300px" Width="250px" ImageUrl='<%#Eval("D_IMAGE") %>'/>

  28.     </asp:LinkButton>
  29.         

  31.         </div>
  32.     </li>
  33.                      
  34.                      </ul>

  36.             </ItemTemplate>
  37.             </asp:DataList></>
  38.         </div>
and this is a pic of what .aspx page when viewed on browser

these are two tables which are joined in order to show the user only the "Duas" that he inserted in Selected_List table.
currently these are sequenced according to the DNO in DUAS table(Ascending Order)

Now as you can see what i am doing is displaying the Data only after joining so the user can see only his own data.
now somehow i need to perform sorting which is working with the above javascript function but i can't store this change in the database so that user sees the change next time which he made
i need some function which saves sorting position in database as soon as i drag replace two pics position