Need help with blazor-dragdrop?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Postlagerkarte
214 Stars 54 Forks MIT License 163 Commits 43 Opened issues

Description

Easy-to-use Drag and Drop Library for Blazor

Services available

!
?

Need anything else?

Contributors list

# 256,332
HTML
C#
blazor
128 commits
# 184,568
C#
identit...
Shell
PHP
4 commits
# 386,954
C#
HTML
antdesi...
Bootstr...
1 commit
# 87,968
HTML
C#
session...
kibana
1 commit

blazor-dragdrop

Drag and Drop Library for Blazor

Build Status

Demo:

https://blazordragdrop.azurewebsites.net/

Install:

Install-Package blazor-dragdrop

NuGet version (blazor-dragdrop)

Usage:

1) Add BlazorDragDrop to your Startup.cs

services.AddBlazorDragDrop();

2) Add Plk.Blazor.DragDrop to your _Imports.razor

@using Plk.Blazor.DragDrop

3) Add relevant styles to your app (since 2.2 no styles are included in the library anymore)

You can copy styles from dragdrop.css to your site.css to get started. Read more about styling here.


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>

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

    
        
@context.MyProperty

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

    
        
    

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.

Use the TItem property of the Dropzone to tell the compiler about the item type you are using. It is helpful when using some of the event handlers.

Features:

Only allow limited number of items in a Dropzone:


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

Restrict Drop:

The item can only be dropped if the given Func returns

true
. The first parameter is the item that is currently being dragged. The second parameter is the item directly under the current item or null when there is a gap.

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

Copy Items:

By default, items are moved between dropzones.

If you instead want the item to be copied you can make use of the "CopyItem" attribute:

    
@context.Titel

The CopyItem attribute expects a method telling the dropzone how to create a copy of the item. It receives the currently active item as input.

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.


Multiple Dropzone:

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

Styling:

To style the dropzone divs you can either create a css selector for plk-dd-dropzone or you assign classes to the dropzone:


Furthermore, you create css selectors for the following classes:

plk-dd-dragged-over (class added to the item that is currently dragged over)
plk-dd-in-transit (class added to the item that is currently dragged around)
plk-dd-spacing (class added to the div that sits between two items)
plk-dd-spacing-dragged-over (class added to div that is currently the drop target)
plk-dd-inprogess (class added to a dropzone when a drag operation is in progress)

You should always disable pointer events for a dropzone when a drag operation is in progress. Include this in your custom css:

.plk-dd-inprogess > * {
    pointer-events: none;
}

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:

    
    

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.