Kendo UI JQuery 树视图禁用 drag/drop 内部但允许 drag/drop 到列表框

Question

嘿，我正在尝试禁用树视图中的 drag/drop（因为用户无法在树视图中的任何位置移动任何项目）。但是我没有想出解决这个问题的方法。

我仍然希望用户能够 drag/drop 将树视图中的项目移至我的列表视图框，并 drag/drop 将其返回树视图框。

那么，在将 drag/drop 从那里保留到我的列表框时，是否可以禁用树视图中的 drag/drop 功能？

Answer 1

如果您确定它正在树视图中放置，则一个选项是取消放置操作。该功能仍适用于列表框：

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

Dojo

诀窍是：

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

但是，界面仍然显示可以放入 TreeView，这是唯一的缺点。

Kendo UI JQuery 树视图禁用 drag/drop 内部但允许 drag/drop 到列表框

Kendo UI JQuery treeview disable drag/drop inside but allow drag/drop to listbox

javascript

jquery

kendo-ui

kendo-treeview

kendo-listbox