I've created a table with sortable Jquery UI features. The table contains header rows and each header rows having some sub rows respectively. I have to perform sortable(drag and drop) activities in both header rows and inside sub rows. Header row sortable activity works perfectly.
But it's sub rows sortable activity works properly for the first time then it will not working properly. Cursor is in out of focus while dragging sub rows.
Sub rows sortable activities(drag and drop) should be perform inside its parent containment.
How do I resolve it?
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>
