如何使用 kendo ui 的控件和框架使每个列表项可拖动

How can I make each list item draggable using kendo ui's control and framework

本文关键字：列表 拖动 框架 kendo 何使用 ui 控件      更新时间：2023-09-26

我使用的是剑道UI的2012.1.322版本。

我有一个剑道UI列表视图。我正在使用传输剑道数据源（使用 GET 调用返回 JSON 的 Web 服务）。我希望一些JavaScript在绑定列表视图后运行。

我的目标是使每个列表项都使用剑道拖放框架。

是否有像"dataBound"，"成功"之类的事件或某种技巧来实现这一目标。

这是示例代码 

<script type="text/javascript">
  $(document).ready(function() {
    $("#fileAlist").kendoListView({
        template: "<li class='"draggable'">${Name}</li>",
        dataSource:
            new kendo.data.DataSource({
                transport: {
                    read: {
                        url: 'http://www.somedomain.com/search',
                        dataType: "json",
                        type: "GET",
                        contentType: "application/json; charset=utf-8"
                    }
                }
            })
    });
  });
</script>

我希望在数据通过异步数据源绑定后触发它，以便每个<li>都成为可拖动的对象。

$（".draggable"）.kendoDraggable（）;

我尝试过的一些事情

  • 我尝试使用dataBound事件，但这在获取数据并且尚未呈现列表后立即触发。

  • 我尝试了change事件，但这似乎没有在数据绑定过程中触发，我希望它可以在完成渲染后触发。没有这样的运气。

试一试：

标记列表视图

，这将需要更改样式，因为列表视图的边框在项目符号点中间看起来很奇怪。无论哪种方式，这都将演示所需的功能。

<ul>
     <div id="contactList" style="width: 400px;"></div>
</ul>

Kendoui JavaScript

<script type="text/javascript" >
  $(document).ready(function () {
      var datasource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: "...",  
                  dataType: "json",
                  contentType: "application/json; charset=utf-8",
                  type: "GET"
              }
          }
      });
      var contactsListView = $("#contactList").kendoListView({
          dataSource: datasource,
          template: '<li>${ Name }</li>'
      }); 
      contactsListView.kendoDraggable({
          filter: "div > li",  //select all li elements in the #contactList div
          hint: function(row) {
              return row.clone();  //returns the same mark up as the template <li>some name</li>
          }
      });
  });
</script>​

你可以使用 kendoDraggable "filter" 属性，它将接受任何有效的 Jquery filter。这是在列表视图之间拖放剑道UI的工作示例的链接。剑道UI在列表视图之间拖放分步教程

希望这对你有帮助。

相关文章：