如何自定义两个 ComponentOne TreeView 组件之间的拖放？答案

【问题标题】：How can I customize drag-and-drop between two ComponentOne TreeView components?如何自定义两个 ComponentOne TreeView 组件之间的拖放？
【发布时间】：2009-10-29 21:29:03
【问题描述】：

我在 .NET 网页中有两个 TreeView 组件。我想将节点从一棵树拖放到另一棵树，反之亦然。我还想将项目拖放到某个级别（最低级别），然后将它们拖放到某个级别（第二低级别）。我在 Flex 中编写了自定义代码来对拖放进行类似的自定义，但我是 .NET 的新手，在这里真的不知道。有人可以给我一些建议。这是一个原型，所以我只需要基本功能，但最终我将需要这些 drop 来执行对数据库的实时调用，以更新这些移动操作的数据。

【问题讨论】：

标签： .net drag-and-drop treeview componentone

【解决方案1】：

您可以使用 OnClientNodeDropped 事件处理程序在 JavaScript 中轻松完成此操作。如果拖动事件不在所需级别，您还可以使用OnClientNodeDragStarted 处理程序取消拖动事件。我在这里发布了一个可下载的drag and drop treeview sample。以下是该项目的示例代码。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="cc1" Namespace="C1.Web.UI.Controls.C1TreeView" Assembly="C1.Web.UI.Controls.3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Treeview Test</title>
<script type="text/javascript" id="ComponentOneClientScript2">
    function adminTV_OnClientNodeDropped(sender, eventArgs) {
        var dropTarget = eventArgs.get_desObj();
        //if drop to the root level.the droptarget is treeview
        if (dropTarget == sender) {
            eventArgs.set_canceled(true);
            return;
        }
        var node = eventArgs.get_node();
        //the other treeview's node can't drop to the admin's.
        if (node.get_treeView() != dropTarget.get_treeView()) {
            eventArgs.set_canceled(true);
            return;
        }
        //prevent drop the admin's node to the other level.
        if (dropTarget.get_level() != 0) {
            eventArgs.set_canceled(true);
            return;
        }
  };
  function adminTV_OnClientNodeDragStarted(sender, eventArgs) {
      //can't drag root node.
      if (eventArgs.get_node().get_level() == 0) {
          eventArgs.set_canceled(true);
      }
  };

  function userTV_OnClientNodeDropped(sender, eventArgs) {
      var dropTarget = eventArgs.get_desObj();
      //if drop to the root level.the droptarget is treeview
      if (dropTarget == sender) {
          eventArgs.set_canceled(true);
          return;
      }
      //prevent drop the node to the other level.
      if (dropTarget.get_level() != 0) {
          eventArgs.set_canceled(true);
          return;
      }
  };
  function userTV_OnClientNodeDragStarted(sender, eventArgs) {
      //can't drag root node.
      if (eventArgs.get_node().get_level() == 0) {
          eventArgs.set_canceled(true);
      }
  };
</script>    
</head>
<body style="font-weight: 700">
<form id="form1" runat="server">
<div>


    <asp:ScriptManager runat="server"></asp:ScriptManager>


   <cc1:C1TreeView runat="server" ID="adminTV" AllowDragDrop="true" 
   VisualStyle="ArcticFox" VisualStylePath="~/C1WebControls/VisualStyles" 
        OnClientNodeDropped="adminTV_OnClientNodeDropped" 
        onclientnodedragstarted="adminTV_OnClientNodeDragStarted" >
        <Nodes>
            <cc1:C1TreeViewNode runat="server" Expanded="true" Selected="false" Text="Administrators">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin2">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin3">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin4">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
        </Nodes>
   </cc1:C1TreeView>

   <cc1:C1TreeView runat="server" ID="userTV" AllowDragDrop="true" 
   VisualStyle="ArcticFox" VisualStylePath="~/C1WebControls/VisualStyles" 
        OnClientNodeDropped="userTV_OnClientNodeDropped"
        onclientnodedragstarted="userTV_OnClientNodeDragStarted" >
        <Nodes>
            <cc1:C1TreeViewNode runat="server" Expanded="True" Selected="False" Text="Users">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User2">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User3">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User4">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User5">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User6">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
        </Nodes>
   </cc1:C1TreeView>

</div>
</form>
</body>
</html>

【讨论】：