拖放Div列

Question

我已经用div制成了一张桌子。我正在尝试拖动

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>

<h2>Working  with Handlebars</h2>
<p>{{ text }}</p>
<div class="Table" id="container1">
    <div class="Heading" id="sortable">
        <div class="Cell">
            <p>No</p>
        </div>
        <div class="Cell">
            <p>Name</p>
        </div>
        <div class="Cell">
            <p>Email</p>
        </div>
    </div>    
    {{#each this.studDetails as |studDetails index|}}
    <div class="Row">
       <div class="Cell">{{index}} </div>
        <div class="Cell">{{ this.name }}</div>
        <div class="Cell">{{ this.email }}</div>
    </div>
   {{/each}}
    
</div>

同一时间来自div的列，列中的其余项应该移动。如何可能？

Answer 1

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>

<h2>Working  with Handlebars</h2>
   
<div class="Table" id="container1">
    <div class="Heading" id="sortable">
        <div class="Cell">
            <p>No</p>
        </div>
        <div class="Cell">
            <p>Name</p>
        </div>
        <div class="Cell">
            <p>Email</p>
        </div>
    </div>    
 
    <div class="Row">
       <div class="Cell">1</div>
        <div class="Cell">name1</div>
        <div class="Cell">test@test.com</div>
    </div>
     <div class="Row">
       <div class="Cell">2</div>
        <div class="Cell">name2</div>
        <div class="Cell">test2@test.com</div>
    </div>
    <div class="Row">
       <div class="Cell">3</div>
        <div class="Cell">name3</div>
        <div class="Cell">test3@test.com</div>
    </div>
 
    
</div>