📘 Drag-and-Drop
🏘️ NoesisGUI ▸ 🏠 Noesis Studio ▸ 📘 Working With Interactivity ▸ 📘 Drag-and-Drop
Overview
Noesis includes an extensive, built-in system to support highly-customizable drag-and-drop interactions. This system allows creators to easily provide end-users with the ability to transpose items in the interface, from one location to another.
It is important to note that drag-and-drop features are exclusively available to Data Template Elements.
Therefore, any Content subject to be dragged-and-dropped should be bundled inside one of the many available Data Templates, including 📘 ContentControl Element Templates or 📘 ListBoxItem Element Templates, among others.
It is also important to note that each Data Template Resource is assigned a Type, and that for a drag-and-drop interchange to occur between any number of Elements, their Type must match.
Drag-and-drop operations depend on the configuration of two main parts; 📑 Drag-and-Drop Hosts which dictate the area on-screen in which dragging-and-dropping can take place, and 📑 Drag-and-Drop Items which corresponds to the Content that is moved around an interface throughout drag-and-drop operations.
Furthermore, drag-and-drop interactions can be customized and enhanced even further by leveraging 📑 Drag-and-Drop Hooks. These are special features available to Elements which allow access to its various underlying drag-and-drop behaviors. This allows for example, to cycle between a Template's 📘 Visual States based on if the dragged Content is hovered over a compatible (or incompatible) destination Slot, among many other available features.
Drag-and-Drop Hosts
The first step to setting up a drag-and-drop interface requires designating a 'Host' within a Page or Template that primarily serves to define the 📑 Active Zone on-screen where drag-and-drop interactions are enabled.
Setting a 'Host' also provides the ability to set a 📑 Host Overlay Template that can be set to universally apply a custom appearance to all Content being actively dragged within it.
Additionally, it is within a 'Host' that 📑 Auto-Transfer functions can be configured to enable end-users to automatically send an Item from a source Slot to a compatible destination Slot, at the push of an input device button.
Active Zone
Designating the zone in which drag-and-dropping can be take place, is performed by selecting one of the available 📘 Panels & Layout Elements within a Page or Template, and setting it as the Overlay Host.
By nature, each Panel and Layout Element occupies a piece of on-screen real-estate, both in terms of position, and dimension. Setting an Element as the Overlay Host serves to constrain the area in which dragging-and-dropping can be performed, limiting the range of motion to its own footprint.
The Overlay Host can be set by selecting any 📘 Panels & Layout Element from the 📘 Stage or from the 📘 Navigator Panel, navigating to its 📘 Properties Panel 'Drag-and-Drop' section, and enabling the Overlay Host Property.
In the majority of cases, a root Element is selected as the Overlay Host as to encompass the total area of a Page or Template. However, in certain cases, creators may wish to intentionally restrict this zone even more tightly to provide further guardrails.
Host Overlay Template
One particular advantage that selecting a 'Host' also offers, is that it enables a universal Template to be set, which displays across all Content actively dragged within it.
This allows each individual Item contained within the 'Host' Element to be unique at their source and their destination, but to benefit from a custom appearance whilst in-transit, if desired.
This feature can be configured by navigating to the Host Element's 📘 Properties Panel 'Drag-and-Drop' section, and selecting a compatible Template Resource from the Overlay Template dropdown menu.
Alternately, a new Overlay Template can be created directly from the Overlay Template Property, by clicking the (+) (Create New Template) icon, designating a name for the Resource, and selecting a storage location for that is accessible by the current scope.
If no Overlay Template is assigned, and no custom 📑 Item Overlay Template have been set, the Item in-transit shown will be the Content of the Item itself.
Auto-Transfer
In addition to offering manual drag-and-drop functionality where an Element's Content is clicked-and-dragged by the end-user from one Slot to another, the system also offers an optional feature which enables using an input device button to automatically send Content to a compatible destination Slot. This feature allows any drag-and-drop interface to be configured to function without requiring a physical 'click-and-drag' motion.
The Auto-Transfer system allows creators to select which input should be used to initiate this transfer for all Items within the 'Host', and allows for separate inputs to be designated for Keyboard/Controller ('Transfer Key') and for Mouse clicks ('Transfer Mouse Button').
Drag-and-Drop Items
Within the drag-and-drop system, each Data Template Element is able to serve as both a 'source' and a 'destination' for drag-and-drop operations. Each compatible Element therefore comes equipped with a range of Properties that allow a high-degree of customization over its desired behavior within the wider network of other Elements it is able to interact with, including how Content is transferred from one Element to another.
Each of these Properties can be set by selecting the desired Element, and in its 📘 Properties Panel 'Drag-and-Drop' section, configuring its individual Properties.
When leveraging drag-and-drop mechanics within the context of 📘 Collection Elements, these same Properties can be set within the Element's Style. Doing so will then allow these behaviors to be driven by each Item's Data Context, as configured via the techniques outlined in 📘 Working With Data.
Role
The Role Property defines, for any given Element, whether Content can be exclusively dragged from it, exclusively dropped into it, or whether both (or neither) actions can be performed.
None
|
• Disables all drag-and-drop capabilities.
|
DragAndDrop
|
• Content can both be dragged from the Slot, and dropped into the Slot.
|
DragOnly
|
• Serves as a 'source' Slot exclusively, from which Content can be dragged from, but not dropped into.
|
DropOnly
|
• Serves as a 'destination' Slot exclusively, from which Content can be dropped into, but not dragged from.
|
Transfer Policy
The Transfer Policy sets what should happen to the 'source' Item Content when dropped into its 'destination' Slot.
None
|
• In certain cases, the result of a drag-and-drop operation may not involve physically transposing Content from one location to another within the Interface. Such examples may include disposal of the Item, or handing off Transfer behavior to another system not following any of the standard Transfer options.
|
Move
|
• When dropped into a Slot, the Content will be removed from its 'source' Slot, and moved into the 'destination' Slot.
|
Copy
|
• When moved into a Slot, the dragged Content will remain in its 'source' Slot, and a duplicate will be created in its 'destination' Slot.
|
Swap
|
• When moved into a Slot, the dragged Content will swap position with the the 'destination' Slot's Content.
|
Note
The Role of each Element must be set accordingly to allow each Transfer Policy to take place. For example, a 'Swap' Transfer Policy will not function if the 'destination' Slot is set to 'DragOnly', as this means it is forbidden from receiving Items, resulting in the 'swap' not being able to take place.
Kind
Providing an Item with a Kind allows it to be assigned a custom category, which when used in conjunction with the enabling of the Match Kind Property, can be used to set restrictions on which Content can be interchanged between Slots.
When the Match Kind Property is enabled, the system looks for a match (or mismatch) between the Kind value of each Item (written and parsed as a text string). This value can either be manually written in the Property's input field, or have its value come from a Binding.
When a match is found between two Items, they are allowed to cross-interact. In the case of a mismatch, the interchange is disallowed.
For example, with the Match Kind Property enabled, a 'Hat' Item of Kind 'Head', and a 'Helmet' Item of Kind 'Head', can both be dragged into a 'destination' Slot of Kind 'Head'.
Conversely, a 'Shoe' Item of Kind 'Feet' will be unable to be dragged into a slot with a Kind of 'Head', and will only be able to be dropped into 'destination' Slots with a Kind of 'Feet' (or into any Slots without the Match Kind Property enabled).
Item Overlay Template
Setting an Overlay Template on an Element, allows a custom Template to display whilst Content is actively being dragged across an interface.
Any compatible Element can be assigned an Overlay Template by navigating to its 📘 Properties Panel 'Drag-and-Drop' section, and selecting a compatible Template Resource from the Overlay Template dropdown menu.
Alternately, a new Overlay Template can be created directly from the Overlay Template Property, by clicking the (+) (Create New Template) icon, and selecting a save location accessible by the current scope.
In the event that the 📘 Host Overlay Template is also configured within the same scope, the Item Overlay Template has authority, and will display instead of the Host's.
If no Overlay Template is assigned, and no custom 📑 Host Overlay Template have been set in the hierarchy, the Item in-transit shown will be the Content of the Item itself.
Tag
The Tag Property provides an extra ↗️ Tag Property Slot in addition to the one provided by the Element itself, and can be used to store any sort of additional information useful to the drag-and-drop functions of the Element.
Empty Content Path
The Empty Content Path allows creators to designate a Data Property which the drag-and-drop system cross-checks against the assigned Data Set's value for the Property.
If within the 📘 Data Sets and Values , no value is found to be assigned for the designated Property, the Slot in which it resides, is considered 'empty'.
For example, within a database, a master 'Item_ID' Property may be designated as the Empty Content Path. In this scenario, if within the Data Set, there is a Data item without an 'Item_ID' value assigned to it, it would automatically be treated as an 'empty' within the context of the drag-and-drop system.
Default Content
The Default Content Property can be used to assign a 'Default Content' Template to a Slot.
When this option is used, the Template Resource assigned is the one displayed when the Item has no Content.
Drag-and-Drop Hooks
The drag-and-drop system offers a multitude of useful hooks that can be leveraged and used in conjunction with the suite of features offered when 📘 Working With Interactivity.
The included hooks can be configured on any Element used as a 'source' Slot within a drag-and-drop interface. They can then be listened to (and/or also written to if 'Read-Write'-capable), and used to drive functional and presentational changes by using the following Path options in a Binding:
DragDrop.DefaultContent
(Read-Write)
|
• Used to parse the 📑 Default Content Property.
|
DragDrop.EmptyContentPath
(Read-Write)
|
• Used to parse the 📑 Empty Content Path Property.
|
DragDrop.IsContentEmpty
(Read-Only)
|
• Used to determine if an Item's Content is empty.
|
DragDrop.IsDropCompatible
(Read-Only)
|
• Used to determine if the actively-dragged Content is compatible with available Slots.
• Allows for example, to cross out candidate Slots in the case of non-compatibility with the Content actively being dragged across an interface.
|
DragDrop.IsHoverCompatible
(Read-Only)
|
• Used by Slots to determine if the actively-dragged Content is compatible with the Slot it is currently dragged over.
• Allows for example, to cross out the destination Slot if it is not compatible with the Content currently held over it.
|
DragDrop.IsOverlayCompatible
(Read-Only)
|
• Used by Content to determine if the actively-dragged Content is compatible with the Slot it is currently dragged over.
• Allows for example, to cross out the Content in-transit if it is not compatible with the Slot it is held above.
|
DragDrop.Kind
(Read-Write)
|
• Used to parse the 📑 Kind Property.
|
DragDrop.OverlayTemplate
(Read-Write)
|
• Used to parse the 📑 Item Overlay Template Property.
|
DragDrop.Role
(Read-Write)
|
• Used to parse the 📑 Role Property.
|
DragDrop.SourceInFlight
(Read-Only)
|
• Used to determine if an Item's Content is currently in-transit.
• Allows for example, to display a particular Element on-screen only when Content is actively being dragged across an interface.
|
DragDrop.Tag
(Read-Write)
|
• Used to parse the 📑 Tag Property.
|
DragDrop.Transfer
(Read-Write)
|
• Used to parse the 📑 Transfer Policy Property.
|