Sortable jQueryUIテーブル行

Question

私は親子関係を表示するテーブルを持っています。 jQueryUIを使用してテーブルをソート可能にしました。

ただし、親の中で行のドラッグ/ドロップを制限したいと考えています。

たとえば、「手動アイテム」と「録画」の子アイテムは、親と、つまり「位置」内でのみソート可能であり、別の親に移動することを制限する必要があります。

これは可能ですか？私は封じ込めを追加しようとしました： "親"しかし変更はありません。

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([ 
 
    \t {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());

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<table class="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th>Parent ID</th> 
 
       <th>Parent Task</th> 
 
       <th>Task ID</th> 
 
       <th>Task name</th> 
 
       <th>Position</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="sortable"> 
 
      <!-- ko foreach: filteredtasks --> 
 
      <tr class="ui-state-default ui-state-disabled"> 
 
       <td class="ui-state-default" data-bind="text: TaskID"></td> 
 
       <td class="ui-state-default" data-bind="text: TaskName"></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <!-- ko foreach: $root.getChildren($data) --> 
 
      <tr class="ui-state-default"> 
 
       <td></td> 
 
       <td></td> 
 
       <td data-bind="text: TaskID"></td> 
 
       <td data-bind="text: TaskName"></td> 
 
       <td data-bind="text: Position"></td> 
 
      </tr> 
 
      <!-- /ko --> 
 
      <!-- /ko --> 
 

 
     </tbody> 
 
    </table>

http://jsfiddle.net/fvyw5yfv/

Answer 1

私は、各行のデータのParentID =「のParentID」attributを使用して似たような解決した後、ソート可能なストップ機能に私はちょうどそのデータを取得しているかどうかを確認ドロップされた現在のテーブルの正しいIDは、次のようなものでなければなりません。

$("#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()); 
    },stop: function(event, ui){ 
     if(ui.item.attr("data-parent") == 2){ 
     alert('wrong parent'); 
     } 
    } 
}); 

これはテストです：http://jsfiddle.net/Kanzari/fvyw5yfv/7/

希望する、