Click here to Skip to main content
12,954,856 members (58,848 online)
Rate this:
 
Please Sign up or sign in to 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:
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 12-Jan-13 4:01am

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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:
$("#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.
  Permalink  

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

    Print Answers RSS
Top Experts
Last 24hrsThis month
OriginalGriff 6,559
CHill60 3,550
Maciej Los 3,153
ppolymorphe 2,030
Jochen Arndt 1,975


Advertise | Privacy | Mobile
Web02 | 2.8.170525.1 | Last Updated 13 Jan 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100