RMN.Blazor.DragDrop
1.1.0
Additional Details
Class and parameter names have been renamed in the new version.
For details, please refer to the documentation.
There is a newer version of this package available.
See the version list below for details.
See the version list below for details.
The owner has unlisted this package.
This could mean that the package is deprecated, has security vulnerabilities or shouldn't be used anymore.
dotnet add package RMN.Blazor.DragDrop --version 1.1.0
NuGet\Install-Package RMN.Blazor.DragDrop -Version 1.1.0
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.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add RMN.Blazor.DragDrop --version 1.1.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: RMN.Blazor.DragDrop, 1.1.0"
#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.1.0
// Install RMN.Blazor.DragDrop as a Cake Tool
#tool nuget:?package=RMN.Blazor.DragDrop&version=1.1.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
Blazor.DragDrop
This component provides simple, user-friendly drag and drop functionality for Blazor applications.
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 to your
index.html
file:
<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 render as the parent. |
Id | String | Guid | Id for the parent element. |
Class | String | "" | CSS class for the parent element. |
Sort | Boolean | true | Enables or disables drag and drop. |
Handle | String | "" | CSS class for the drag handle. |
Filter | String | "" | CSS class for items that can't be dragged. |
Items | List<T> | [ ] | List of items. |
Events
OnUpdate
: The method to be called when the list is updated.
Examples
Basic example
<DragDrop Items="Items" Context="item">
<DragDropItem>
<span>@item.Name</span>
</DragDropItem>
</DragDrop>
Advanced example
<DragDrop RootElement="ul"
Id="dragDropList"
Class="drag-drop-list"
Handle="drag-handle"
Filter="not-draggable"
Items="Items"
Context="item"
OnUpdate="OnUpdate">
<DragDropItem>
<li>
<i class="drag-handle @(item.Disabled ? "not-draggable" : "") fa-solid fa-grip-vertical"></i>
<span>@item.Name</span>
</li>
</DragDropItem>
</DragDrop>
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.0)
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.0)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.0)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.