waynemunro / blazor-dragdrop

Easy-to-use Drag and Drop Library for Blazor

blazor-dragdrop

Drag and Drop Library for Blazor

Demo:

https://blazordragdrop.azurewebsites.net/

Install:

Install-Package blazor-dragdrop

Usage:

1. Add BlazorDragDrop to your Startup.cs

services.AddBlazorDragDrop();

2. 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" />

---

Make elements draggable:

<Dropzone>
    <Draggable>
        <li class="list-group-item">Cras justo odio</li>
    </Draggable>
      <Draggable>
        <li class="list-group-item">Morbi leo risus</li>
    </Draggable>
<Dropzone>

Create a dropzone:

<Dropzone>

</Dropzone>

Features:

Only allow limited number of items in a Dropzone:

<Dropzone MaxItems="2">

</Dropzone>

Restricted Dropzone: (executes the give accept func before accepting the draggable)

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

</Dropzone>

Attach data to draggables:

<Draggable Tag='new { Gender = "Female" , Age = 22}'>
<li class="list-group-item">Cras justo odio</li>
</Draggable>

Control if an element is draggable:

<Draggable AllowDrag="(d)=>MyFunc(d)">
<li class="list-group-item">Cras justo odio</li>
</Draggable>

---

Examples:

Create a draggable list:

    <Dropzone>
        <ul class="list-group">
            <Draggable>
                <li class="list-group-item">Cras justo odio</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item">Dapibus ac facilisis in</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item">Morbi leo risus</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item">Porta ac consectetur ac</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item">Vestibulum at eros</li>
            </Draggable>
        </ul>
    </Dropzone>

---

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/[email protected]/default.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>

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