title: drag and drop functionality for a tree in table using angularjs
body: <p>I have a tree in a table. I would like to know how to add drag and drop functionality to the below tree using angularjs. Any help would be much appreciated. Plunkr added <a href="http://plnkr.co/edit/UBdmhH2dd1GnlJ0wMCAz?p=preview" rel="nofollow noreferrer">click here</a>. </p>
  
  <p>// html file</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="angular.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="style.css"/&gt;
  &lt;link rel="stylesheet" href="bootstrap.min.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;
    Tree Table and Checkbox with AngularJS
  &lt;/h1&gt;
  &lt;hr&gt;
  &lt;div class="wrapper" data-ng-app="testApp" data-ng-controller="treeTable"&gt;
    &lt;table class="table-nested"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;!-- &lt;th &gt;
            &lt;input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /&gt;
          &lt;/th&gt; --&gt;
          &lt;th&gt;
           &lt;input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /&gt; Name
          &lt;/th&gt;
          &lt;th class="cell-members"&gt;
            Version
          &lt;/th&gt;
          &lt;th&gt;
            Size
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="&amp;#39;table_tree.html&amp;#39;" data-ng-repeat="item in list"&gt;&lt;/tbody&gt;
    &lt;/table&gt;
    &lt;script id="table_tree.html" type="text/ng-template"&gt;
      &lt;tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)"&gt;
  
        &lt;td class="cell-name" ng-if="level &amp;amp;&amp;amp; level &amp;gt; 1"&gt;
        &lt;span style="padding-left: 30px" &gt;&amp;nbsp;  &lt;input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" /&gt;
          {{item.name}} &lt;/span&gt;
        &lt;/td&gt;
  &lt;td class="cell-name top-border" ng-if=" &amp;#40;&amp;#33;level &amp;amp;&amp;amp; level &amp;lt;&amp;#61; 1 &amp;#41; &amp;#124;&amp;#124 &amp;#40;level &amp;amp;&amp;amp; level &amp;lt;&amp;#61; 1&amp;#41;"&gt;
          &lt;span style="padding-left:11px" ng-click="item.opened = !item.opened"&gt;&lt;/span&gt;&amp;nbsp;&lt;input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" /&gt;
          {{item.name}}
        &lt;/td&gt;
  
  &lt;td class="cell-name top-border" ng-if="&amp;#33;level"&gt;
         &lt;span class="indent" ng-click="item.opened = !item.opened"&gt;&lt;/span&gt;&amp;nbsp;&lt;input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" /&gt;
          {{item.name}}
        &lt;/td&gt;
  
        &lt;td class="cell-members top-border"&gt;
          {{item.Version}} 
        &lt;/td&gt;
        &lt;td&gt;
          {{item.Size}}
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="children" ng-if="item.children &amp;amp;&amp;amp; item.children.length &amp;gt; 0"&gt;
        &lt;td colspan="3"&gt;
          &lt;table&gt;
            &lt;tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="&amp;#39;table_tree.html&amp;#39;" ng-init="level = level + 1" ng-repeat="item in item.children"&gt;&lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>