blazor-dragdrop

Drag and Drop Library for Blazor

Demo:

https://blazordragdrop.azurewebsites.net/

Install:

Install-Package blazor-dragdrop

Usage:

Add BlazorDragDrop to your Startup.cs

services.AddBlazorDragDrop();

Include relevant stylesheet either in your _host.cshtml (server-side blazor) or index.html (client-side blazor)

<link href="_content/blazor-dragdrop/dragdrop.css" rel="stylesheet" />

Version 1.x:

Please upgrade to 2.0 - there will be no support/bugfixes for the 1.x version.

Version 2.x :

Create a draggable list for your items

You have to create a dropzone and assign your items to it:

    <Dropzone Items="MyItems">
        
    </Dropzone>

This will not yet render anything - you have to provide a render template so that the dropzone knows how to render your items.

    <Dropzone Items="MyItems">
        <div>@context.MyProperty</div>
    </Dropzone>

You can also use your own component as a render template:

    <Dropzone Items="MyItems">
        <MyCompoenent Item="@context"></MyComponent>
    </Dropzone>

You access your item via the @context - Alternatively, you can specify the Context attribute on the Dropzone element to assign a different name.

By default the dropzone will use a build-in style for the drag/drop animations.

If you add or remove items to the underlying list the dropzone will automatically update.

After a drag operation you can inspect your list to get the current position of items.

Features:

Only allow limited number of items in a Dropzone:

<Dropzone MaxItems="2">

</Dropzone>

If you drop something and the limit is reached you can get a notification by providing a callback.

Restrict Drop: (executes the give accept func before accepting the draggable)

<Dropzone Accepts='(d) => d.Gender == "Male"'>

</Dropzone>

If you drop something and the item is rejected you can get a notification by providing a callback.

Instant Replace:

By default you get a visual clue for the drop operation. You can activate Instant Replace to instead swap out items on the fly. This option should only be used for small lists.

<Dropzone InstantReplace="true">

</Dropzone>

Multiple Dropzone:

You can create more than one dropzone and move items between them.

Styling:

If you want to provide your own style you have to set the Style attribute to 'custom':

<Dropzone Items="MyItems" Style="DragDropStyle.Custom">

You can then target:

plk-dd-dragged-over
plk-dd-in-transit

Examples:

Check the demo page.

Mobile Devices:

The HTML 5 drag'n'drop API allows to implement drag'n'drop on most desktop browsers.

Unfortunately, most mobile browsers don't support it.

You need to make use of a polyfill library, e.g. mobile-drag-drop

Add this to your _host.html:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mobile-drag-drop@2.3.0-rc.2/default.css">
    <script src="https://cdn.jsdelivr.net/npm/mobile-drag-drop@2.3.0-rc.2/index.min.js"></script>

    <script>
        // options are optional ;)
        MobileDragDrop.polyfill({
            // use this to make use of the scroll behaviour
            dragImageTranslateOverride: MobileDragDrop.scrollBehaviourDragImageTranslateOverride
        });
    </script>

TarasBounty/blazor-dragdrop