创建可在编辑器窗口之间拖动的拖放 UI

版本 2021.3+

此示例演示如何使用 UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 词汇表 工具包的拖动事件以及 UnityEditor.DragAndDrop 类来启用窗口之间的拖放 UI。

示例概述

此示例创建了两个自定义编辑器窗口。您可以将资源从 项目窗口显示 Assets 文件夹（项目选项卡）内容的窗口 更多信息
参见 词汇表 拖到编辑器窗口中。您还可以将同一资源从一个窗口拖到另一个窗口。

您可以在此 GitHub 存储库 中找到此示例创建的完整文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容：

• UI 构建器
• USS
• UXML
• 操作器
• 拖放事件
• 指针事件
• UnityEditor.DragAndDrop

定义编辑器窗口的内容

使用内置的 视觉元素视觉树的一个节点，它实例化或派生自 C# VisualElement 类。您可以设置外观样式、定义行为并在屏幕上将其显示为 UI 的一部分。 更多信息
参见 词汇表 在 UXML 文件中定义每个编辑器窗口的内容。每个编辑器窗口都包含背景、标题、放置区域和文本。在 USS 文件中设置视觉元素的样式。

1. 使用任何模板创建一个 Unity 项目。

2. 创建一个名为 drag-and-drop-across-window 的文件夹以存储所有文件。

3. 创建一个名为 DragAndDrop.uxml 的 UI 文档，内容如下：

   <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
       <ui:VisualElement class="background">
           <ui:VisualElement class="header">
               <ui:Label text="Drag And Drop Sample" display-tooltip-when-elided="true" class="header__label" />
           </ui:VisualElement>
           <ui:VisualElement class="drop-area">
               <ui:Label text="Drag an asset here..." display-tooltip-when-elided="true" class="drop-area__label" />
           </ui:VisualElement>
       </ui:VisualElement>
   </ui:UXML>
   

4. 创建一个名为 DragAndDrop.uss 的样式表，内容如下：

   .background {
       flex-grow: 1;
       background-color: rgba(30, 30, 30, 255);
   }
   
   .header {
       align-items: center;
       margin-left: 10px;
       margin-right: 10px;
       margin-top: 10px;
       margin-bottom: 10px;
       padding-left: 5px;
       padding-right: 5px;
       padding-top: 5px;
       padding-bottom: 5px;
       background-color: rgba(112, 128, 144, 255);
       border-left-color: rgba(211, 211, 211, 255);
       border-right-color: rgba(211, 211, 211, 255);
       border-top-color: rgba(211, 211, 211, 255);
       border-bottom-color: rgba(211, 211, 211, 255);
       border-left-width: 2px;
       border-right-width: 2px;
       border-top-width: 2px;
       border-bottom-width: 2px;
   }
   
   .header__label {
       font-size: 18px;
       color: rgba(255, 255, 255, 255);
   }
   
   .drop-area {
       flex-grow: 1;
       align-items: center;
       justify-content: center;
       margin-left: 10px;
       margin-right: 10px;
       margin-top: 10px;
       margin-bottom: 10px;
       padding-left: 5px;
       padding-right: 5px;
       padding-top: 5px;
       padding-bottom: 5px;
       background-color: rgba(112, 128, 144, 255);
       border-left-color: rgba(211, 211, 211, 255);
       border-right-color: rgba(211, 211, 211, 255);
       border-top-color: rgba(211, 211, 211, 255);
       border-bottom-color: rgba(211, 211, 211, 255);
       border-left-width: 2px;
       border-right-width: 2px;
       border-top-width: 2px;
       border-bottom-width: 2px;
       border-top-left-radius: 20px;
       border-bottom-left-radius: 20px;
       border-top-right-radius: 20px;
       border-bottom-right-radius: 20px;
   }
   
   .drop-area--dropping {
       opacity: 0.4;
       background-color: rgba(0, 100, 0, 255);
   }
   
   .drop-area__label {
       -unity-font-style: italic;
       color: rgba(255, 255, 255, 255);
   }
   

5. 双击 DragAndDrop.xml 以在 UI 构建器中打开它。

6. 将 DragAndDrop.uss 添加为现有的 USS。

创建一个操作器来存储事件回调

操作器是一个注册和注销与输入相关的事件回调的对象。在 C# 脚本中创建一个自定义操作器以注册编辑器窗口的指针事件和拖动事件。

1. 在 drag-and-drop-across-window 文件夹中，创建一个名为 Editor 的文件夹。

2. 在 Editor 文件夹中，创建一个名为 DragAndDropManipulator.cs 的 C# 文件，内容如下：

   using UnityEngine;
   using UnityEditor;
   using UnityEngine.UIElements;
   
   namespace Samples.Editor.General
   {
       // The DragAndDropManipulator class is a private class within DragAndDropWindow.
       public partial class DragAndDropWindow
       {
           // DragAndDropManipulator is a manipulator that stores pointer-related callbacks, so it inherits from
           // PointerManipulator.
           class DragAndDropManipulator : PointerManipulator
           {
               // The Label in the window that shows the stored asset, if any.
               Label dropLabel;
               // The stored asset object, if any.
               Object droppedObject = null;
               // The path of the stored asset, or the empty string if there isn't one.
               string assetPath = string.Empty;
   
               public DragAndDropManipulator(VisualElement root)
               {
                   // The target of the manipulator, the object to which to register all callbacks, is the drop area.
                   target = root.Q<VisualElement>(className: "drop-area");
                   dropLabel = root.Q<Label>(className: "drop-area__label");
               }
   
               protected override void RegisterCallbacksOnTarget()
               {
                   // Register a callback when the user presses the pointer down.
                   target.RegisterCallback<PointerDownEvent>(OnPointerDown);
                   // Register callbacks for various stages in the drag process.
                   target.RegisterCallback<DragEnterEvent>(OnDragEnter);
                   target.RegisterCallback<DragLeaveEvent>(OnDragLeave);
                   target.RegisterCallback<DragUpdatedEvent>(OnDragUpdate);
                   target.RegisterCallback<DragPerformEvent>(OnDragPerform);
               }
   
               protected override void UnregisterCallbacksFromTarget()
               {
                   // Unregister all callbacks that you registered in RegisterCallbacksOnTarget().
                   target.UnregisterCallback<PointerDownEvent>(OnPointerDown);
                   target.UnregisterCallback<DragEnterEvent>(OnDragEnter);
                   target.UnregisterCallback<DragLeaveEvent>(OnDragLeave);
                   target.UnregisterCallback<DragUpdatedEvent>(OnDragUpdate);
                   target.UnregisterCallback<DragPerformEvent>(OnDragPerform);
               }
   
               // This method runs when a user presses a pointer down on the drop area.
               void OnPointerDown(PointerDownEvent _)
               {
                   // Only do something if the window currently has a reference to an asset object.
                   if (droppedObject != null)
                   {
                       // Clear existing data in DragAndDrop class.
                       DragAndDrop.PrepareStartDrag();
   
                       // Store reference to object and path to object in DragAndDrop static fields.
                       DragAndDrop.objectReferences = new[] { droppedObject };
                       if (assetPath != string.Empty)
                       {
                           DragAndDrop.paths = new[] { assetPath };
                       }
                       else
                       {
                           DragAndDrop.paths = new string[] { };
                       }
   
                       // Start a drag.
                       DragAndDrop.StartDrag(string.Empty);
                   }
               }
   
               // This method runs if a user brings the pointer over the target while a drag is in progress.
               void OnDragEnter(DragEnterEvent _)
               {
                   // Get the name of the object the user is dragging.
                   var draggedName = string.Empty;
                   if (DragAndDrop.paths.Length > 0)
                   {
                       assetPath = DragAndDrop.paths[0];
                       var splitPath = assetPath.Split('/');
                       draggedName = splitPath[splitPath.Length - 1];
                   }
                   else if (DragAndDrop.objectReferences.Length > 0)
                   {
                       draggedName = DragAndDrop.objectReferences[0].name;
                   }
   
                   // Change the appearance of the drop area if the user drags something over the drop area and holds it
                   // there.
                   dropLabel.text = $"Dropping '{draggedName}'...";
                   target.AddToClassList("drop-area--dropping");
               }
   
               // This method runs if a user makes the pointer leave the bounds of the target while a drag is in progress.
               void OnDragLeave(DragLeaveEvent _)
               {
                   assetPath = string.Empty;
                   droppedObject = null;
                   dropLabel.text = "Drag an asset here...";
                   target.RemoveFromClassList("drop-area--dropping");
               }
   
               // This method runs every frame while a drag is in progress.
               void OnDragUpdate(DragUpdatedEvent _)
               {
                   DragAndDrop.visualMode = DragAndDropVisualMode.Generic;
               }
   
               // This method runs when a user drops a dragged object onto the target.
               void OnDragPerform(DragPerformEvent _)
               {
                   // Set droppedObject and draggedName fields to refer to dragged object.
                   droppedObject = DragAndDrop.objectReferences[0];
                   string draggedName;
                   if (assetPath != string.Empty)
                   {
                       var splitPath = assetPath.Split('/');
                       draggedName = splitPath[splitPath.Length - 1];
                   }
                   else
                   {
                       draggedName = droppedObject.name;
                   }
   
                   // Visually update target to indicate that it now stores an asset.
                   dropLabel.text = $"Containing '{draggedName}'...\n\n" *
                       $"(You can also drag from here)";
                   target.RemoveFromClassList("drop-area--dropping");
               }
           }
       }
   }
   

创建编辑器窗口并实例化操作器

在 C# 脚本中创建两个自定义编辑器窗口，并为每个编辑器窗口实例化一个操作器。

1. 创建一个名为 DragAndDropWindow.cs 的 C# 文件，内容如下：

   using UnityEditor;
   using UnityEngine;
   using UnityEngine.UIElements;
   
   namespace Samples.Editor.General
   {
       public partial class DragAndDropWindow : EditorWindow
       {
           // This is the visual tree that contains the UI structure of the window.
           [SerializeField]
           VisualTreeAsset uxmlAsset;
   
           // This manipulator contains all of the event logic for this window.
           DragAndDropManipulator manipulator;
   
           // This is the minimum size of both windows.
           readonly static Vector2 windowMinSize = new(300, 180);
   
           // These are the starting positions of the windows.
           readonly static Vector2 windowAPosition = new(50, 50);
           readonly static Vector2 windowBPosition = new(450, 100);
   
           // These are the titles of the windows.
           const string windowATitle = "Drag and Drop A";
           const string windowBTitle = "Drag and Drop B";
   
           // This method opens two DragAndDropWindows when a user selects the specified menu item.
           [MenuItem("Window/UI Toolkit/Drag And Drop (Editor)")]
           public static void OpenDragAndDropWindows()
           {
               // Create the windows.
               var windowA = CreateInstance<DragAndDropWindow>();
               var windowB = CreateInstance<DragAndDropWindow>();
   
               // Define the attributes of the windows and display them.
               windowA.minSize = windowMinSize;
               windowB.minSize = windowMinSize;
               windowA.Show();
               windowB.Show();
               windowA.titleContent = new(windowATitle);
               windowB.titleContent = new(windowBTitle);
               windowA.position = new(windowAPosition, windowMinSize);
               windowB.position = new(windowBPosition, windowMinSize);
           }
   
           void OnEnable()
           {
               if (uxmlAsset != null)
               {
                   uxmlAsset.CloneTree(rootVisualElement);
               }
   
               // Instantiate manipulator.
               manipulator = new(rootVisualElement);
           }
   
           void OnDisable()
           {
               // The RemoveManipulator() method calls the Manipulator's UnregisterCallbacksFromTarget() method.
               manipulator.target.RemoveManipulator(manipulator);
           }
       }
   }
   

2. 在项目窗口中，选择 DragAndDropWindow.cs 并将 DragAndDrop.uxml 拖到 检查器一个 Unity 窗口，显示有关当前选定游戏对象、资源或项目设置的信息，允许您检查和编辑值。 更多信息
   参见 词汇表 中的 Uxml 资源。

3. 从菜单中，选择 窗口 > UI 工具包 > 拖放（编辑器）。将打开两个拖放窗口。您可以将资源从项目窗口拖到这些窗口中的放置区域。您还可以将同一资源从一个窗口拖到另一个窗口。

其他资源

• 在自定义编辑器窗口内创建拖放 UI
• 操作器