jqueryui拖放并交换两个div_Jquery_User Interface_Drag And Drop_Swap

jqueryui拖放并交换两个div

jquery user-interface

jqueryui拖放并交换两个div,jquery,user-interface,drag-and-drop,swap,Jquery,User Interface,Drag And Drop,Swap,尝试拖放（交换）两个div（包含两个子div）以下是我的JSFIDLE尝试：看起来像是我希望一起拖动的子div（因为在父div上启用了拖动），可以独立地拖放。可以拖放标题和标题车身分区（Hdr1和Body1）在一起并与其他Hdr2和Body2分区交换谢谢代码如下： <!DOCTYPE html> <html> <head> <title>CurveDiv</title> <script src="http

尝试拖放（交换）两个div（包含两个子div）

以下是我的JSFIDLE尝试：

看起来像是我希望一起拖动的子div（因为在父div上启用了拖动），可以独立地拖放。可以拖放标题和标题车身分区（Hdr1和Body1）在一起并与其他Hdr2和Body2分区交换

谢谢

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>CurveDiv</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <style>


        .cTracks {
            position: absolute;
            left: 100px;
            top: 10px;
            width: 500px;
            height:700px;
            border: 1px solid #000000;
        }
        .sTrack {
            float: left;
            width: 212px;
            height: 700px;
            border: 1px solid #000000;
        }
        .sTrackHdr {
            position: relative;
            top: 0px;
            left: 0px;
            width: 212px;
            height: 100px;
            border: 1px solid #ff0000;
        }
        .sTrackBody {
            position: relative;
            top: 0px;
            left: 0px;
            width: 212px;
            height: 600px;
            border: 1px solid green;
        }
    </style>
    <script>
        $(function() {
            $( ".sTrack" ).sortable();

            $( ".sTrack" ).disableSelection();
        });
    </script>
</head>
<body>
    <div id="curveTracks" class="cTracks">
        <div id="singleTrack" class="sTrack">
            <div id="singleTrackHdr" class="sTrackHdr">
                Header1
            </div>
            <div id="singleTrackBody" class="sTrackBody">
                Body1
            </div>
        </div>

        <div id="singleTrack1" class="sTrack">
            <div id="singleTrackHdr1" class="sTrackHdr">
                Header2
            </div>
            <div id="singleTrackBody1" class="sTrackBody">
                Body2
            </div>
        </div>

    </div>
</body>
</html>


曲线电视
cTracks先生{
位置：绝对位置；
左：100px；
顶部：10px；
宽度：500px；
高度：700px；
边框：1px实心#000000；
}
斯特拉克先生{
浮动：左；
宽度：212px；
高度：700px；
边框：1px实心#000000；
}
sTrackHdr先生{
位置：相对位置；
顶部：0px；
左：0px；
宽度：212px；
高度：100px；
边框：1px实心#ff0000；
}
sTrackBody先生{
位置：相对位置；
顶部：0px；
左：0px；
宽度：212px；
高度：600px；
边框：1px纯绿色；
}
$（函数（）{
$（“.sTrack”）.sortable（）；
$（“.sTrack”）.disableSelection（）；
});
校长1
车身1
校长2
车身2

您可以同时交换标题和正文。你所需要做的就是用一个额外的div来包装标题和正文

在本例中，您的代码如下所示：

<body>
    <div id="curveTracks" class="cTracks">
        <div id="singleTrack" class="sTrack">
            <div>
                 <div id="singleTrackHdr" class="sTrackHdr">
                     Header1
                 </div>
                 <div id="singleTrackBody" class="sTrackBody">
                     Body1
                 </div>
            </div>
        </div>

        <div id="singleTrack1" class="sTrack">
            <div>
                <div id="singleTrackHdr1" class="sTrackHdr">
                    Header2
                </div>
                <div id="singleTrackBody1" class="sTrackBody">
                    Body2
                </div>
            </div>
        </div>
    </div>
</body>


校长1
车身1
校长2
车身2

javascript代码无需更改

注意：如果不单独移动收割台和正文，则会出现这种情况。

试试看，或者两者都很不错。谢谢。啊……明白了。谢谢虽然弄乱了轨道的左对齐-但我想我可能能够重置它。