Jquery UI Sortierbare Eindämmung funktioniert nicht ordnungsgemäß in AngularJS

Question

Ich habe eine Tabelle mit sortierbaren Jquery UI-Funktionen erstellt. Die Tabelle enthält Kopfzeilen und die Kopfzeilen jeweils einige Unterzeilen. Ich muss sortierbare (Drag & Drop) Aktivitäten sowohl in Kopfzeilen als auch in Unterzeilen durchführen. Die sortierbare Aktivität der Kopfzeile funktioniert einwandfrei.

Aber es ist Sortierung der Unterreihen funktioniert ordnungsgemäß zum ersten Mal, dann wird es nicht richtig funktionieren. Der Cursor ist beim Ziehen von Unterreihen unscharf.

Sortierbare Aktivitäten von Unterzeilen (Drag & Drop) sollten innerhalb des übergeordneten Containments ausgeführt werden.

Wie löse ich es?

var app = angular.module('MyApp', []) 
 
app.controller('MyController', function($scope) { 
 
    $scope.num = 1; 
 
    $scope.headings = [{ 
 
    order: "1", 
 
    title: "Non Verbal Communication", 
 
    rows: { 
 
     sno: "1", 
 
     dept: [{ 
 
     id: 1, 
 
     name: "Eye Contact and body Language", 
 
     mark: 3 
 
     }, ] 
 
    } 
 
    }, { 
 
    order: "2", 
 
    title: "Verbal Communication", 
 
    rows: { 
 
     sno: "1", 
 
     dept: [{ 
 
     id: 2, 
 
     name: "Concise and appropriate Response", 
 
     mark: 2 
 
     }, { 
 
     id: 3, 
 
     name: "Language Accuracy", 
 
     mark: 6 
 
     }, { 
 
     id: 4, 
 
     name: "Understanding of company", 
 
     mark: 2 
 
     }, { 
 
     id: 5, 
 
     name: "Voice Quality and intonation", 
 
     mark: 2 
 
     }] 
 
    } 
 
    }, { 
 
    order: "3", 
 
    title: "Other Aspects", 
 
    rows: { 
 
     sno: "1", 
 
     dept: [{ 
 
     id: 6, 
 
     name: "Professional attire", 
 
     mark: 8 
 
     }, { 
 
     id: 7, 
 
     name: "Attitude and self", 
 
     mark: 8 
 
     }, { 
 
     id: 8, 
 
     name: "Questioning Ability", 
 
     mark: 8 
 
     }, ] 
 
    } 
 
    }]; 
 

 

 
}); 
 

 

 
app.directive('demo', function() { 
 
    return { 
 
    link: function() { 
 
     $('.custom table').sortable({ 
 
     items: ".details_info", 
 
     containment: 'parent', 
 
     cursor: 'move', 
 
     appendTo: 'body', 
 

 
     }); 
 

 
     $('.custom').sortable({ 
 
     items: "tbody", 
 
     cursor: 'move', 
 
     handle: '.details_header', 
 
     tolerance: 'pointer' 
 
     }); 
 
    } 
 

 
    } 
 
}) 
 

 
app.controller('customController', ['$scope', 
 
    function($scope) { 
 
    $scope.showingContent = true; 
 
    $scope.showing = function() { 
 

 
     if ($scope.showingContent) { 
 

 
     $scope.showingContent = false; 
 
     } else { 
 
     $scope.showingContent = true; 
 
     } 
 

 
    } 
 

 
    } 
 
]);

.custom th, 
 
.custom td { 
 
    padding: 10px; 
 
    border: 1px solid #95cbea; 
 
} 
 
.custom table { 
 
    overflow: hidden; 
 
} 
 
.details_info td { 
 
    border: 1px solid transparent !important; 
 
} 
 
.details_info:last-child td { 
 
    border-bottom: 1px solid #95cbea !important; 
 
} 
 
.details_info td:first-child { 
 
    border-left: 1px solid #95cbea !important; 
 
} 
 
.details_info td:last-child { 
 
    border-right: 1px solid #95cbea !important; 
 
} 
 
.custom .ui-sortable-helper { 
 
    display: table; 
 
} 
 
.details_info.ui-sortable-helper td { 
 
    border-top: 1px solid transparent !important; 
 
    border-right: 1px solid transparent !important; 
 
    border-left: 1px solid transparent !important; 
 
    border-bottom: 1px solid transparent !important; 
 
} 
 
body, 
 
.custom, 
 
.table_body, 
 
.custom table, 
 
.custom table tr { 
 
    overflow-y: auto !important; 
 
    overflow-x: hidden !important; 
 
    height: 100% !important; 
 
} 
 
.custom .details_info td {}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<html> 
 

 
<body ng-app="MyApp"> 
 
    <div class="box-body no-padding main_table eval_student_list" demo ng-controller="MyController"> 
 
    <div class="custom" demo> 
 
     <table width="100%"> 
 
     <thead> 
 
      <tr> 
 
      <th>no</th> 
 
      <th>object</th> 
 
      <th>value</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody class="table_body" ng-repeat="row in headings" ng-controller="customController"> 
 

 
      <tr class="details_header"> 
 
      <td>{{ row.order }}</td> 
 
      <td><a class="accordion_td" style="margin-right:10px;" changeicon ng-click="showing()"><i class="fa fa-lg fa-angle-down"></i></a> 
 
       <input ng-model="isAllSelected" type="checkbox">{{ row.title }}</td> 
 
      <td>{{ row.mark }}</td> 
 
      </tr> 
 

 
      <tr class="details_info" ng-show="showingContent" ng-repeat="col in row.rows.dept"> 
 
      <td>{{ col.id1 }}</td> 
 
      <td> 
 
       <input type="checkbox" ng-model="all" ng-checked="isAllSelected">{{ col.name }}</td> 
 
      <td>{{ col.mark }}</td> 
 
      </tr> 
 

 

 
     </tbody> 
 
     </table> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

Answer 1

jQuery UI intern Klone und bewegt sich um DOM-Gehalt, und sie haben nicht viel über die Kommentar-Knoten sorgen. AngularJS ng-repeat funktioniert basierend auf den generierten Kommentarknoten. Normalerweise werden Sie Probleme bekommen, es sei denn, Sie behandeln solche Dinge.

Verwenden Sie ui-sortable Bibliothek, die eine eckige Wrapper um jQuery UI sortierbar von eckigen UI-Team geschrieben ist, die sich um solche Dinge kümmert.