动态重新排序5个div [英] Reorder 5 divs dynamically

问题描述

动态重新排序5个div ...现在我可以使用jquery在两个div之间交换....我想按照愿望重新排序div ...例如，如果有5个div作为div1，div2，div3 ，div4，div5等我必须能够重新定位任何顺序（div4，div3，div2，div5，div1等或div3，div2，div5，div4，div1等）.....我试过很多javascript提到但没有工作....最早提供正确的完整代码..

使用的代码：

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;" />

推荐答案

（文档）。 ready（function（）{

(document).ready(function () {

（。go-swap）。click（function（）{
var div1 = document.getElementById（<％ = Hiddendiv1.ClientID ％> ）。value;
var div2 = document.getElementById（<％ = Hiddendiv2.ClientID ％> ）.value;

(".go-swap").click(function () { var div1 = document.getElementById("<%=Hiddendiv1.ClientID %>").value; var div2 = document.getElementById("<%=Hiddendiv2.ClientID %>").value;

（div1）.swap（{
target：div2，//强制。我们要与
opacity交换的元素的ID ：0.5，//可选。如果设置将使交换元素在运动时具有半透明效果
速度：1000，//可选。动画发生的时间（以毫秒为单位）
}） ;
}）;
}）;
< / script >
< div id = div_1 runat = 服务器 > 这是DIV 1 < / div >
< div id = div_2 运行at = server > 这是DIV 2 < / div > ;
< div id = div_3 runat = server > 这是DIV 3 < / div >
< div id = div_4 runat = server > 这是DIV 4 < / div > ;
< div id = div_5 runat = server > 这是DIV 5 < / div >
< asp：HiddenField ID = Hiddendiv1 runat = server / >
< asp：HiddenField ID = Hiddendiv2 runat = server / >
< asp：按钮 ID = Button1 runat = server 文字 = 选择Divs

on单击 = Button1_Click / >
< asp：按钮 ID = btnsubmit runat = 服务器 class = go-swap 文字 = 提交 OnClientClick = 返回false; / >

(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;" />

这篇关于动态重新排序5个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！