From 4d81ad658d9c859b6bb869cdfc5d631847b38247 Mon Sep 17 00:00:00 2001
From: elgransan <santiagoc@gmail.com>
Date: Fri, 22 Apr 2022 18:50:07 -0300
Subject: [PATCH] Drag handler (#5)

* * solved by example

* * styled better drag handler

Co-authored-by: Santiago Cattaneo <santiago@rd-its.com>
---
 BlazorReorderExample/Pages/Styled.razor | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/BlazorReorderExample/Pages/Styled.razor b/BlazorReorderExample/Pages/Styled.razor
index 86d3d70..e2ae285 100644
--- a/BlazorReorderExample/Pages/Styled.razor
+++ b/BlazorReorderExample/Pages/Styled.razor
@@ -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 ..."),