Two zones "freeze" issue

TarasBounty · Aug 12, 2020 · 489d7b1 · 489d7b1
1 parent 84123f6
commit 489d7b1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 deletions.
diff --git a/Plk.Blazor.DragDrop.Demo/Data/TodoItem.cs b/Plk.Blazor.DragDrop.Demo/Data/TodoItem.cs
@@ -9,5 +9,6 @@ public class TodoItem
     {
         public string Titel { get; set; }
         public bool IsDone { get; set; }
+        public bool IsFocused { get; set; }
     }
 }
diff --git a/Plk.Blazor.DragDrop.Demo/Pages/TwoZones.razor b/Plk.Blazor.DragDrop.Demo/Pages/TwoZones.razor
@@ -8,21 +8,31 @@
 
 <div class="bg-light">First Dropzone:</div>
 
-    <Dropzone Items="MyFirstList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)">
-        <div class="mt-2" style="border: 2px solid blue">
-            @context.Titel
-        </div>
-    </Dropzone>
+<Dropzone Items="MyFirstList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)">
+    @{
+        string dragClass = context.IsFocused
+            ? "mt-2__focused"
+            : "mt-2";
+    }
+    <div class="@dragClass" @onclick="() => SetFocus(context)">
+        @context.Titel
+    </div>
+</Dropzone>
 
 <hr />
 
 <div class="bg-light">Second Dropzone:</div>
 
-    <Dropzone Items="MySecondList"  TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)">
-        <div class="mt-2" style="border: 2px solid black">
-            @context.Titel
-        </div>
-    </Dropzone>
+<Dropzone Items="MySecondList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)">
+    @{
+        string dragClass = context.IsFocused
+            ? "mt-2__focused"
+            : "mt-2";
+    }
+    <div class="@dragClass">
+        @context.Titel
+    </div>
+</Dropzone>
 
 <hr />
 
@@ -34,7 +44,7 @@
     private TodoItem lastdropped { get; set; }
 
     public List<TodoItem> MyFirstList = new List<TodoItem>()
-    {
+{
             new TodoItem(){Titel = "Item 1"},
             new TodoItem(){Titel = "Item 2"},
             new TodoItem(){Titel = "Item 3"},
@@ -43,12 +53,25 @@
     };
 
     public List<TodoItem> MySecondList = new List<TodoItem>()
-    {
+{
             new TodoItem(){Titel = "Item 6"},
             new TodoItem(){Titel = "Item 7"},
             new TodoItem(){Titel = "Item 8"},
             new TodoItem(){Titel = "Item 9"},
             new TodoItem(){Titel = "Item 10"},
     };
 
-}
+    TodoItem FocusedComponent { get; set; }
+
+    private void SetFocus(TodoItem item)
+    {
+        if (FocusedComponent != null)
+        {
+            FocusedComponent.IsFocused = false;
+
+            FocusedComponent = null;
+        }
+        item.IsFocused = true;
+        FocusedComponent = item;
+    }
+}
diff --git a/Plk.Blazor.DragDrop.Demo/wwwroot/css/site.css b/Plk.Blazor.DragDrop.Demo/wwwroot/css/site.css
@@ -186,7 +186,9 @@ app {
     min-height: 50px;
 }
 
-
+.mt-2__focused{
+    border:3px solid red;
+}
 
 .grid-container {
     display: grid;