Drag and Drop Div columns - handlebars.js

Question

I have made a table with div.I am trying to drag
<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>
columns from div.same time the the remaining items from the columns should moov..How it possible?

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>