Click here to Skip to main content
15,891,184 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Reorder 5 divs dynamically...Right now i am able to swap between two divs using jquery....I want to reorder divs as per wish...For instance if there are 5 divs as div1,div2,div3,div4,div5 etc i must be able to reposition as any order (div4,div3,div2,div5,div1 etc or div3,div2,div5,div4,div1 etc).....I tried many javascript mentioned but none worked....Provide a correct complete code at the earliest..
Code used:
XML
script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-Swapies.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".go-swap").click(function () {
                var div1 = document.getElementById("<%=Hiddendiv1.ClientID %>").value;
                var div2 = document.getElementById("<%=Hiddendiv2.ClientID %>").value;
                $(div1).swap({
                    target: div2, // Mandatory. The ID of the element we want to swap with
                    opacity: "0.5", // Optional. If set will give the swapping elements a translucent effect while in motion
                    speed: 1000, // Optional. The time taken in milliseconds for the animation to occur
                });
            });
        });
</script>
 <div id="div_1" runat="server">THIS IS DIV 1</div>
<div id="div_2" runat="server">THIS IS DIV 2</div>
<div id="div_3" runat="server">THIS IS DIV 3</div>
<div id="div_4" runat="server">THIS IS DIV 4</div>
<div id="div_5" runat="server">THIS IS DIV 5</div>
<asp:HiddenField ID="Hiddendiv1" runat="server" />
<asp:HiddenField ID="Hiddendiv2" runat="server" />
  <asp:Button ID="Button1" runat="server"    Text="Select Divs"
      onclick="Button1_Click"  />
    <asp:Button ID="btnsubmit" runat="server"  class="go-swap"  Text="Submit" OnClientClick="return false;" />
Posted

1 solution

Provide a correct complete code at the earliest..
Is that not too demanding? Show some courtesy atleast.


About your problem, if you can, try HTML5 Drag-drop feature. If not, then for reordering, easiest would be to change markup at runtime. Place the div chosen at a desired location. Something like:
JavaScript
$("#div4").insertAfter("#div2");

You need to use the even of reorder to use the above code.

Now, try out and post specific issue you get stuck. Do share what you try.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900