@ng-dnd/core
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.
Then import the module and change your DndModule
backend to a backendFactory
like so:
The provideDnd
and standalone components are available from 3.0.
You will want to render previews. The <dnd-preview>
component is very helpful.
<dnd-preview>
<ng-template>
inside, pulling in the item's type as let-type
, and the item as let-item="item"
.A suggested arrangement is using an [ngSwitch]
directive on the type, with one *ngSwitchCase
per type.
If you don't like putting reusable strings directly in templates, then try this:
Example :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:
You can attach an empty image as your drag preview. Simply:
Example :Or:
Example :Simply pass allBackends as true to the preview.
Example :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.