title: JQuery UI Drag and Swap two divs
body: <p>Trying to drag and drop (swap) two divs (containing couple of child divs). </p>
  
  <p>Here is my jsfiddle attempt: <a href="http://jsfiddle.net/VhB4n/3/" rel="nofollow">http://jsfiddle.net/VhB4n/3/</a></p>
  
  <p>Seems like the child divs that I expect to be dragged together (since drag enabled on parent div) can be dragged and dropped independently. Is is possible to drag and drop both header and 
  body divs (Hdr1 &amp; Body1) together and swap with the other Hdr2 and Body2 divs?</p>
  
  <p>Thanks.</p>
  
  <p>Code follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;CurveDiv&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;style&gt;
  
  
          .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;
          }
      &lt;/style&gt;
      &lt;script&gt;
          $(function() {
              $( ".sTrack" ).sortable();
  
              $( ".sTrack" ).disableSelection();
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="curveTracks" class="cTracks"&gt;
          &lt;div id="singleTrack" class="sTrack"&gt;
              &lt;div id="singleTrackHdr" class="sTrackHdr"&gt;
                  Header1
              &lt;/div&gt;
              &lt;div id="singleTrackBody" class="sTrackBody"&gt;
                  Body1
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="singleTrack1" class="sTrack"&gt;
              &lt;div id="singleTrackHdr1" class="sTrackHdr"&gt;
                  Header2
              &lt;/div&gt;
              &lt;div id="singleTrackBody1" class="sTrackBody"&gt;
                  Body2
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>