@ng-dnd/multi-backend documentation

Go back to @ng-dnd/core

@ng-dnd/multi-backend

Build Status npm GitHub license

This package does two things.

First, it re-exports dnd-multi-backend, react-dnd-touch-backend and react-dnd-html5-backend.

Second, it gives you a convenient and easy way to render previews when the touch backend is in use.

Installation

Example :
yarn add @ng-dnd/multi-backend

Then import the module and change your DndModule backend to a backendFactory like so:

Example :
import { DndMultiBackendModule, MultiBackend, HTML5ToTouch } from '@ng-dnd/multi-backend';

@NgModule({
  imports: [
    // ...,
    DndMultiBackendModule,
    DndModule.forRoot({ backend: MultiBackend: options: HTML5ToTouch }),
  ],
})
export class AppModule {}

The provideDnd and standalone components are available from 3.0.

Example :
import { provideDnd } from '@ng-dnd/core';
import { MultiBackend, HTML5ToTouch } from '@ng-dnd/multi-backend';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...,
    provideDnd({ backend: MultiBackend: options: HTML5ToTouch }),
  ],
};
Example :
import { DndPreview } from '@ng-dnd/multi-backend';

@Component({
  // ...,
  standalone: true,
  imports: [DndPreview],
})
export class AppComponent {}

Normal usage

You will want to render previews. The <dnd-preview> component is very helpful.

  1. Create a <dnd-preview>
  2. Add an <ng-template> inside, pulling in the item's type as let-type, and the item as let-item="item".
  3. Render whatever you want based on that information.

A suggested arrangement is using an [ngSwitch] directive on the type, with one *ngSwitchCase per type.

Example :
<dnd-preview>
  <ng-template let-type let-item="item">
    <ng-content [ngSwitch]="type">
      <div *ngSwitchCase="'TYPE'">{{ item | json }}</div>

      <your-component *ngSwitchCase="'OTHER_TYPE'">{{ item | json }}</your-component>

      <ng-content *ngSwitchCase="'THIRD_TYPE'"> ... </ng-content>
    </ng-content>
  </ng-template>
</dnd-preview>

If you don't like putting reusable strings directly in templates, then try this:

Example :
// item-types.ts
export const ItemTypes = {
  TYPE: 'TYPE',
  OTHER_TYPE: 'OTHER_TYPE',
  THIRD_TYPE: 'THIRD_TYPE',
};
Example :
// your-component.ts
import { ItemTypes } from './item-types';
@Component({
  template: `
    ...
    <div *ngSwitchCase="ItemTypes.OTHER_TYPE">...</div>
  `,
})
export class YourComponent {
  // make ItemTypes a property on the class
  ItemTypes = ItemTypes;
}

Using the preview component even in HTML5 mode

Sometimes, it is desirable to render a totally custom drag preview even in desktop browsers. This might be because some browsers only show a small feathered section of a larged dragged element, or just because you want to show something different while an item is in flight. You will need two things:

1. An empty HTML5 drag preview

You can attach an empty image as your drag preview. Simply:

Example :
<div [dragSource]="source" [noHTML5Preview]="true"></div>

Or:

Example :
import { getEmptyImage } from 'react-dnd-html5-backend';
// ...

ngOnInit() {
  source.connectDragPreview(getEmptyImage());
}

2. Disable the touch-backend-only check in the preview component

Simply pass allBackends as true to the preview.

Example :
<dnd-preview [allBackends]="true">
  ...
</dnd-preview>

Custom backends and transitions, e.g. supplying options to the TouchBackend

You can also import anything from dnd-multi-backend and create your own transitions. Refer to the original documentation, or simply to the autocomplete through the re-exported types in this package.

Remember that you will need to create an exported function and pass it as a backendFactory if you want to continue using Angular AOT compilation.

Example :
import {
  HTML5Backend,
  MouseTransition,
  MultiBackendOptions,
  TouchBackend,
  TouchBackendOptions,
  TouchTransition,
} from '@ng-dnd/multi-backend';

// Replace HTML5ToTouch with this
export const CustomTransitions: MultiBackendOptions = {
  backends: [
    {
      id: 'html5',
      backend: HTML5Backend,
      transition: MouseTransition,
    },
    {
      id: 'touch',
      backend: TouchBackend,
      options: {
        enableMouseEvents: false,
        // your options here
      } as TouchBackendOptions,
      transition: TouchTransition,
      preview: true,
    },
  ],
};

results matching ""

    No results matching ""