次の例では、他のリストではなく内側のリストをソートします。私のライブの例では、リストはグループ化されたリスト機能によって生成されるため、各リストに ID を指定して、個別の並べ替え可能なオブジェクトを作成することはできません。剣道ネイティブ リストビュー グループ化を使用して、並べ替え可能な内部リストのセットを作成するにはどうすればよいですか?
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Unable to sort inner list in kendo nested list">
<base href="http://demos.telerik.com/kendo-ui/sortable/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<ul class="playlist" kendo-sortable k-placeholder="placeholder" k-hint="hint">
<li>Happy
<ul>
<li>Papercut <span>3:04</span></li>
<li>One Step Closer <span>2:35</span></li>
<li>With You <span>3:23</span></li>
<li>Points of Authority <span>3:20</span></li>
<li>Crawling <span>3:29</span></li>
</ul>
</li>
<li>Sad
<ul>
<li>Runaway <span>3:03</span></li>
<li>By Myself <span>3:09</span></li>
<li>In the End <span>3:36</span></li>
<li>A Place for My Head <span>3:04</span></li>
<li>Forgotten <span>3:14</span></li>
<li>Cure for the Itch <span>2:37</span></li>
<li>Pushing Me Away <span>3:11</span></li>
</ul>
</li>
</ul>
</div>
<style>
.playlist {
margin: 30px auto;
padding: 10px;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
.playlist li {
list-style-type: none;
position: relative;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
cursor: move;
}
.playlist li:hover {
background-color: #dceffd;
}
.playlist li span {
position: absolute;
right: 5px;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.placeholder = function(element) {
return element.clone().addClass("placeholder").text("drop here");
};
$scope.hint = function(element) {
return element.clone().addClass("hint");
};
})
</script>
</body>
</html>