2

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

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

似乎我希望一起拖动的子 div（因为在父 div 上启用了拖动）可以独立拖放。是否可以将 header 和 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>
4

1 回答 1

0

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

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

于 2013-03-18T05:26:39.180 回答