1
ソート可能なJquery UI機能を備えたテーブルを作成しました。 表には、ヘッダー行と各行行にいくつかのサブ行が含まれています。ヘッダー行とサブ行内でソート可能な（ドラッグ＆ドロップ）アクティビティを実行する必要があります。ヘッダー行のソート可能なアクティビティは完全に機能します。Jquery UI Sortable ContainmentがAngularJSで正しく動作しない
しかし、それはサブ行のソート可能なアクティビティが初めて正常に動作してから正しく動作しません。サブ行をドラッグしている間、カーソルのフォーカスがずれています。
サブ行のソート可能なアクティビティ（ドラッグアンドドロップ）は、その親閉じ込め内で実行する必要があります。
どうすれば解決できますか？
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>
私は、ヘッダー行にはui-sortable、ヘッダーのサブ行にはui-sortableを使用しています。 – WallEE
@WallEEシーンの裏には、ui-sortableを使った角度uiソート可能な作品があります。あなたは両方のためにそれを使用することができます.. –