JQuery UI 拖放两个 div答案

【问题标题】：JQuery UI Drag and Swap two divsJQuery UI 拖放两个 div
【发布时间】：2013-03-06 09:19:06
【问题描述】：

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

这是我的 jsfiddle 尝试：http://jsfiddle.net/VhB4n/3/

似乎我希望一起拖动的子 div（因为在父 div 上启用了拖动）可以独立拖放。是否可以拖放标题和 body div (Hdr1 & Body1) 一起并与其他 Hdr2 和 Body2 div 交换？

谢谢。

代码如下：

<!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>

【问题讨论】：

试试mjsarfatti.com/sandbox/nestedSortable 或johnny.github.com/jquery-sortable
两者看起来都不错。谢谢。

标签： jquery user-interface drag-and-drop swap

【解决方案1】：

您可以一起交换标题和正文。您需要做的就是用一个额外的 div 包裹 header 和 body。

在这种情况下，您的代码如下所示：

<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>

javascript 代码无需更改。

注意：当您不单独移动标题和正文时会出现这种情况。

【讨论】：

啊……知道了。谢谢。虽然弄乱了轨道的左对齐 - 但我想我可以重置它。