jQuery Forum

2. <script >
3.         (function () {
4.             var droppableParent;
5. 
   
6.             $('ul .element').draggable({
7.                 revert: 'invalid',
8.                 revertDuration: 200,
9.                 start: function () {
10.                     droppableParent = $(this).parent();
11. 
    
12.                     $(this).addClass('being-dragged');
13.                 },
14.                 stop: function () {
15.                     $(this).removeClass('being-dragged');
16.                 }
17.             });
18. 
    
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();
26. 
    
27.                     $('.element', event.target).appendTo(droppableParent).css({ opacity: 0 }).animate({ opacity: 1 }, 200);
28. 
    
29.                     draggable.appendTo(container).css({ left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top }).animate({ left: 0, top: 0 }, 200);
30.                 }
31.             });
32.         }());
33. 
    
34. 
    
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>
9. 
   
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") %>'  />
13. 
    
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") %>'/>
27. 
    
28.     </asp:LinkButton>
29.         
30. 
    
31.         </div>
32.     </li>
33.                      
34.                      </ul>
35. 
    
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