Drag-and-Drop Support

Drag-and-drop operations typically involve two parties: a drag source from which the dragged object originates and a drop target which receives the dropped object. The drag source and drop target must be UI elements in the same application.

The type and number of objects that can be manipulated with drag-and-drop is completely arbitrary. For example, files, folders, and selections of content are some of the more common objects manipulated through drag-and-drop operations.

The particular actions performed during a drag-and-drop operation are application specific, and often determined by context. For example, dragging a selection of files from one folder to another on the same storage device moves the files by default, whereas dragging files from another device to a local folder copies the files by default.

In NoesisGUI, any UIElement can participate in drag-and-drop. The events and methods required for drag-and-drop operations are defined in the DragDrop class. The UIElement classes contain aliases for the DragDrop attached events so that the events appear in the class members list when a UIElement is inherited as a base element. Event handlers that are associated to these events are connected to the underlying DragDrop attached event and receive the same event data instance. For more information, see the UIElement Drop event.

Data Transfer

A drag-and-drop operation is analogous to a copy-and-paste operation that is used to transfer data from one object to another. Both types of operations require:

• A source object that provides the data.
• A way to temporarily store the transferred data.
• A target object that receives the data.

In a copy-and-paste operation, the system clipboard is used to temporarily store the transferred data; in a drag-and-drop operation, an object is used to store the data.

The drag source initiates a drag-and-drop operation by calling the static DragDrop DoDragDrop method and passing the transferred data to it. The drop target should know how to obtain the desired information from the data object received in the event.

The source and target of a drag-and-drop operation are UI elements; however, the data that is actually being transferred typically does not have a visual representation. You can write code to provide a visual representation of the data that is dragged, such as occurs when dragging files in Windows Explorer. By default, feedback is provided to the user by changing the cursor to represent the effect that the drag-and-drop operation will have on the data, such as whether the data will be moved or copied.

Drag-and-Drop Events

Drag-and-drop operations support an event driven model. Both the drag source and the drop target use a standard set of events to handle drag-and-drop operations. The following tables summarize the standard drag-and-drop events. These are attached events on the DragDrop class.

Implementing Drag-and-Drop

A UI element can be a drag source, a drop target, or both. To implement basic drag-and-drop, you write code to initiate the drag-and-drop operation and to process the dropped data. You can enhance the drag-and-drop experience by handling optional drag-and-drop events.

To implement basic drag-and-drop, you will complete the following tasks:

• Identify the element that will be a drag source. A drag source can be any UIElement. We recommend using a behavior for this purpose.

  class DragItemBehavior final: public NoesisApp::BehaviorT<Noesis::ContentControl> { };
  

  <ItemsControl ItemsSource="{Binding Inventory}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
          <ContentControl Content="{Binding}" Style="{StaticResource Style.InventorySlot}">
              <i:Interaction.Behaviors>
                <local:DragItemBehavior/>
              </i:Interaction.Behaviors>
          </ContentControl>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>
  

• Create an event handler on the drag source that will initiate the drag-and-drop operation. The event is typically the MouseMove event.

  void DragItemBehavior::OnAttached()
  {
    Noesis::ContentControl* control = GetAssociatedObject();
    control->PreviewMouseMove() += Noesis::MakeDelegate(this, &DragItemBehavior::OnMouseMove);
  }
  

• In the drag source event handler, call the DoDragDrop method to initiate the drag-and-drop operation. In the DoDragDrop call, specify the drag source, the data to be transferred, the allowed effects and an optional callback to be notified of the result of the drop operation.

  void DragItemBehavior::OnMouseMove(Noesis::BaseComponent* sender, const Noesis::MouseEventArgs& e)
  {
    if (_mouseClicked)
    {
      Noesis::ContentControl* control = GetAssociatedObject();
  
      Slot* slot = Noesis::DynamicCast<Slot*>(control->GetContent());
      if (slot != nullptr && slot->GetItem() != nullptr)
      {
        slot->StartDragging();
  
        Noesis::DragDrop::DoDragDrop(control, slot, DragDropEffects_Move,
          [](Noesis::DependencyObject* source, Noesis::BaseComponent* data, Noesis::UIElement* target,
             const Noesis::Point& dropPoint, uint32_t effects)
          {
            Slot* slot = (Slot*)data;
            slot->EndDragging();
          });
      }
  
      _mouseClicked = false;
    }
  }
  

• Identify the element that will be a drop target. A drop target can be any UIElement. Here we can also use a behavior.

  class DropItemBehavior final: public NoesisApp::BehaviorT<Noesis::ContentControl> { };
  

  <ItemsControl ItemsSource="{Binding Equipment}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
          <ContentControl Content="{Binding}" Style="{StaticResource Style.EquipmentSlot}">
              <i:Interaction.Behaviors>
                <local:DropItemBehavior/>
              </i:Interaction.Behaviors>
          </ContentControl>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>
  

• On the drop target, set the AllowDrop property to true.

• In the drop target, create a Drop event handler to process the dropped data.

  void DropItemBehavior::OnAttached()
  {
    Noesis::ContentControl* control = GetAssociatedObject();
    control->SetAllowDrop(true);
    control->PreviewDrop() += Noesis::MakeDelegate(this, &DropItemBehavior::OnDrop);
  }
  

• In the Drop event handler, extract the data from the DragEventArgs.

• In the Drop event handler, use the data to perform the desired drag-and-drop operation.

  void DropItemBehavior::OnDrop(Noesis::BaseComponent* sender, const Noesis::DragEventArgs& e)
  {
    Noesis::ContentControl* control = GetAssociatedObject();
  
    Slot* sourceSlot = (Slot*)e.data;
    Slot* targetSlot = Noesis::DynamicCast<Slot*>(control->GetContent());
    if (targetSlot != nullptr)
    {
      if (targetSlot->IsDropAllowed())
      {
        Item* draggedItem = sourceSlot->GetItem();
        sourceSlot->SetItem(targetSlot->GetItem());
        targetSlot->SetItem(draggedItem);
      }
      else
      {
        e.effects = DragDropEffects_None;
      }
    }
  
    e.handled = true;
  }
  

You can enhance your drag-and-drop implementation by handling optional drag source and drop target events, as shown in the following tasks:

• To transfer custom data or multiple data items, create your own data type to pass to the DoDragDrop method.
• To perform additional actions during a drag, handle the DragEnter, DragOver, and DragLeave events on the drop target.
• To change the appearance of the mouse pointer, handle the GiveFeedback event on the drag source.
• To change how the drag-and-drop operation is canceled, handle the QueryContinueDrag event on the drag source.