無法使用Kendo Sortable對內部列表進行排序

Question

在下面的示例中，我要對內部列表而不是其他列表進行排序。 在我的實際示例中，列表是由分組列表功能生成的，因此我無法為每個列表提供一個ID並創建一個單獨的可排序對象。 如何使用Kendo本機Listview分組創建一組可排序的內部列表？

<!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>

http://jsbin.com/qubuguh/edit?html，輸出

Answer 1

這可以通過使用描述子li元素的過濾器來完成。 例如：

<ul class="playlist" kendo-sortable k-filter="'ul>li'" k-placeholder="placeholder" k-hint="hint">

無法使用Kendo Sortable對內部列表進行排序

問題描述

1 個解決方案

解決方案1
0 2016-04-08 01:08:33

無法使用Kendo Sortable對內部列表進行排序

問題描述

1 個解決方案

解決方案1 0 2016-04-08 01:08:33

解決方案1
0 2016-04-08 01:08:33