Looking for clarification around ItemDraggingEventArgs.Handled

[Daniel Travison]

I'm trying to work through DragAction handling and I don't understand the purpose of setting Handled to true for Dragging events.

Use Case:

I want to implement drag and drop within a SfListView and be able to disable dropping onto specific destination items.

I know at both Dragging and Drop time that the destination is not value. 

At Drop time, I assume I can simply set ItemDraggingEventArgs.Cancel to true but how should I do with ItemDraggingEventArgs.Handled for Dragging events?

FYI: I searched the Maui samples but can only find the ItemReordering ListView sample.

Thanks,

Dan.

[Anees Fathima Shajahan]

Hi Daniel Travison,

When ItemDraggingEventArgs.Handled is set to true, dragging can be handled. This is applicable only when the Action is Dragging.

ItemDragging Event: https://help.syncfusion.com/maui/listview/item-drag-and-drop#event

To implement drag-and-drop functionality within an SfListView and disable dropping onto specific destination items, you can set ItemDraggingEventArgs.Cancel to true when the Action is Drop. Additionally, specify the index where the item should not be dropped.

Please refer to the code snippet and sample attached. Let us know if you have any further questions.

private void listView_ItemDragging(object sender, Syncfusion.Maui.ListView.ItemDraggingEventArgs e)

{

    // Cancel the dropping if the new dropping index is 3.

    if (e.Action == DragAction.Drop && e.NewIndex == 2)

        e.Cancel = true;

}

Regards,

Anees Fathima.

Attachment: ListViewMaui_8825785.zip

[Daniel Travison]

The reply doesn't appear to answer the question and the sample doesn't either.

If I change the sample to set handled to true every time, it effectively disables reordering.

If I change the sample to selectively set handled every third item, it effectively disables reordering once the condition is met.

In both cases, once Handled is set to true:

• Visually, nothing changes as dragging continues
• ItemDraggingEventArgs.Dragging events continue to be sent and e.NewIndex is the index where Handled was set to true.
• When releasing the mouse button, DropAction.Drop is sent. e.NewIndex  is the index where Handled was set to true.  The reordering does not actually occur though.

I find this behavior confusing.  Programmatically, the drag operation is effectively canceled since the reordering doesn't occur at Drop time.  From a user perspective, the UI appears frozen since the visual never changes. 

In other words, I can see no practical use for setting Handled to true.

What I want to be able to do is the following:

1: Don't allow dragging an item that cannot be dragged.

I know I can set e.Cancel programmatically but would like to have some form of a visual indicator, if possible.

2: Provide a visual cue when dragging over an item that is not a valid drop point without actually cancelling the drag/drop operation.

Related question:

If I use DragDropMode.OnHold, do ItemLongPressEvents still occur?

Use Case:

On Desktop, I'm using Right click to display a context menu.  On mobile, I don't have right click and plan on using ItemLongPressEvents for the context menu.  Does DragDropMode.OnHold work with ItemLongPressEvents?

FWIW: I would prefer to NOT dedicate space for drag indicators.

Thanks.

[Anees Fathima Shajahan]

Hi Daniel Travison,

Sorry for the inconvenience caused,

We are currently validating the reported queries with dragging event & your requirements about handling the item dragging. So we will provide further update with more details by tomorrow. We appreciate your patience until then.

Regards,

Anees Fathima.

[Anees Fathima Shajahan]

Hi Daniel Travison,

1. As per your requirement to show a visual indicator for items that cannot be dragged by setting e.Cancel to true when the drag action is start, we achieved this by adding a background color property to the model and binding it to the item’s background color. When attempting to drag the item at the second index, its background color will change to red, indicating that it cannot be dragged. We have also included a delay to ensure that the background color is visibly updated during the interaction. 
2. For your next requirement, which involves providing a visual indicator when dragging over an item that is not a valid drop point (without canceling the drag/drop operation), we have achieved this by adjusting the visibility of a BoxView within the drag item template. This setup indicates that an item cannot be dropped between the third and fifth indices by setting the BoxView visibility to true when the drag passes over those items. 
3. The longpress event will also be triggered when the DragDropMode.OnHold is set.The long press event is applicable for android, ios, windows with touch and mac with touch screen.

 

We have attached the sample for your reference. You can also add any other visual indicator customizations based on your requirements. Let us know if you have any further questions.

Regards,

Anees Fathima.

Attachment: ListviewSample_aeffd26b.zip

[Daniel Travison]

Thank you for the reply, the sample was sufficient to unblock me.

I do have a suggestion though.  

The sample depends on the e.DataItem having display attributes (the background color) so this approach doesn't work for the general MVVM case.

I suggest providing a sample that does not require changing the ItemSource objects.

For example, in my protyping, I'm using a ControlTemplate for the DragDropItemView and passing it a reference to the SfListView's ItemsSource as well as a 'DragDropContext' that contains the visual information.

The control template uses the ItemsSource to create the embedded item view and the DragDropContext to style the containing control.  

The ItemDragging handler then sets the DragDropContext's state based on Start, Dragging, and Drop return values.

Although it required a little bit of a deep dive into control templates, it does successfully break the view dependencies in the model.

As sample that illustrates this or a better approach would be immensely helpful as a sample.

Thanks,

Dan.

[Daniel Travison]

I've published a sample application that illustrates separation of the view from the view model.

DanTravison/ListViewDragDrop: Sample app illustrating SyncFusion's SfListView drag/drop view model binding and custom visualizer (github.com)

If there are simpler approaches, suggestions are appreciated.

[Anees Fathima Shajahan]

Hi Daniel Travison,

We have simplified the visual indicator implementation by adding a boolean property in the ViewModel, which is updated based on the CanDrop method's result. This property is bound within the DragItemTemplate to the Label text and text color using a converter, ensuring the visual indicator's state is dynamically updated. We have attached the sample for your reference.

Regards,

Anees Fathima.

Attachment: ListViewDragDrop_(2)_ce344bf0.zip

[Daniel Travison]

This is a nice change, especially for the simple case.

In practice, I prefer better encapsulation of the drag visualizer and its associated style.  This is illustrated in the recent update to my sample and associated readme.md changes.

I realize it is more of an end-to-end example versus simple drag and drop sample, but it addresses my use cases nicely. 

As to the original question, I still don't understand the purpose if setting Handled. What is the use case for setting this to true.

Related: Does the SfTreeView support drag and drop?  The online documentation doesn't appear to mention it.

Most of my use cases are for a tree view and I currently roll my own based on SfListView. If SfTreeView supports drag and drop, I'd like to investigate using it instead of my custom solution.

Thanks,

Dan.

[Anees Fathima Shajahan]

Hi Daniel Travison,

Apologies for any confusion. Based on the current behavior of the Drag & Drop feature, when the `Handled` property is set during dragging, the dragged item will not move further once it meets the specified condition. This indicates to the user that the item will not be moved past a certain index and will be dropped at its current position when the mouse is released. As mentioned earlier, the `Handled` property only applies to the dragging action.

 

If the `Cancel` property is set to `True`, the drag and drop action is cancelled, and the dragged item is immediately returned to its original position once the condition is met. We recommend using the `Cancel` property according to the requirements outlined in previous updates.

 

Regarding Drag & drop feature in TreeView,

Currently, SfTreeView does not have support for drag and drop feature. We acknowledge this feature request and plan to implement it in one of our upcoming releases. We appreciate your patience until then.

You can also track the status of this report through the following link:

Feedback Link:  https://www.syncfusion.com/feedback/48402/implement-drag-and-drop-feature-for-sftreeview

Regards,

Anees Fathima.