拖放可排序的引导网格组织结构图

Question

我使用bootstrap的网格和jquery ui创建了一个组织结构图，用于拖放可排序的网格功能。我想要实现的是使用拖放排序来交换每个项目位置。我的问题是我似乎无法使它工作，布局搞乱了。这是我到目前为止所尝试的：

HTML

<div class="container noah-family-tree-container">
  <div class="row noah-family-header">
    <div class="col-md-12"> 
      <p> MY NOAH FAMILY </p>
    </div>
    <div class="underline"> </div>
  </div>

  <div class="row noah-family-tree grid">
      <div class="tree-head img-tree grow push">
        <a href="#" class="button tree-parent "> 
            <img src="images/female-img.png" class="img-responsive"> 
            <p>Goldilocks</p> 
       </a>
      </div>
  </div>

  <div id="child-content">
    <div class="row">
      <div class="tree-line-vertical"></div>
      <div class="tree-line-horizontal"></div>
    </div>

    <div class="row tree-row tree-child">
        <div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push">
          <a href="#" class="button tree-child1 "> 
            <img src="images/bear-img.png" class="img-responsive">
            <p>Papa Bear</p>
          </a>
        </div>

        <div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push">
          <a href="#" class="button tree-child2 "> <img src="images/bear-img.png" class="img-responsive"> 
            <p>Mama Bear</p>
          </a>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push">
          <a href="#" class="button tree-child3 "> <img src="images/bear-img.png" class="img-responsive"> 
            <p>Baby Bear</p>
          </a>
        </div>
    </div>

  </div>

  <div id="grandchild-content1">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-4 family-tree-line">
        <div class="tree-line-vertical"></div><div class="tree-line-horizontal2"></div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4 img-tree">  </div>
      <div class="col-md-4 col-sm-4 col-xs-4 img-tree">  </div>
    </div>

    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
        <a href="#" class="button ">  <img src="images/bear-img.png" class="img-responsive">
          <p>Harold Honey</p> 
        </a>
      </div>
        <div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
        <a href="#" class="button "> <img src="images/bear-img.png" class="img-responsive">
          <p>Patrick Porriage</p> 
        </a>
      </div>
        <div class="col-md-6 col-sm-6 col-xs-6 img-tree grow push"> </div>
    </div>
  </div>

  <div id="grandchild-content2">
    <div class="row">
      <div class="col-md-12 img-tree"> 
        <div class="tree-line-vertical"></div>
        <div class="tree-line-horizontal2-2"></div> 
      </div>
    </div>

    <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"> </div>
      <div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
        <a href="#" class="button ">  
            <img src="images/bear-img.png" class="img-responsive">
            <p>Harold Honey</p> 
        </a>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
        <a href="#" class="button "> 
            <img src="images/bear-img.png" class="img-responsive">
            <p>Patrick Porriage</p> 
        </a>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"> </div>
    </div>
  </div>

  <div id="grandchild-content3">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-4 family-tree-line"> </div>
      <div class="col-md-4 col-sm-4 col-xs-4 img-tree"> </div>
      <div class="col-md-4 col-sm-4 col-xs-4 img-tree content3-line">
        <div class="tree-line-vertical"></div><div class="tree-line-horizontal2"></div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-6 img-tree grow  push"> </div>
      <li>
        <div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
          <a href="#" class="button ">
            <img src="images/bear-img.png" class="img-responsive">
            <p>Harold Honey</p> 
          </a>
        </div>
      </li>
      <div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push">
        <a href="#" class="button "> 
            <img src="images/bear-img.png" class="img-responsive">
            <p>Patrick Porriage</p> 
        </a>
      </div>
    </div>
  </div>    

JQUERY

$(function () {
    $(".grid").sortable({
        tolerance: 'pointer',
        revert: 'invalid',
        placeholder: 'span2 well placeholder tile',
        forceHelperSize: true
    });
});

SCREENSHOT

FIDDLE

Here's a fiddle