Move the division tag by interchanging with other division tag

Hi

Can you please help me in moving the division tag Up and Down when multiple division tags are existing in the page.For example if there are 5 division tags in the page each tag consisting of Up and Down buttons ,when we click up button of 5th division tag the position of 5th tag should come to 4th and the 4th div tag position should become 5th.Similarly if we click up it should go up again.Same for Down button.

Hi,

I think you can use the JQuery to do this task because Jquery work fully in the client side by this you able to access DOm elements so as to move to down or up.

Here my code list

<script src="scripts/jquery-1[1].3.2.js" type="text/javascript"></script>

     <script type="text/javascript">

         function MoveDown() {

             var selectedOption = $('#ListBox1 > option[selected]');

             var nextOption = $('#ListBox1 > option[selected]').next("option");           

             if ($(nextOption).text() != "") {             

                 $(selectedOption).remove();

                 $(nextOption).after($(selectedOption));

             }                

         }

         function MoveUp() {

             var selectedOption = $('#ListBox1 > option[selected]');

             var prevOption = $('#ListBox1 > option[selected]').prev("option");            

             if ($(prevOption).text() != "") {

                 $(selectedOption).remove();

                 $(prevOption).before($(selectedOption));

             }

           }

 

    </script> 

 

<form id="form1" runat="server">

    <div>

    <table>

  <tr>

    <td rowspan=2>     

      <asp:ListBox ID="ListBox1" runat="server" Rows="10">

          <asp:ListItem>1</asp:ListItem>

          <asp:ListItem>2</asp:ListItem>

          <asp:ListItem>3</asp:ListItem>

          <asp:ListItem>4</asp:ListItem>

          <asp:ListItem>5</asp:ListItem>

          <asp:ListItem>6</asp:ListItem>

        </asp:ListBox>

    </td>

    <td><input type="button" value="Up" onclick="MoveUp()"></td>

  </tr>

  <tr>

    <td><input type="button" value="Down" onclick="MoveDown()"></td>

  </tr>

</table>

    </div>

    </form>

Same idea, you can apply for your task.

Thanq RRaveen