Drag handler (#5)

* * solved by example

* * styled better drag handler

Co-authored-by: Santiago Cattaneo <santiago@rd-its.com>
This commit is contained in:
elgransan 2022-04-22 18:50:07 -03:00 committed by GitHub
parent 79ec2404bf
commit 4d81ad658d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -2,21 +2,27 @@
<PageTitle>Blazor Reorder Example</PageTitle>
<h1>Custom styles</h1>
<h1>Custom styles and drag handler</h1>
Welcome to your new reorderer list.
<p>Deny Drag: @denyDrag</p>
<div class="card">
<Reorder Items="list" TItem="ListItem">
<div class="mb-2 mx-2">
<h5>@context.title</h5>
<p>@context.details <a href="@context.url">Go</a></p>
<Reorder Items="list" TItem="ListItem" DisableDrag="denyDrag">
<div class="row mb-2 mx-2">
<div class="col-auto align-middle" style="line-height: 72px;" @onmousedown="() => denyDrag = false" @onmouseup="() => denyDrag = true">
<i class="oi oi-grid-three-up"></i>
</div>
<div class="col" style="cursor: default;">
<h5>@context.title</h5>
<p>@context.details <a href="@context.url">Go</a></p>
</div>
</div>
</Reorder>
</div>
@code
{
bool denyDrag = true;
public List<ListItem> list = new()
{
new ListItem("Google", "https://google.com", "Again looking for a bug ..."),