Create a drag-and-drop list and tree views between windows

Version: 2023.2+

Drag-and-drop is a common feature in UI design. You can use UI Toolkit to create a drag-and-drop UI inside a custom Editor window or inside an application built by Unity. This example demonstrates how to create a drag-and-drop UI with ListView and TreeView inside a custom Editor window.

Example overview

The example creates a split window that includes a lobby and two teams within a custom Editor window. The lobby is created with ListView. For demonstration purposes, one team is created with MultiColumnListView and another team is created with TreeView. The example uses a Toggle to enable and disable the drag-and-drop operation. Once enabled, you can drag the players to reorder them and drag them from the lobby list to the team lists, as shown below:

You can find the completed files that this example creates in this GitHub repository.

要件

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

• UI Builder
• ビジュアルツリー
• UXML
• USS
• ListView
• MultiColumnListView
• TreeView

Create the player data

To begin, create an asset to manage a list of players in the lobby. Create a script to define the struct of PlayerData that represents data for a player. The struct has three fields: a string name, an integer number, and a Texture2D object icon. Mark the fields with the [SerializeField] attribute, so that their values can be serialized and stored in Unity’s data format. Create a Collection Database asset to manage the player data for the drag-and-drop UI. The Collection Database asset contains a serialized list of PlayerData objects that you can set in the Unity Editor.

1. Create a project in Unity with any template.

2. In the Assets folder of your Project window, create a folder named Scripts to store your script files.

3. In the Scripts folder, create a folder named Data.

4. In the Data folder, create a C# script named PlayerData.cs with the following content:

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/Data/PlayerData.cs)]

5. In the Data folder, create a C# script named CollectionDatabase.cs with the following content:

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/Data/CollectionDatabase.cs)]

6. In the Assets folder, create a folder named Resources.

7. Right-click in the Resources folder, and select Create > Collection Database. This creates a new Collection Database asset.

8. In the Inspector window of the Collection Database asset, add a few players to the Lobby list. You can add as many players as you want.

Create custom controls to display the data

Create custom controls named PlayerDataElement and PlayerItemView to display the data of a player. The PlayerItemView control binds to a PlayerData object as its data context.

1. In the Scripts folder, create a folder named UI.

2. In the UI folder, create a C# script named PlayerDataElement.cs with the following content:

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/UI/PlayerDataElement.cs)]

3. In the UI folder, create a C# script named PlayerItemView.cs with the following content:

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/UI/PlayerItemView.cs)]

Define the layout and the style of the UI

Create a USS file to define the style for the UI. Create two UXML Documents to define the UI layout for the player item view and the main view. In the main view, to enable the reordering of list items by dragging, set the reorderable attribute to true for the ListView, MultiColumnListView, and TreeView.

1. In the Assets folder, create a folder named UI to store your UXML and USS files.

2. In the UI folder, create a USS file named main.uss with the following content:

   [!code-css[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/UI/main.uss)]

3. In the UI folder, create a UXML file named PlayerItemView.uxml with the following content:

   [!code-css[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/UI/PlayerItemView.uxml)]

4. In the UI folder, create a UXML file named ListDragAndDropTestWindow.uxml with the following content:

   [!code-xml[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/UI/ListDragAndDropTestWindow.uxml)]

Implement the drag-and-drop operations

Create a script to set up the lobby and the teams’ lists and bind them to the player data you created earlier. The script also implements drag-and-drop operations between the lobby and the teams’ lists.

1. In the Scripts folder, create a folder named Controllers.

2. In the Controllers folder, create a C# script named LobbyController.cs with the following content:

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/Controller/LobbyController.cs)]

カスタムエディターウィンドウの作成

Create a custom Editor window to display the drag-and-drop UI.

1. In the Assets folder, create a folder named Editor.

2. In the Editor folder, create a C# script named ListDragAndDropTestWindow.cs with the following content:

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Editor/ListDragAndDropTestWindow.cs)]

Test the UI

To test, change the order of the players in the Lobby list and move players from the Lobby list to the team lists when the Lobby Owner checkbox is selected. You can also change the hierarchy of players in the Red team list. Based on the conditions set in the LobbyController.cs script, you can add a maximum of three players to each team.

1. From the main menu, select Collection Tests > List DragAndDrop Window.
2. In the List DragAndDrop Test window, select the Lobby Owner checkbox.
3. Drag the players in the Lobby list to change their orders.
4. Drag the players from the Lobby list to the team lists.
5. Drag the players in the Red team list to change their hierarchies.

その他の参考資料

• Create list and tree views
• Create a complex list view
• Create a ListView runtime UI