Allow dynamic drop action selection

Plk.Blazor.DragDrop.Demo/Pages/Accepts.razor

@@ -1,6 +1,7 @@
-@page "/accepts"
+@page "/accepts"
 @using Plk.Blazor.DragDrop.Demo.Components
 @using Plk.Blazor.DragDrop.Demo.Data
+@using Plk.Blazor.DragDrop.DropActions
 
 <div class="bg-success">You can accept or deny items.</div>
 
@@ -10,9 +11,14 @@
 
 
     <Dropzone Items="MyFirstList">
-        <div style="border: 2px solid blue">
-            @context.Titel
-        </div>
+        <DropActions>
+            <MoveDropAction TItem="TodoItem" />
+        </DropActions>
+        <ChildContent>
+            <div style="border: 2px solid blue">
+                @context.Titel
+            </div>
+        </ChildContent>
     </Dropzone>
 
 
@@ -22,9 +28,14 @@
 
 
     <Dropzone Items="MySecondList" Accepts='(d, t)=>d.Titel.Contains("fun")' TItem="TodoItem" OnItemDropRejected="@((i)=>lastdropped = i)">
-        <div style="border: 2px solid black">
-            @context.Titel
-        </div>
+        <DropActions>
+            <MoveDropAction TItem="TodoItem" />
+        </DropActions>
+        <ChildContent>
+            <div style="border: 2px solid black">
+                @context.Titel
+            </div>
+        </ChildContent>
     </Dropzone>
 
 <hr />

Plk.Blazor.DragDrop.Demo/Pages/AllowsDrag.razor

@@ -1,6 +1,7 @@
-@page "/allowsdrag"
+@page "/allowsdrag"
 @using Plk.Blazor.DragDrop.Demo.Components
 @using Plk.Blazor.DragDrop.Demo.Data
+@using Plk.Blazor.DragDrop.DropActions
 
 <div class="bg-success">You can drag a new item into and around a list, but not the other items.</div>
 
@@ -9,15 +10,25 @@
 <div class="bg-light">First Dropzone:</div>
 
 <Dropzone Items="MyFirstList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)" AllowsDrag='(d)=>d.Titel == "Item 1"' InstantReplace="false">
-    <Todo Item="@context"></Todo>
+    <DropActions>
+        <MoveDropAction TItem="TodoItem" />
+    </DropActions>
+    <ChildContent>
+        <Todo Item="@context"></Todo>
+    </ChildContent>
 </Dropzone>
 
 <hr />
 
 <div class="bg-light">Second Dropzone:</div>
 
 <Dropzone Items="MySecondList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)" AllowsDrag='(d)=>d.Titel == "Item 1"' InstantReplace="false">
-    <Todo Item="@context"></Todo>
+    <DropActions>
+        <MoveDropAction TItem="TodoItem" />
+    </DropActions>
+    <ChildContent>
+        <Todo Item="@context"></Todo>
+    </ChildContent>
 </Dropzone>
 
 <hr />

Plk.Blazor.DragDrop.Demo/Pages/DisplayGrid.razor

@@ -1,14 +1,20 @@
-@page "/displaygrid"
+@page "/displaygrid"
+@using Plk.Blazor.DragDrop.DropActions
 
 <div class="bg-success">You can use grid display</div>
 
 <hr />
 
 <div class="grid-container">
     <Dropzone Items="Items">
-        <div>
-            <div class="grid-item">@context</div>
-        </div>
+        <DropActions>
+            <MoveDropAction TItem="string" />
+        </DropActions>
+        <ChildContent>
+            <div>
+                <div class="grid-item">@context</div>
+            </div>
+        </ChildContent>
     </Dropzone>
 </div>
 

Plk.Blazor.DragDrop.Demo/Pages/Flex.razor

@@ -1,12 +1,18 @@
-@page "/flex"
+@page "/flex"
+@using Plk.Blazor.DragDrop.DropActions
 
 <div class="bg-success">You can use flex display</div>
 
 <hr />
 
 <div class="plk-flex">
     <Dropzone Class="flex-container" Items="Items" ItemWrapperClass="@(item => "flex-item")">
-        <div>@context</div>
+        <DropActions>
+            <MoveDropAction TItem="string" />
+        </DropActions>
+        <ChildContent>
+            <div>@context</div>
+        </ChildContent>
     </Dropzone>
 
 </div>

Plk.Blazor.DragDrop.Demo/Pages/Index.razor

@@ -1,6 +1,7 @@
-@page "/"
+@page "/"
 @using Plk.Blazor.DragDrop.Demo.Components
 @using Plk.Blazor.DragDrop.Demo.Data
+@using Plk.Blazor.DragDrop.DropActions
 
 <div id="main" class="container-fluid">
 
@@ -10,7 +11,12 @@
     <hr />
 
     <Dropzone Items="MyToDoList">
-        <Todo OnRemoveClick="(item)=>MyToDoList.Remove(item)" Item="@context"></Todo>
+        <DropActions>
+            <MoveDropAction TItem="TodoItem" />
+        </DropActions>
+        <ChildContent>
+            <Todo OnRemoveClick="(item)=>MyToDoList.Remove(item)" Item="@context"></Todo>
+        </ChildContent>
     </Dropzone>
 
 </div>

Plk.Blazor.DragDrop.Demo/Pages/MaxItems.razor

@@ -1,6 +1,7 @@
-@page "/maxitems"
+@page "/maxitems"
 @using Plk.Blazor.DragDrop.Demo.Components
 @using Plk.Blazor.DragDrop.Demo.Data
+@using Plk.Blazor.DragDrop.DropActions
 
 <div class="bg-success">You can set an item limit on a dropzone.</div>
 
@@ -9,9 +10,14 @@
 <div class="bg-light">First Dropzone:</div>
 
     <Dropzone Items="MyFirstList">
-        <div class="mt-2" style="border: 2px solid blue">
-            @context.Titel
-        </div>
+        <DropActions>
+            <MoveDropAction TItem="TodoItem" />
+        </DropActions>
+        <ChildContent>
+            <div class="mt-2" style="border: 2px solid blue">
+                @context.Titel
+            </div>
+        </ChildContent>
     </Dropzone>
 
 <hr />
@@ -20,9 +26,14 @@
 
 
     <Dropzone Items="MySecondList" MaxItems="2" TItem="TodoItem" OnItemDropRejectedByMaxItemLimit="@((i)=>lastRejected = i)">
-        <div style="border: 2px solid black">
-            @context.Titel
-        </div>
+        <DropActions>
+            <MoveDropAction TItem="TodoItem" />
+        </DropActions>
+        <ChildContent>
+            <div style="border: 2px solid black">
+                @context.Titel
+            </div>
+        </ChildContent>
     </Dropzone>
 
 

Plk.Blazor.DragDrop.Demo/Pages/ReplacedItem.razor

@@ -1,4 +1,4 @@
-@page "/replacedItem"
+@page "/replacedItem"
 
 <div class="row">
     <b class="col-12">

Plk.Blazor.DragDrop.Demo/Pages/TwoZones.razor

@@ -1,6 +1,7 @@
-@page "/twozones"
+@page "/twozones"
 @using Plk.Blazor.DragDrop.Demo.Components
 @using Plk.Blazor.DragDrop.Demo.Data
+@using Plk.Blazor.DragDrop.DropActions
 
 <div class="bg-success">You can drag items from one dropzone to another dropzone.</div>
 
@@ -9,38 +10,53 @@
 <div class="bg-light">First Dropzone:</div>
 
 <Dropzone Items="MyFirstList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)"  AllowsDrag='(d)=>d.Titel == "Item 1"'>
-    <div style="border: 2px solid blue">
-        @context.Titel
-    </div>
+    <DropActions>
+        <MoveDropAction TItem="TodoItem" />
+    </DropActions>
+    <ChildContent>
+        <div style="border: 2px solid blue">
+            @context.Titel
+        </div>
+    </ChildContent>
 </Dropzone>
 
 <hr />
 
 <div class="bg-light">Second Dropzone:</div>
 
 <Dropzone Items="MySecondList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)"  AllowsDrag='(d)=>d.Titel == "Item 1"'>
-    <div style="border: 2px solid black">
-        @context.Titel
-    </div>
+    <DropActions>
+        <MoveDropAction TItem="TodoItem" />
+    </DropActions>
+    <ChildContent>
+        <div style="border: 2px solid black">
+            @context.Titel
+        </div>
+    </ChildContent>
 </Dropzone>
 
 <hr />
 
 <div class="bg-light">Third Dropzone (copy items):</div>
 
-<Dropzone CopyItem="(item)=> { return new TodoItem() {Titel = item.Titel}; }" Items="MyThirdList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)">
-    <div style="border: 2px solid black">
-        @context.Titel
-    </div>
+<Dropzone Items="MyThirdList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)">
+    <DropActions>
+        <CopyDropAction CopyItem="(TodoItem item) => { return new TodoItem() { Titel = item.Titel }; }" />
+    </DropActions>
+    <ChildContent>
+        <div style="border: 2px solid black">
+            @context.Titel
+        </div>
+    </ChildContent>
 </Dropzone>
 
 <hr />
 
 <div>Last Dropped Item: @lastdropped?.Titel</div>
 
 
-@code {
-
+@code {
+
     private TodoItem lastdropped { get; set; }
 
     public List<TodoItem> MyFirstList = new List<TodoItem>()
@@ -64,5 +80,4 @@
     public List<TodoItem> MyThirdList = new List<TodoItem>()
     {
     };
-
 }

Plk.Blazor.DragDrop.Demo/Plk.Blazor.DragDrop.Demo.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <TargetFramework>net5.0</TargetFramework>
     <UserSecretsId>f648770a-26a2-462b-87a0-17835ea631cb</UserSecretsId>
   </PropertyGroup>
 

Plk.Blazor.DragDrop.Test/Dropzone_Copy.razor

@@ -1,4 +1,5 @@
-@inherits TestComponentBase
+@using Plk.Blazor.DragDrop.DropActions
+@inherits TestComponentBase
 
 @code{
     void RegisterService(Fixture fixture)
@@ -68,15 +69,20 @@
             @context.Name
         </Dropzone>
         <hr />
-        <Dropzone TItem="MyItem" CopyItem="(item)=> { return new MyItem() { Name = item.Name }; }" Id="SecondDropzone" Items="Items2">
-            @context.Name
+        <Dropzone Id="SecondDropzone" Items="Items2">
+            <DropActions>
+                <CopyDropAction CopyItem="(MyItem item)=> { return new MyItem() { Name = item.Name }; }" />
+            </DropActions>
+            <ChildContent>
+                @context.Name
+            </ChildContent>
         </Dropzone>
     </ComponentUnderTest>
 
 
     @code
-  {
-         void DropzoneCopyTest(Fixture fixture)
+    {
+        void DropzoneCopyTest(Fixture fixture)
         {
             var cut = fixture.GetComponentUnderTest();
 

Plk.Blazor.DragDrop.Test/Plk.Blazor.DragDrop.Test.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <TargetFramework>net5.0</TargetFramework>
     <RazorLangVersion>3.0</RazorLangVersion>
   </PropertyGroup>
 

Plk.Blazor.DragDrop/DropActions/CopyDropAction.razor

@@ -0,0 +1,26 @@
+@typeparam TItem
+
+@inherits DropActionBase<TItem>
+
+@code
+{
+    [Parameter]
+    public Func<TItem, TItem> CopyItem { get; set; }
+
+    public override void Execute(DropActionContext<TItem> context)
+    {  
+        TItem copiedItem = CopyItem != null ? CopyItem(context.ActiveItem) : context.ActiveItem;
+
+        if (copiedItem == null)
+            return;
+
+        if (context.TargetItemIndex.HasValue)
+        {
+            context.TargetItems.Insert(context.TargetItemIndex.Value, copiedItem);
+        }
+        else
+        {
+            context.TargetItems.Add(copiedItem);
+        }
+    }
+}

Plk.Blazor.DragDrop/DropActions/DropActionBase.razor

@@ -0,0 +1,25 @@
+@typeparam TItem
+
+@implements IDisposable
+
+@code
+{
+    [CascadingParameter]
+    public Dropzone<TItem> Dropzone { get; set; }
+
+    protected override void OnInitialized()
+    {
+        if (Dropzone == null)
+            throw new ArgumentNullException(nameof(Dropzone), "DropAction must exist within a Dropzone");
+
+        Dropzone.RegisterDropAction(this);
+
+        base.OnInitialized();
+    }
+
+    public void Dispose()
+    {
+        if (Dropzone != null)
+            Dropzone.DeregisterDropAction(this);
+    }
+}

Plk.Blazor.DragDrop/DropActions/DropActionBase.razor.cs

@@ -0,0 +1,13 @@
+using System;
+using Microsoft.AspNetCore.Components;
+
+namespace Plk.Blazor.DragDrop.DropActions
+{
+    public abstract partial class DropActionBase<TItem> : IDropAction<TItem>
+    {
+        [Parameter]
+        public Func<DropActionContext<TItem>, bool> IsSuitable { get; set; } = (i) => true;
+
+        public abstract void Execute(DropActionContext<TItem> context);
+    }
+}