Git Product home page Git Product logo

blazor-dragdrop's Introduction

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();
  1. Add Plk.Blazor.DragDrop to your _Imports.razor
@using Plk.Blazor.DragDrop
  1. 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 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.

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:

<Dropzone MaxItems="2">

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

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

</Dropzone>

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:

<Dropzone CopyItem="(item)=> { return new TodoItem() {Titel = item.Titel}; }" Items="MyThirdList" TItem="TodoItem" OnItemDrop="@((i)=>lastdropped = i)">
    <div style="border: 2px solid black">
        @context.Titel
    </div>
</Dropzone>

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.

<Dropzone InstantReplace="true">

</Dropzone>

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:

<Dropzone Class="my-a my-b">

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:

    <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>

blazor-dragdrop's People

Contributors

postlagerkarte avatar virustrinity avatar nadais avatar daghb avatar meysammoghaddam avatar thatrickguy avatar koryphaee avatar rybkov avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.