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

Question

我使用的是 2012.1.322 版的 Kendo UI。

我有一个 Kendo UI ListView。我正在使用传输剑道数据源(使用返回 JSON 的 GET 调用 Web 服务)。我希望在绑定(bind) ListView 后运行一些 javascript。

我的目标是让每个列表项都使用 kendo drag and drop framework .

是否有诸如“dataBound”、“success”之类的事件或某种技巧来实现这一点。

这里是示例代码

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

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

$(".draggable").kendoDraggable();

我尝试过的一些东西

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

• 我试过了 change event , 但这在数据绑定(bind)过程中似乎没有触发，我曾希望它可能在完成渲染后触发。没有这样的运气。

Answer 1

试一试:

标记 ListView ，这将需要更改样式，因为 ListView 的边框在项目符号点中间看起来很奇怪。这将以任何一种方式展示所需的功能。

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