2

2 つの div (いくつかの子 div を含む) をドラッグ アンド ドロップ (スワップ) しようとしています。

これが私のjsfiddleの試みです：http://jsfiddle.net/VhB4n/3/

一緒にドラッグされると予想される子divのようです（親divでドラッグが有効になっているため）、個別にドラッグアンドドロップできます。ヘッダーとボディの両方の 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 に答える