Merge pull request #1 from digitaldirk/main

Added ForceFallback property on SortableList and demo page

Pages/Index.razor

@@ -37,4 +37,7 @@
     <section class="section">
         <Filtering></Filtering>
     </section>
+    <section class="section">
+        <ForceFallback></ForceFallback>
+    </section>
 </div>

README.MD

@@ -56,6 +56,8 @@ All proerties are optional and have default values.
 
 `Filter` (Default: ""): The CSS class you want to use to identify elements that cannot be sorted or moved.
 
+`ForceFallback`: Boolean (Default: True) - Enable HTML5 drag and drop by setting to `false`.
+
 ### Methods
 
 `OnUpdate` (Optional): The method to be called when the list is updated. You can name this method whatever you like, but it expects a `oldIndex` and `newIndex` parameters when the drag and drop occurs.

Shared/Demos/ForceFallback.razor

@@ -0,0 +1,100 @@
+<div class="container">
+    <h1 class="title is-size-1 has-text-centered">Force Fallback to JavaScript</h1>
+    <p class="mb-4">Due to HTML5 drag and drop not being universally supported and the loss of control over the styling forceFallback is set to true by default for this library so the HTML5 drag and drop is not used. If preferred, you can set the 'ForceFallback' to false to get SortableJS's default behavior. The list on the left has 'ForceFallback' set to true, and the list on the right has ForceFallback set to false.</p>
+    <Tabs CodeContent="@codeContent">
+        <ExampleContent>
+            <div class="columns">
+                <div class="column">
+                    <SortableList Id="forceFallback1" Items="items" OnUpdate="@SortList" Context="item">
+                        <SortableItemTemplate>
+                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
+                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
+                            </div>
+                        </SortableItemTemplate>
+                    </SortableList>
+                </div>
+                <div class="column">
+                    <SortableList Id="forceFallback2" Items="items2" OnUpdate="@SortList" Context="item" ForceFallback="false">
+                        <SortableItemTemplate>
+                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
+                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
+                            </div>
+                        </SortableItemTemplate>
+                    </SortableList>
+                </div>
+            </div>
+        </ExampleContent>
+    </Tabs>
+</div>
+
+@code {
+
+    private string codeContent = $@"
+    <SortableList Id=""forceFallback1"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
+        <SortableItemTemplate>
+            <div class=""card has-border-light has-background-blazor has-text-white has-cursor-grab"">
+                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
+            </div>
+        </SortableItemTemplate>
+    </SortableList>
+    <SortableList Id=""forceFallback2"" Items=""items2"" OnUpdate=""@SortList"" Context=""item"" ForceFallback=""false"">
+        <SortableItemTemplate>
+            <div class=""card has-border-light has-background-blazor has-text-white has-cursor-grab"">
+                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
+            </div>
+        </SortableItemTemplate>
+    </SortableList>
+
+    @code {{
+        public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item {{ Id = i, Name = $""Item {{i}}"" }}).ToList();
+
+        public List<Item> items2 = Enumerable.Range(1, 10).Select(i => new Item {{ Id = i, Name = $""Item {{i}}"" }}).ToList();
+
+        private void SortList((int oldIndex, int newIndex) indices)
+        {{
+            // deconstruct the tuple
+            var (oldIndex, newIndex) = indices;
+
+            var items = this.items;
+            var itemToMove = items[oldIndex];
+            items.RemoveAt(oldIndex);
+
+            if (newIndex < items.Count)
+            {{
+                items.Insert(newIndex, itemToMove);
+            }}
+            else
+            {{
+                items.Add(itemToMove);
+            }}
+
+            StateHasChanged();
+        }}
+    }}
+    ";
+
+    public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
+
+    public List<Item> items2 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
+
+    private void SortList((int oldIndex, int newIndex) indices)
+    {
+        // deconstruct the tuple
+        var (oldIndex, newIndex) = indices;
+
+        var items = this.items;
+        var itemToMove = items[oldIndex];
+        items.RemoveAt(oldIndex);
+
+        if (newIndex < items.Count)
+        {
+            items.Insert(newIndex, itemToMove);
+        }
+        else
+        {
+            items.Add(itemToMove);
+        }
+
+        StateHasChanged();
+    }
+}

Shared/SortableList.razor

@@ -50,6 +50,9 @@
     [Parameter]
     public string? Filter { get; set; }
 
+    [Parameter]
+    public bool ForceFallback { get; set; } = true;
+
     private DotNetObjectReference<SortableList<T>>? selfReference;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -58,7 +61,7 @@
         {
             selfReference = DotNetObjectReference.Create(this);
             var module = await JS.InvokeAsync<IJSObjectReference>("import", "./Shared/SortableList.razor.js");
-            await module.InvokeAsync<string>("init", Id, Group, Pull, Put, Sort, Handle, Filter, selfReference);
+            await module.InvokeAsync<string>("init", Id, Group, Pull, Put, Sort, Handle, Filter, selfReference, ForceFallback);
         }
     }
 

Shared/SortableList.razor.js

@@ -1,4 +1,4 @@
-export function init(id, group, pull, put, sort, handle, filter, component) {
+export function init(id, group, pull, put, sort, handle, filter, component, forceFallback) {
     var sortable = new Sortable(document.getElementById(id), {
         animation: 200,
         group: {
@@ -8,7 +8,7 @@ export function init(id, group, pull, put, sort, handle, filter, component) {
         },
         filter: filter || undefined,
         sort: sort,
-        forceFallback: true,
+        forceFallback: forceFallback,
         handle: handle || undefined,
         onUpdate: (event) => {
             // Revert the DOM to match the .NET state