Set CSS class for dropzone before dropping

[Siegfried Derdeyn]

Hi

I'm using the SfListBox component to drag items between them, pretty much like the example:

<div id="listbox1">
    <h4>Group A</h4>
    <SfListBox TValue="string[]" DataSource="@GroupA" AllowDragAndDrop="true" Scope="combined-list" Height="290px" TItem="CountryCode">
        <ListBoxFieldSettings Text="Name" Value="Code" />
    </SfListBox>
</div>
<div id="listbox2">
    <h4>Group B</h4>
    <SfListBox TValue="string[]" DataSource="@GroupB" Scope="combined-list" AllowDragAndDrop="true" Height="290px" TItem="CountryCode">
        <ListBoxFieldSettings Text="Name" Value="Code" />
    </SfListBox>
</div>

But I find the user experience pretty poor when dragging an item to another listbox. Other than the ordering span, there is no hint that the other listbox is a valid dropzone. I would like to change the CSS of the target Listbox when the user is hovering an item over it. This would make it clear to the user that the item can be dropped there.

I have looked at the component events DragStart, OnDrop but these trigger before the item is dragged around and after the item is released respectively. 

When I apply the DOM @ondragover and @ondragenter handler to the ListBox, these do not get triggered. Do you have an idea how to continue?

[YuvanShankar Arunagiri]

Hi Siegfried,

Sorry for the delay. We have validated your reported query, and we have tried our Listbox drag event and native event also, but it does not trigger the dragging event properly because the mouse pointer always lays on the dragging li element. Due to this, native drag events are not triggered.

To achieve your requirement, we have prepared the sample based on your requirement using script-side custom coding for capturing the dragging event of the listbox component. Refer to the below code snippet and attached sample.

[index.razor]:

<SfListBox TValue="string[]" DataSource="@GroupA" AllowDragAndDrop="true" Scope="combined-list" TItem="CountryCode" CssClass="e-listbox1">

    <ListBoxEvents TValue="string[]" Created='e => OnCreated("e-listbox1")' OnDrop="OnDrop" TItem="CountryCode"></ListBoxEvents>

    <ListBoxFieldSettings Text="Name" Value="Code" />

</SfListBox>

…

private async void OnCreated(string className)

{

    await Task.Delay(500);

    await JSRuntime.InvokeVoidAsync("setDraggingEvent", "." + className + " .e-draggable");

}

 

private async void OnDrop()

{

    await JSRuntime.InvokeVoidAsync("removeDragging");

}

[_Host.cshtml]:

<script>

    window.setDraggingEvent = (className) => {

        const ulElem = document.querySelector(className);

        var draggale = ulElem.ej2_instances[0];

        draggale.drag = setDragging;

    }

    function setDragging(args) {

        if (args.element != args.target && args.target.parentElement && args.element !== args.target.parentElement) {

            if (args.target.classList.contains('e-list-item')) {

                args.target.parentElement.classList.add('e-custom-class');

            }

        }

    }

    window.removeDragging = () => {

        var elem = document.querySelector(".e-custom-class");

        elem.classList.remove("e-custom-class");

    }

</script>

Please let us know if you need any further assistance on this.

Regards,

YuvanShankar A

Attachment: BlazorApplistbox_ebf59f64.zip

[Siegfried Derdeyn]

Hi YuvanShankar

This does the job perfectly and sets the stage for further customizations. Thanks for your assistance!

Kind regards

Siegfried

[YuvanShankar Arunagiri]

Hi Siegfried,

We're glad your issue was resolved. Please get back to us for further assistance in the future.

Regards,

YuvanShankar A