title: Sortable jQueryUI Table Rows
body: <p>I have a table which displays parent-child relationship. I have made the table sortable using jQueryUI.</p>
  
  <p>However, I want to restrict drag/drop of rows to within their parent.</p>
  
  <p>So, for example, the child items - "Manual Items" and "Rec" - should only be sortable with their parent i.e. within "Positions" and should be restricted from moving to another parent.</p>
  
  <p>Is this possible? I have tried adding <em>containment: "parent"</em> but no change.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var currentID = 0;
  $("#sortable").sortable({
      start: function (event, ui) {
          //debugger;
          currentID = $(ui.item).index();
          //console.log($(ui.item).index());
      },
      cancel: ".ui-state-disabled",
      update: function (event, ui) {
          //debugger;
          //console.log($(ui.item).data('id'));
          var newID = $(ui.item).index();
          alert('Current: ' + currentID.toString());
          alert('New: ' + newID.toString());
      }
  });
  $(".sortable").draggable({
      containment: "parent"
  });
  
  var viewModel = function(data) {
      var self = this;
     
      self.tasks = ko.observableArray([
      {TaskID: 1, TaskName: "ManualItems", Parent: 3},
      {TaskID: 2, TaskName: "Trades", Parent: null},
      {TaskID: 3, TaskName: "Positions", Parent: null},
      {TaskID: 4, TaskName: "Rec", Parent: 3},
      {TaskID: 5, TaskName: "Cash", Parent: null},
      {TaskID: 6, TaskName: "ReportA", Parent: 5},
      {TaskID: 7, TaskName: "FileIn", Parent: 2},
      {TaskID: 8, TaskName: "ReportB", Parent: 5}
      ]); 
      
    self.getChildren = function(row) {
      return ko.utils.arrayFilter(this.tasks(), function(item) {
        return item.Parent === row.TaskID
      });
    }
  
    self.filteredtasks = ko.computed(function() {
      return ko.utils.arrayFilter(this.tasks(), function(item) {
        return !item.Parent;
      });
    }, this);    
     
  };
  
  ko.applyBindings(new viewModel());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;table class="table table-hover"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Parent ID&lt;/th&gt;
                  &lt;th&gt;Parent Task&lt;/th&gt;
                  &lt;th&gt;Task ID&lt;/th&gt;
                  &lt;th&gt;Task name&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id="sortable"&gt;
              &lt;!-- ko foreach: filteredtasks --&gt;
              &lt;tr class="ui-state-default ui-state-disabled"&gt;
                  &lt;td class="ui-state-default" data-bind="text: TaskID"&gt;&lt;/td&gt;
                  &lt;td class="ui-state-default" data-bind="text: TaskName"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;!-- ko foreach: $root.getChildren($data) --&gt;
              &lt;tr class="ui-state-default"&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td data-bind="text: TaskID"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: TaskName"&gt;&lt;/td&gt;
                  &lt;td data-bind="text: Position"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;!-- /ko --&gt;
              &lt;!-- /ko --&gt;
  
          &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/fvyw5yfv/" rel="nofollow noreferrer">http://jsfiddle.net/fvyw5yfv/</a></p>