Question

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

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

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

1 个答案: