Question

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

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

看起来像我期望被拖到一起的子div（因为在父div上启用拖动）可以独立地拖放。可以拖放标题和 body divs（Hdr1＆amp; 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>

Answer 1

您可以将标题和正文交换在一起。您需要做的就是用一个额外的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>

javascript代码无需更改。

注意：当您将标题和正文一起移动时，就是这种情况。

JQuery UI拖动和交换两个div

1 个答案: