Customize Tree Drag Drop

[Randy More]

I am attempting to customize the behavior of dragging and dropping between two Smart.Blazor.Trees
If I disable “AllowDrop” then the  OnDragEnd event does not seem to contain the drop target information
If I enable “AllowDrop” then I can’t seem to set “preventDefault” (probably doing it in the wrong spot)
Of course it is likely I am way off base and don’t understand how this is supposed to be done.
Is there a demo anywhere? or can someone suggest how this is best done?

[Markov]

Hi Randy,

Please, look at https://www.htmlelements.com/demos/tree/drag-drop/. The demo shows drag and drop between trees.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Randy More]

This does not really help.  I am in Blazor.  This example is JS.
I have limited experience in interop and chose Smart.Blazor and to do the project in Blazor for that reason.
can I do a similar in C# in Blazor?
if not can you give an example that is more targeted for a Blazor project please

[Randy More]

I was able to get it to work this way

<blockquote>@page "/"
@using Smart.Blazor;
@inject IJSRuntime JS

window.smartTreeInterop = {
preventDragDefault: function (treeId)
{
const tree = document.getElementById(treeId);
if (tree)
{
// tree.addEventListener("dragStart", function (e) {
// e.dataTransfer.effectAllowed = "copyMove";
// }, true); // useCapture=true to catch early

tree.addEventListener("dragEnd", function (e) {
e.preventDefault();
}, true); // useCapture=true to catch early
}
}
};

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync(“smartTreeInterop.preventDragDefault”, “Tree1”);
await JS.InvokeVoidAsync(“smartTreeInterop.preventDragDefault”, “Tree2”);
}
}

• This reply was modified 2 weeks, 2 days ago by Randy More.

[Author]

Posts