* remove scss dependency

* corrected styles
* new syled page

BlazorReorderExample/BlazorReorderExample.csproj

@@ -7,7 +7,6 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="LibSassBuilder" Version="2.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.2" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.2" PrivateAssets="all" />
   </ItemGroup>
@@ -16,11 +15,4 @@
     <ProjectReference Include="..\BlazorReorderList\BlazorReorderList.csproj" />
   </ItemGroup>
 
-  <PropertyGroup>
-    <LibSassOutputStyle>compressed</LibSassOutputStyle>
-    <LibSassOutputStyle Condition="'$(Configuration)' == 'Debug'">expanded</LibSassOutputStyle>
-    <LibSassOutputLevel>verbose</LibSassOutputLevel>
-    <LibSassMessageLevel>High</LibSassMessageLevel>
-  </PropertyGroup>
-
 </Project>

BlazorReorderExample/Pages/Counter.razor

@@ -1,29 +0,0 @@
-@page "/counter"
-
-@inject IJSRuntime JS
-
-<div @ref="_element" style="width: 200px; height: 200px; background-color: blue;"></div>
-
-@foreach(var c in click)
-{
-    <p>@c</p>
-}
-
-
-@code {
-    ElementReference _element;
-    List<string> click = new();
-
-    [JSInvokable]
-    public void OnClick(IJSObjectReference jsReference)
-    {
-        click.Add("click");
-    }
-
-    protected override void OnAfterRender(bool firstRender)
-    {
-        base.OnAfterRender(firstRender);
-
-        JS.InvokeVoidAsync("interop.AddEventListener", _element, "click", DotNetObjectReference.Create(this), nameof(OnClick));
-    }
-}

BlazorReorderExample/Pages/Styled.razor

@@ -0,0 +1,28 @@
+@page "/styled"
+
+<PageTitle>Blazor Reorder Example</PageTitle>
+
+<h1>Hello, sorted world!</h1>
+
+Welcome to your new reorderer list.
+
+<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>      
+        </div>
+    </Reorder>
+</div>
+
+@code
+{
+    public List<ListItem> list = new()
+    {
+        new ListItem("Google", "https://google.com", "Again looking for a bug ..."),
+        new ListItem("StackOverflow", "https://stackoverflow.com", "Could be this the solution?"),
+        new ListItem("GitHub", "https://github.com", "Let's get awesome code"),
+        new ListItem("Twitter", "https://twitter.com", "I want to rest"),
+        new ListItem("Another", "https://another.com", "The solution must be somewhere!!!")
+    };
+}

BlazorReorderExample/Pages/Styled.razor.css

@@ -0,0 +1,23 @@
+::deep .item {
+    cursor: move;
+    user-select: none;
+}
+
+    ::deep .item:hover {
+        background: #4cff00;
+    }
+
+::deep .active {
+    background: #b200ff;
+}
+
+::deep .dragging {
+    box-shadow: 0 4px 20px #ffd800AA;
+    opacity: 0.8;
+    position: absolute;
+    z-index: 999;
+}
+
+    ::deep .dragging:hover {
+        background: #ffd800;
+    }

BlazorReorderExample/Shared/NavMenu.razor

@@ -15,8 +15,8 @@
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
+            <NavLink class="nav-link" href="styled">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
+                <span class="oi oi-plus" aria-hidden="true"></span> Styled
             </NavLink>
         </div>
     </nav>

BlazorReorderList/BlazorReorderList.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
@@ -15,11 +15,4 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.2" />
   </ItemGroup>
 
-  <ItemGroup>
-    <None Update="Reorder.razor.scss">
-      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </None>
-  </ItemGroup>
-
 </Project>

BlazorReorderList/Reorder.razor

@@ -10,7 +10,7 @@
 
 @if(ghost != null)
 {
-    <div class="item dragging" 
+    <div class="dragging item" 
          style="width: @(elemWidth)px; left: @(elemPosition.x)px; top: @(elemPosition.y)px; transform: translateX(@(ghostTrans.x)px) translateY(@(ghostTrans.y)px )">
     @ChildContent(ghost)
     </div>
@@ -68,9 +68,9 @@
         }
     }
 
-    public async Task<bool> onPress(MouseEventArgs m, TItem item, int index)
+    public async Task onPress(MouseEventArgs m, TItem item, int index)
     {
-        if (itemElem == null) return true;
+        if (itemElem == null) return;
         shouldRender = false; // Because the method triggers re-render, the click propagation is canceled, if you have a link/or any click event inside it's going to stop working
         ghost = item;
         ghostElem = itemElem[index];
@@ -78,8 +78,6 @@
         elemWidth = await js.getWidth(ghostElem);
         elemPosition = await js.getPosition(ghostElem);
         elemClickPosition = await js.getPoint(m);
-
-        return true;
     }
 
     [JSInvokable]

BlazorReorderList/Reorder.razor.css

@@ -12,9 +12,12 @@
 }
 
 .dragging {
-  background: #e0ffff;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   opacity: 0.8;
   position: absolute;
   z-index: 999;
 }
+
+    .dragging:hover {
+        background: #e0ffff;
+    }

BlazorReorderList/Reorder.razor.scss

@@ -1,19 +0,0 @@
-
-.item {
-    cursor: move;
-    user-select: none;
-
-    &:hover {
-            background: #ffffe0;
-        }
-    }
-        .active {
-            background: #ccc;
-        }
-.dragging {
-    background: #e0ffff;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-    opacity: 0.8;
-    position: absolute;
-    z-index: 999;
-}