You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.8 KiB
54 lines
1.8 KiB
@page "/compodrag"
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<h3>Drag and Drop</h3>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
<div>
|
|
The <code>FluentDragContainer</code> implements a web component <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag And Drop API</a>(Horizontal Rule) element.
|
|
</div>
|
|
|
|
|
|
<h4 class="mt-4">Example</h4>
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
|
|
<FluentDragContainer TItem="string"
|
|
OnDragEnter="@OnDragEnter"
|
|
OnDragLeave="@OnDragLeave"
|
|
OnDropEnd="@OnDropEnd">
|
|
<FluentStack>
|
|
<FluentDropZone Id="Item1" Draggable="true" Droppable="true">
|
|
<div style="width:100px; height:100px; background-color:salmon">
|
|
Item1
|
|
</div>
|
|
</FluentDropZone>
|
|
<FluentDropZone Id="Item2" Draggable="true" Droppable="true">
|
|
<div style="width:100px; height:100px; background-color:limegreen">
|
|
Item2
|
|
</div>
|
|
</FluentDropZone>
|
|
</FluentStack>
|
|
</FluentDragContainer>
|
|
<p><b>Message</b>: @message</p>
|
|
</FluentCard>
|
|
|
|
@code {
|
|
string? message;
|
|
|
|
async void OnDragEnter(FluentDragEventArgs<string> e)
|
|
{
|
|
message = $"{e.Source.Id} entered in {e.Target.Id}";
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
|
|
async void OnDragLeave(FluentDragEventArgs<string> e)
|
|
{
|
|
message = $"{e.Source.Id} has left in {e.Target.Id}";
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
|
|
async void OnDropEnd(FluentDragEventArgs<string> e)
|
|
{
|
|
message = $"{e.Source.Id} droped in {e.Target.Id}";
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
}
|
|
|