kendo ui jquery treeview禁用内部拖放,但允许拖放到列表框

woobm2wo  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(403)

嘿,我正在尝试禁用treeview中的拖放功能(因为用户将无法在treeview中的任何位置移动任何项目)。然而,我并没有提出解决这个问题的办法。
我仍然希望用户能够将treeview中的项目拖放到我的listview框,并将其拖放回treeview框。
那么,当从树视图中拖放到我的列表框时,是否可以禁用树视图中的拖放功能?

rggaifut

rggaifut1#

一个选项是,如果您确定删除操作正在树视图中删除,则取消删除操作。该功能仍适用于列表框:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
  <div id="treeview-left"></div>
  <select id="optional" ></select>

  <script>
      $("#treeview-left").kendoTreeView({
        dragAndDrop: true,
        drop: onDrop,
        dataSource: [
            { id: 1, text: "Furniture", expanded: true, items: [
            { id: 2, text: "Tables & Chairs" },
            { id: 3, text: "Sofas" },
            { id: 4, text: "Occasional Furniture" }
            ] },
            { id: 5, text: "Decor", items: [
            { id: 6, text: "Bed Linen" },
            { id: 7, text: "Curtains & Blinds" },
            { id: 8, text: "Carpets" }
            ] }
        ]
      });

      $("#optional").kendoListBox({
        dataTextField: "text",
        dataValueField: "id",
        dataSource: [{ id: 8, text: "Other products" }]
      });

      function onDrop(e){   
        if ($(e.destinationNode).closest('.k-treeview').length) {
          e.preventDefault();
          return false;
        }

        var item = e.sender.dataItem(e.sourceNode);         
        var listbox = $('#optional').data('kendoListBox');         
        listbox.add(item)
        if(item.hasChildren){
            for(var p=0; p <item.items.length;p++){
                listbox.add(item.items[p])
            }
        }
      }
  </script>
</body>
</html>

道场
诀窍是:

if ($(e.destinationNode).closest('.k-treeview').length) {
      e.preventDefault();
      return false;
}

但是,该界面仍然显示了在树状视图中掉落的可能性,这是唯一的缺点。

相关问题