Simple drag and drop with dragula

Overview

npm version npm downloads slack Build Status codecov

Logo

Drag and drop so simple it hurts

Official Angular wrapper for dragula.

Notice: v2 has been released

It contains a number of breaking changes. Follow the migration guide here or read the full changelog.

Demo

Try out the demo!

Or play with this starter in your browser on StackBlitz.

Demo

Install

You can get it on npm.

npm install ng2-dragula
# or
yarn add ng2-dragula

Setup

1. Important: add the following line to your polyfills.ts:

(window as any).global = window;

This is a temporary workaround for #849, while upstream dragula still relies on global.

2. Add DragulaModule.forRoot() to your application module.

import { DragulaModule } from 'ng2-dragula';
@NgModule({
  imports: [
    ...,
    DragulaModule.forRoot()
  ],
})
export class AppModule { }

On any child modules (like lazy loaded route modules), just use DragulaModule.

3. Add the CSS to your project

You'll also need to add Dragula's CSS stylesheet dragula.css to your application (e.g. in styles.scss). The following is slightly better than node_modules/dragula/dist/dragula.css (it includes pointer-events: none (#508) and this fix), but you may wish to make your own modifications.

/* in-flight clone */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  pointer-events: none;
}
/* high-performance display:none; helper */
.gu-hide {
  left: -9999px !important;
}
/* added to mirrorContainer (default = body) while dragging */
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
/* added to the source element while its mirror is dragged */
.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

Then you're ready to go

Here's a super quick sample to get you started:

@Component({
  selector: "sample",
  template:`
  <div>
    <div class="wrapper">
      <div class="container" dragula="DRAGULA_FACTS">
        <div>You can move these elements between these two containers</div>
        <div>Moving them anywhere else isn't quite possible</div>
        <div>There's also the possibility of moving elements around in the same container, changing their position</div>
      </div>
      <div class="container" dragula="DRAGULA_FACTS">
        <div>This is the default use case. You only need to specify the containers you want to use</div>
        <div>More interactive use cases lie ahead</div>
        <div>Make sure to check out the <a href="https://github.com/bevacqua/dragula#readme">documentation on GitHub!</a></div>
      </div>
    </div>
  </div>
  `
})
class Sample {}

Usage

This package isn't very different from dragula itself. I'll mark the differences here, but please refer to the documentation for dragula if you need to learn more about dragula itself.

Directive

There's a dragula directive that makes a container's direct children draggable. You must supply a string. Both syntaxes, dragula="VAMPIRES" or [dragula]="'VAMPIRES'", work equally well.

<ul dragula="VAMPIRES">
  <li>Dracula</li>
  <li>Kurz</li>
  <li>Vladislav</li>
  <li>Deacon</li>
</ul>

Grouping containers

You can group containers together by giving them the same group name. When you do, the children of each container can be dragged to any container in the same group.

<div dragula="VAMPIRES">
  <!-- vamps in here -->
</div>
<div dragula="VAMPIRES">
  <!-- vamps in here -->
</div>

<div dragula="ZOMBIES">
  <!-- but zombies in here! -->
</div>

If you want to make sure you are using the same type string in different places, use the [dragula] syntax to pass a string variable from your component:

<div [dragula]="Vampires"></div>
<div [dragula]="Vampires"></div>
class MyComponent {
  Vampires = "VAMPIRES";
}

Saving changes to arrays with [(dragulaModel)]

If your container's children are rendered using ngFor, you may wish to read what your users have done. If you provide the same array to the [(dragulaModel)] attribute on the container element, any changes will be synced back to the array.

NOTE: v2 changes the behaviour of [dragulaModel]. It no longer mutates the arrays you give it, but will shallow clone them and give you the results. Use two-way binding with [(dragulaModel)]="...", or use the DragulaService dropModel and removeModel events to save the new models produced.

<ul dragula="VAMPIRES" [(dragulaModel)]="vampires">
  <li *ngFor="let vamp of vampires">
    {{ vamp.name }} likes {{ vamp.favouriteColor }}
  </li>
</ul>

You do not, of course, have to sync the changes back. The [(dragulaModel)] syntax is equivalent to:

<ul dragula="VAMPIRES" [dragulaModel]="vampires" (dragulaModelChange)="vampires = $event">
  ...
</ul>

Note: DO NOT put any other elements inside the container. The library relies on having the index of a DOM element inside a container mapping directly to their associated items in the array. Everything will be messed up if you do this.

On top of the normal Dragula events, when [(dragulaModel)] is provided, there are two extra events: dropModel and removeModel. Further details are available under Events

Drake options

If you need to configure the drake (there's exactly one drake per group), you can use the DragulaService.

import { DragulaService } from 'ng2-dragula';

class ConfigExample {
  constructor(private dragulaService: DragulaService) {
    dragulaService.createGroup("VAMPIRES", {
      removeOnSpill: true
    });
  }
}

See below for more info on options.

DragulaService

This service exposes a few different methods with which you can interact with dragula.

dragulaService.createGroup(name, options)

NOTE: formerly known as setOptions()

Creates a group named name, with an options object.

dragulaService.find(name: string)

Returns a Group named name, if there is one. A Group contains the following properties.

  • name is the name that identifies the group
  • drake is the raw drake instance itself
  • options is the options object used to create the drake. Modifying it won't do anything useful.

dragulaService.destroy(name)

Destroys a Group named name and its associated drake instance. Silently returns if the group does not exist.

DragulaOptions

Refer to the documentation for dragula to learn more about the native options.

All of the native options work with ng2-dragula. However, there is one addition:

copyItem: <T>(item: T) => T

When you have:

  • [(dragulaModel)]
  • copy is true or a function that returns true

... ng2-dragula will have to create a clone of the JS object you picked up. In previous versions of ng2-dragula, there was a terribly buggy, one-size-fits-all clone function. From v2 onwards, you MUST provide your own copyItem function.

If you have a simple object with no nested values, it could be as simple as:

{
  copy: ...,
  copyItem: (item: MyType) => ({ ...item })
}

There is a complete example using a Person class on the demo page.

Events

Whenever a drake instance is created with the dragula directive, there are several events you can subscribe to via DragulaService. Each event emits a typed object, which you can use to get information about what happened.

Refer to the Drake events documentation for more information about the different events available. Each event follows this format:

Event named: 'drag'

Native dragula:
  Use: drake.on('drag', listener)
  Listener arguments: (el, source)

ng2-dragula:
  Method: DragulaService.drag(groupName?: string): Observable<...>
  Observable of: { name: string; el: Element; source: Element; }

Each supports an optional parameter, groupName?: string, which filters events to the group you're interested in. This is usually better than getting all groups in one observable.

The sample below illustrates how you can use destructuring to pull values from the event, and unsubscribe when your component is destroyed.

<div dragula="VAMPIRES"></div>
import { Subscription } from 'rxjs';
import { DragulaService } from 'ng2-dragula';

export class MyComponent {
  // RxJS Subscription is an excellent API for managing many unsubscribe calls.
  // See note below about unsubscribing.
  subs = new Subscription();

  constructor(private dragulaService: DragulaService) {

    // These will get events limited to the VAMPIRES group.

    this.subs.add(this.dragulaService.drag("VAMPIRES")
      .subscribe(({ name, el, source }) => {
        // ...
      })
    );
    this.subs.add(this.dragulaService.drop("VAMPIRES")
      .subscribe(({ name, el, target, source, sibling }) => {
        // ...
      })
    );
    // some events have lots of properties, just pick the ones you need
    this.subs.add(this.dragulaService.dropModel("VAMPIRES")
      // WHOA
      // .subscribe(({ name, el, target, source, sibling, sourceModel, targetModel, item }) => {
      .subscribe(({ sourceModel, targetModel, item }) => {
        // ...
      })
    );

    // You can also get all events, not limited to a particular group
    this.subs.add(this.dragulaService.drop()
      .subscribe(({ name, el, target, source, sibling }) => {
        // ...
      })
    );
  }

  ngOnDestroy() {
    // destroy all the subscriptions at once
    this.subs.unsubscribe();
  }
}

NOTE: You should always unsubscribe each time you listen to an event. This is especially true for a component, which should tear itself down completely in ngOnDestroy, including any subscriptions. It might not be necessary if you have a global singleton service (which is never destroyed) doing the subscribing.

You can also engineer your use of events to avoid subscribing in the first place:

import { merge } from 'rxjs';
import { mapTo, startWith } from 'rxjs/operators';

dragStart$ = this.dragulaService.drag("VAMPIRES").pipe(mapTo(true));
dragEnd$ = this.dragulaService.dragend("VAMPIRES").pipe(mapTo(false));
isDragging$ = merge(dragStart$, dragEnd$).pipe(startWith(false));

// html: [class.dragging]="isDragging$ | async"

Special Events for ng2-dragula

The dropModel(name?: string) and removeModel(name?: string) events are only active when you have supplied [dragulaModel].

Event Name Listener Arguments Event Description
dropModel { type, el, target, source, item, sourceModel, targetModel, sourceIndex, targetIndex } same as normal drop, but with updated models + the item that was dropped
removeModel { type, el, container, source, item, sourceModel, sourceIndex } same as normal remove, but with updated model + the item that got removed

Classic Blunders

There are a number of very common issues filed against this repo. You will be mocked terribly if you file a bug and it turns out you made one of these blunders and it wasn't a bug at all.

1. Do not put [dragula] or [(dragulaModel)] on the same element as *ngFor.

WRONG:

<div class="container">
  <div *ngFor="let x of list"
       dragula="WRONG" [(dragulaModel)]="list">...</div>
</div>

RIGHT:

<div class="container" dragula="RIGHT" [(dragulaModel)]="list">
  <div *ngFor="let x of list">...</div>
</div>

2. Do not add any child elements that aren't meant to be draggable

WRONG:

<div class="container" dragula="WRONG" [(dragulaModel)]="list">
  <h2>WRONG: This header will mess up everything, and you will
      get really weird bugs on drop</h2>
  <div *ngFor="let x of list">...</div>
</div>

RIGHT:

<h2>This header will not be draggable or affect drags at all.</h2>
<div class="container" dragula="RIGHT" [(dragulaModel)]="list">
  <div *ngFor="let x of list">...</div>
</div>

Alternatives

There are hundreds of other libraries that do this. Some notable ones:

Development

  • You must use Yarn >= 1.3. It includes the 'workspaces' feature.
  • Please use Conventional Commits in your commit messages.

setup

yarn
(cd modules/ng2-dragula && yarn build)

run tests

(cd modules/ng2-dragula && yarn test)
# or
(cd modules/ng2-dragula && yarn test:headless)

run demo server

# listens for changes in the library and rebuilds on save
yarn watch
# runs demo server
(cd modules/demo && yarn start)

Publishing a new version

yarn lerna publish

Credits

  • v1: Nathan Walker (@NathanWalker)
  • v1.x: Dmitriy Shekhovtsov (@valorkin)
  • v2: Cormac Relf (@cormacrelf)
Comments
  • Drag/drop between multiple Angular2 components

    Drag/drop between multiple Angular2 components

    Hi, is it possible to drag&drop between two component instances?

    I have the same problem as described here: How to drag/drop to multiple Angular2 component using ng2-dragula http://stackoverflow.com/questions/35981273/how-to-drag-drop-to-multiple-angular2-component-using-ng2-dragula

    Quote:

    I have a Angular2 component using ng2-dragula to drag/drop like this:

    @Component({ selector: 'my-comp', directives: [ Dragula ], viewProviders: [ DragulaService ], template: <div class="my-div"> <div *ngFor="#item of items" [dragula]='"card-bag"' [dragulaModel]='items'> ... </div> </div> })

    My issue: if I create multiple "my-comp" component, item inside "card-bag" can not drag/drop across these component although they have the same bag name. These item are only able to drag/drop inside it owned component.

    Do we have any configs for drag/drop across components, or this is ng2-dragula limitation?

    Thanks.

    help wanted 
    opened by marcoklemm 39
  • chore(deps): Duplicate identifier errors on angular2-webpack-starter app

    chore(deps): Duplicate identifier errors on angular2-webpack-starter app

    If I import ng2-dragula: import {DragulaService} from "ng2-dragula/ng2-dragula"; import {Dragula} from "ng2-dragula/ng2-dragula"; TS compiler complains a dozen of such errors on my stater app ERROR in /ui/node_modules/ng2-dragula/node_modules/angular2/typings/node/node.d.ts (44,5): error TS2300: Duplicate identifier 'cache'.

    'dragula' is required. Any insights would be much appreciated.

    bug 
    opened by lanocturne 38
  • relax peer dependency to support angular 4.0.0

    relax peer dependency to support angular 4.0.0

    currently it results in "requires a peer of" warnings. It works on current angular 4 release, so perhaps the peerDep could be relaxed to >=4.0.0?

    opened by Ketec 29
  • Configuring ng2-dragula for system.js seed

    Configuring ng2-dragula for system.js seed

    I fail to figure out how to configure ng2-dragula with the system.js seed https://github.com/mgechev/angular2-seed I understand there is a similar ticket but clearly describing the solution for this widespread seed would be nice I think.

    Versions used: npm 3.3.12 node v5.1.0 MacOS 10.11.1 Chrome 48 Visual Studio Code Editor

    Steps npm install [email protected] [email protected] --save Then, in a component, when I do import { Dragula, DragulaService} from 'ng2-dragula/ng2-dragula'; Note the full import path above. Is this correct or incorrect?

    I get a runtime error where the browser tries to load dragula.js from http://localhost:5555/node_modules/dragula.js where obviously, the directory name is missing.

    Questions

    • How do I configure the seed to load the file from the correct directory?
    • Certainly I should configure the seed somehow to know where to find the actual ng2-dragula, i.e. somehow refer to directory nodes_modules/ng2-dragula/bundles I tried such configs in the seed's config.ts file's section DEV_NPM_DEPENDENCIES but didn't find a solution
    opened by thomasbee 29
  • Dragula within Dragula

    Dragula within Dragula

    I've tried to stop click propagation but to no avail :

     <div class="flex allow-scroll-right">
            <div *ngFor="let groups of groups" [dragula]="'bag-two'">
              <div class="customer-group ff" >
                <div class="group-title ellipsis">Client</div>
                <div class="elem-list" (click)="$event.stopPropagation()">
                  <div *ngFor="let elem of groupList" [dragula]="'bag-one'" [dragulaModel]="elem">
                    <app-pane [titleI]="elem" [valueI]="elem"></app-pane>
                  </div>
                </div>
    
              </div>
            </div>
    

    I get : image

    when I want to be able to distinguish between if I'm clicking inside of the inner bag or on the outer with inner bag boolean substracted.

    this is possible right?

    I just can't figure out how to do it.

    duplicate usage question 
    opened by tatsujb 28
  • Property 'on' in type 'MockDrake' is not assignable to the same property in base type 'DrakeWithModels'

    Property 'on' in type 'MockDrake' is not assignable to the same property in base type 'DrakeWithModels'

    This issue was not there when I started using this library but later on, found this issue (shown in attachment below): dragula-bug

    Issue is very simple:

    • Drag interface has a method on(events: string, callback: Function): Drake; => file index.d.ts
    • Interface DrakeWithModels extends Drake
    • Class MockDrake implements DrakeWithModels, where method on(events: string, callback: Function): void; is overriden but the return type is changed, which is not allowed.

    Fix is simple change the return type for method on in Interface Drag to void;

    duplicate didn’t fill out issue template 
    opened by rkgoswami 27
  • Angular2 Ngc error while importing DragulaModule

    Angular2 Ngc error while importing DragulaModule

    Hello,

    I'm using Dragula (module and service) with platformBrowserDynamic for Development, and is working very very fine!!

    But when i try to Build my App, using prod platformBrowser, the ngc shows me this error: ngc: Error: Unexpected value 'DragulaModule' imported by the module 'AppModule'

    Someone also got this error?

    Thanks, everyone!

    opened by ghost 24
  • DropModel event should return dropped model instance and index in dragulaModel

    DropModel event should return dropped model instance and index in dragulaModel

    I think the DropModel event is the perfect opportunity to include extra event args including the instance that was dropped and the index of that instance within the parent model array. Essentially encapsulating the following.

        private onDrop(args) {
            let [el, parent] = args;
    
            let index = this.getElementIndex(el);
            let item = this.items[index];
        }
    
    opened by Soviut 23
  • Auto Scrolling – dom-autoscroller

    Auto Scrolling – dom-autoscroller

    I'm looking for a way to make my larger list auto scrollable. What you think of integrating autoscroll into this package? I guess its a really typical use case for most (larger) scrollable lists.

    https://www.npmjs.com/package/dom-autoscroller

    usage question future reference 
    opened by manuelfink 18
  • [bug report] Types definition issue

    [bug report] Types definition issue

    Describe the bug (required)

    When i run tsc on my project i get:

    /node_modules/ng2-dragula/dist/MockDrake.d.ts, line: 22
                Class 'MockDrake' incorrectly implements interface 'DrakeWithModels'. Types of property 'on' are
                incompatible. Type '(event: string, callback: Function) => void' is not assignable to type '(events: string,
                callback: Function) => Drake'. Type 'void' is not assignable to type 'Drake'.
    
          L22:  export declare class MockDrake implements DrakeWithModels {
          L23:      containers: Element[];
    

    To Reproduce (required)

    Install the packages at the version below and run tsc

    Versions (required)

    • "@angular/core": "5.2.11"
    • "ng2-dragula": "2.1.0"
    • "typescript": "2.6.2"
    • @types/[email protected]

    If i change the line 42 of node_modules\ng2-dragula\dist\MockDrake.d.ts from on(event: string, callback: Function): void; to on(event: string, callback: Function): Drake;

    everything works

    Also see: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/15422

    opened by fttx 17
  • ctorParameters.map is not a function (wrong built solution?)

    ctorParameters.map is not a function (wrong built solution?)

    dragula problem

    reflection_capabilities.js:58 Uncaught TypeError: ctorParameters.map is not a function at ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:56680:45) at Reflector.parameters (http://localhost:4200/main.bundle.js:56814:44) at CompileMetadataResolver.getDependenciesMetadata (http://localhost:4200/main.bundle.js:34977:54) at CompileMetadataResolver.getTypeMetadata (http://localhost:4200/main.bundle.js:34942:26) at CompileMetadataResolver.getDirectiveMetadata (http://localhost:4200/main.bundle.js:34717:28) at http://localhost:4200/main.bundle.js:34786:49 at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/main.bundle.js:34779:44) at http://localhost:4200/main.bundle.js:34767:50 at Array.forEach (native)

    opened by montella1507 17
  • [bug report] Angular 15 Animations Dependency Bug

    [bug report] Angular 15 Animations Dependency Bug

    REQUIRED: Before filing a bug report

    Change each [ ] to [x] when you have done it.

    Describe the bug (required)

    Recently upgraded to Angular v15.0.4 and ng2-dragula v3.2.0 After updating I ran npm install and receive a dependency error related to @angular/animations

    To Reproduce (required)

    Steps to reproduce the behavior:

    1. Upgrade to Angular 15 using Angular CLI
    2. Change version of ng2-dragula to v3.2.0
    3. run npm install to install listed versions of packages
    4. Error:

    npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/animations npm ERR! @angular/animations@"^15.0.4" from the root project npm ERR! peerOptional @angular/animations@"15.0.4" from @angular/[email protected] npm ERR! node_modules/@angular/platform-browser npm ERR! @angular/platform-browser@"^15.0.4" from the root project npm ERR! peer @angular/platform-browser@"15.0.4" from @angular/[email protected] npm ERR! node_modules/@angular/forms npm ERR! @angular/forms@"^15.0.4" from the root project npm ERR! 2 more (@ctrl/ngx-codemirror, @ng-bootstrap/ng-bootstrap) npm ERR! 4 more (@angular/platform-browser-dynamic, @angular/router, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/animations@"^14.0.0" from [email protected] npm ERR! node_modules/ng2-dragula npm ERR! ng2-dragula@"^3.2.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: @angular/[email protected] npm ERR! node_modules/@angular/animations npm ERR! peer @angular/animations@"^14.0.0" from [email protected] npm ERR! node_modules/ng2-dragula npm ERR! ng2-dragula@"^3.2.0" from the root project

    Versions:

    • @angular/core: 15.0.4
    • ng2-dragula: 3.2.0

    Is this issue being tracked or is there a current work around?

    opened by millerbill3 1
  • [bug report] New index is created in a different position where it should be

    [bug report] New index is created in a different position where it should be

    Describe the bug (required)

    I'm using the latest dragula version (2.1.1) and I'm having an issue when dragging and dropping an index. For example, when I have two index, if I drag the second one on top but i don't drop it and then I drag it again to the original position and drop it, when I create a new index, this new index is created in the middle. If then I delete that index and then do the same with the first one but the other way around, the new index is created on top of every other index I have

    To Reproduce (required)

    Steps to reproduce the behavior:

    1. Create two index
    2. Drag the second one on top and don't drop it
    3. Drag the second one back to its original position and drop it
    4. Create a new index

    Versions (required)

    Please state which versions of the following packages you have installed:

    • @angular/core: 13.3.9
    • ng2-dragula: 2.1.1
    opened by sergio-ortuno 0
  • Filter piping on the list

    Filter piping on the list

    REQUIRED: Before filing a bug report

    Change each [ ] to [x] when you have done it.

    Describe the bug (required)

    I have created a search filter pipe that filters the list of items in the container. Once I filter and drag and drop the item, looks like the actualy index of the item doesn't change. For e.g. if the list contains ['foo','bar'] and I filter for 'bar' and drag and drop, I get 'foo'. So it seems the index of the current item (e.g. 0) is still reference to the unfiltered list ['foo','bar'].

    To Reproduce (required)

    Steps to reproduce the behavior:

    1. Create a simple search filter such as:
    import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({
      name: 'searchFilter'
    })
    export class SearchFilterPipe implements PipeTransform {
    
      transform(value: any, args?: any): any {
        if(!value) return null;
        if(!args) return value;
    
        args = args.toLowerCase();
    
        return value.filter(function(data: any){
          return JSON.stringify(data).toLowerCase().includes(args);
        });
      }
    }
    
    1. Apply it to the DOM element like this
    <div id="group-source" [dragula]="'GROUPS_CONTAINER'" [(dragulaModel)]="group_names">
        <span *ngFor="let group_name of group_names | searchFilter: query">{{group_name}}</span>
    </div>
    
    1. Filter list
    2. See error

    Screenshots (optional)

    If applicable, add screenshots to help explain your problem.

    Versions (required)

    Please state which versions of the following packages you have installed: "ng2-dragula": "^2.1.1"

    opened by thethakuri 1
  • [feature request] add new versions to npm releases

    [feature request] add new versions to npm releases

    REQUIRED: Before filing a feature request

    Change each [ ] to [x] when you have done it.

    • [x] My issue title starts with [feature request]
    • [x] I have thoroughly read through the README, and the dragula docs.
    • [x] I have searched through the ng2-dragula issues for related problems, including closed issues, and I didn't find anything.

    Is your feature request related to a problem? Please describe.

    Versions compatible with Angular 10+ aren't available through npm.

    Describe the solution you'd like

    Add new releases to npm.

    Describe alternatives you've considered

    Potentially not using dragula, and building something comparable with angular cdk.

    Additional context

    opened by Xaivteev 5
  • Possibility to merge related/similar items

    Possibility to merge related/similar items

    Change each [ ] to [x] when you have done it.

    Hello, I have an application based on this open source project which uses ng2-dragula for drag and drop items, would like to add the possibility to merge or group cards that have similar or related content together, so in this screenshot, I want to merge say the first card in Add column with the first in Less column.

    board-details

    and code for the component is here:https://github.com/AndreiSasu/portalizer.org/blob/master/portalizer/src/main/webapp/app/retro/board-details/board-details.component.ts#L110

    opened by ruvan83 0
Releases(v3.2.0)
Owner
Valor Software
Leader in the Angular development space since 2013. Creators of ngx-bootstrap. We provide design, architecture, engineering, product guidance and open source.
Valor Software
A simple and reusable datepicker component for React

React Date Picker A simple and reusable Datepicker component for React (Demo) Installation The package can be installed via npm: npm install react-dat

HackerOne 7k Jan 4, 2023
Super simple countdowns.

Countdown.js Countdown.js is a library that allows developers to set countdowns for any kind of interaction. For example, if you would like to submit

Gumroad 399 Dec 16, 2022
Countdown - jQuery CountDown Clock - Simple countdown plugin for product special offers

TronLink Wallet Address TRX - BTC - BTT - USDT: TH9RyofE7WiDDVVFLMJgFns2ByBRmgQzNB jQuery Countdown Clock jQuery countdown plugin that accounts for ti

E-Piksel 33 Aug 30, 2022
jQuery plugin to allow dragging and dropping of elements and sorting of lists and other nested structures.

Drag and Drop Basic jQuery plugin to allow drag and drop: dragging dropping of dragged elements sorting of lists and other nested html structures (ul,

Ole Trenner 12 Aug 26, 2021
A tiny and fast zero-dependency date-picker built with vanilla Javascript and CSS.

A tiny zero-dependency and framework-agnostic date picker that is incredibly easy to use! Compatible with any web UI framework, vanilla JS projects, and even HTML-only projects!

Nezar 1 Jan 22, 2021
Parse, validate, manipulate, and display dates in javascript.

Moment.js A JavaScript date library for parsing, validating, manipulating, and formatting dates. Project Status Moment.js is a legacy project, now in

Moment.js 47.1k Jan 2, 2023
⏱ A library for working with dates and times in JS

Luxon Luxon is a library for working with dates and times in JavaScript. DateTime.now().setZone("America/New_York").minus({ weeks: 1 }).endOf("day").t

Moment.js 13.4k Jan 9, 2023
🕑 js-joda is an immutable date and time library for JavaScript.

js-joda is an immutable date and time library for JavaScript. It provides a simple, domain-driven and clean API based on the ISO8601 calendar.

null 1.5k Dec 27, 2022
⚡️ Fast parsing, formatting and timezone manipulations for dates

node-cctz CCTZ is a C++ library for translating between absolute and civil times using the rules of a time zone. Install You will need C++11 compatibl

Vsevolod Strukchinsky 59 Oct 3, 2022
Vanillajs-datepicker - A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks

Vanilla JS Datepicker A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks This package is written from scratch as E

null 489 Dec 30, 2022
CalendarPickerJS - A minimalistic and modern date-picker component/library 🗓️👨🏽‍💻 Written in Vanilla JS

CalendarPickerJS The simple and pretty way to let a user select a day! Supports all major browser. Entirely written in Vanilla JavaScript with no depe

Mathias Picker 15 Dec 6, 2022
Create Persian Calendar as html helper with tag builder c# , and convert selected persian date to gregorian date

Persian-Calendar Use JS,Html,CSS,C# White theme for Persian Calendar , easy to use. Create Persian Calendar as html helper. Use Tag builder in c# for

Tareq Awwad 4 Feb 28, 2022
A date picker web component, and spiritual successor to duet date picker

<date-picker> A date picker web component, based on duet date picker, except authored with Lit and using shadow DOM. This is a work in progress. Todo:

Nick Williams 25 Aug 3, 2022
This library provide a fast and easy way to work with date.

Calendar.js Calendar.js provide a fast way to work with dates when you don't wanna deal with hours, minute, second and so on. It means that Calendar.j

ActuallyNotaDev 3 Apr 27, 2022
Make drag-and-drop easier using DropPoint. Drag content without having to open side-by-side windows

Make drag-and-drop easier using DropPoint! DropPoint helps you drag content without having to open side-by-side windows Works on Windows, Linux and Ma

Sudev Suresh Sreedevi 391 Dec 29, 2022
:ok_hand: Drag and drop so simple it hurts

Drag and drop so simple it hurts Browser support includes every sane browser and IE7+. (Granted you polyfill the functional Array methods in ES5) Fram

Nicolás Bevacqua 21.4k Jan 7, 2023
Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

Fine Uploader is no longer maintained and the project has been effectively shut down. For more info, see https://github.com/FineUploader/fine-uploader

Fine Uploader 8.2k Jan 2, 2023
Drag and drop page builder and CMS for React, Vue, Angular, and more

Drag and drop page builder and CMS for React, Vue, Angular, and more Use your code components and the stack of your choice. No more being pestered for

Builder.io 4.3k Jan 9, 2023
Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and easy to use it

Digispark_Overmaster Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and

Yehia Elborma 5 Nov 14, 2022