0

.NET Web ページに 2 つの TreeView コンポーネントがあります。あるツリーから別のツリーにノードをドラッグ アンド ドロップしたいのですが、その逆はしたくありません。また、特定のレベル (最下位レベル) でアイテムをドラッグ アンド ドロップし、特定のレベル (2 番目に低いレベル) でアイテムをドロップしたいと考えています。ドラッグ アンド ドロップで同様のカスタマイズを行うカスタム コードを Flex で作成しましたが、.NET の初心者であり、ここではまったくわかりません。誰かアドバイスをください。これはプロトタイプであるため、必要なのは基本的な機能だけですが、最終的には、これらの移動操作のデータを更新するためにデータベースへのリアルタイム呼び出しを実行するために、これらのドロップが必要になります。

4

1 に答える 1

1

OnClientNodeDroppedこれは、イベント ハンドラーを使用して JavaScript で非常に簡単に行うことができます。ハンドラーを使用して、OnClientNodeDragStartedドラッグ イベントが目的のレベルに達していない場合にキャンセルすることもできます。ダウンロード可能なドラッグ アンド ドロップ ツリービューのサンプルをここに投稿しました。以下は、プロジェクトのサンプル コードです。

<%@ 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>
于 2010-03-25T14:43:15.570 に答える