RMN.Blazor.DragDrop
1.2.1
dotnet add package RMN.Blazor.DragDrop --version 1.2.1
NuGet\Install-Package RMN.Blazor.DragDrop -Version 1.2.1
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="RMN.Blazor.DragDrop" Version="1.2.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add RMN.Blazor.DragDrop --version 1.2.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: RMN.Blazor.DragDrop, 1.2.1"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install RMN.Blazor.DragDrop as a Cake Addin
#addin nuget:?package=RMN.Blazor.DragDrop&version=1.2.1
// Install RMN.Blazor.DragDrop as a Cake Tool
#tool nuget:?package=RMN.Blazor.DragDrop&version=1.2.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
Blazor.DragDrop
This component provides simple and user-friendly drag and drop functionality for Blazor applications.
Features
- Drag and drop items within a list, both horizontally and vertically.
- Drag and drop items between multiple lists. (Coming soon)
- Choose any HTML element to serve as the parent.
- Apply custom CSS classes to the parent element.
- Use a drag handle to allow dragging only by the handle, rather than the whole item.
- Prevent specific items from being dragged.
- Prevent reordering the list.
How to use
Install the RMN.Blazor.DragDrop NuGet package in your project.
Add the component namespace to your
_Imports.razor
file:
@using RMN.Blazor.DragDrop
- Add SortableJS:
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
API
Properties
Name | Type | Default | Description |
---|---|---|---|
RootElement | String | "div" | Sets what element to serve as the parent. |
Id | String | Guid | Id for the parent element. |
Class | String | "" | CSS class for the parent element. |
DragHandleClass | String | "" | CSS class for the drag handle. |
UndraggableItemClass | String | "" | CSS class for items that can't be dragged. |
AllowReorder | Boolean | true | Enables or disables reordering the list. |
Items | List<T> | [ ] | List of items. |
Context | String | context | Sets the parameter name for the list items. |
Events
OnUpdate
: The method to be called when the list is updated.
Examples
Basic example
<DragDropList Items="Items" Context="item">
<DragDropListItem>
<p>@item.Name</p>
</DragDropListItem>
</DragDropList>
Advanced example
<DragDropList RootElement="ul"
Id="dragDropList"
Class="drag-drop-list"
DragHandleClass="drag-handle"
UndraggableItemClass="not-draggable"
Items="Items"
Context="item"
OnUpdate="OnUpdate">
<DragDropListItem>
<li>
<i class="fa-solid fa-grip-vertical drag-handle @(item.Disabled ? "not-draggable" : "")"></i>
<span>@item.Name</span>
</li>
</DragDropListItem>
</DragDropList>
Licence
Project is licensed under the MIT License.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 is compatible. net5.0-windows was computed. net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net5.0
- Microsoft.AspNetCore.Components.Web (>= 5.0.17)
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.31)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.20)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.6)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.