Drag handler (#5)
* * solved by example * * styled better drag handler Co-authored-by: Santiago Cattaneo <santiago@rd-its.com>
This commit is contained in:
parent
79ec2404bf
commit
4d81ad658d
1 changed files with 12 additions and 6 deletions
|
@ -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 ..."),
|
||||
|
|
Loading…
Reference in a new issue