JQuery用户界面拖动和交换两个div

试图拖放（交换）两个div（含夫妇孩子的div）。JQuery用户界面拖动和交换两个div

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

好像孩子的div，我希望被拖到一起（因为在父DIV启用拖动）可以拖动和独立下降。是否可以拖动，并与其他HDR2和Body2的div下降头文件和体的div（HDR1 & Body1）一起掉呢？

谢谢。

代码如下：

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

来源

2013-03-18 Fergus

尝试http://mjsarfatti.com/sandbox/nestedSortable/或http://johnny.github.com/jquery-sortable/ – 2013-03-18 05:24:07

两者看起来不错。谢谢。 – Fergus 2013-03-18 06:00:44

您可以把头部和身体一起。所有你需要做的是用额外的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-18 05:26:39

啊哈......明白了。谢谢。虽然打乱了轨道的左对齐方式 - 但我想我也许能重置。 – Fergus 2013-03-18 06:03:03

JQuery用户界面拖动和交换两个div

回答

相关问题