Kendo UI JQuery treeview 禁用内部拖放，但允许拖放到列表框答案

【问题标题】：Kendo UI JQuery treeview disable drag/drop inside but allow drag/drop to listboxKendo UI JQuery treeview 禁用内部拖放，但允许拖放到列表框
【发布时间】：2021-07-23 15:54:27
【问题描述】：

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

我仍然希望用户能够将树视图内的项目拖放到我的列表视图框中，并将其拖放回树视图框。

那么当保持从那里拖放到我的列表框时，是否可以禁用树视图内的拖放功能？

【问题讨论】：

我认为您所要求的应该是可能的。有我们可以查看的示例代码吗？

标签： javascript jquery kendo-ui kendo-treeview kendo-listbox

【解决方案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，这是唯一的缺点。

【讨论】：

干得好不要投票。这就像我需要的那样！