Drag & Drop

import { TgDropGridDirective } from '@trademe/tangram';

Drag & Drop allows you to freely move elements on a page or rearrange items in a grid. Useful for sorting items.

tgDrag 1

tgDrag 2

tgDrag 3

tgDrag 4

Drag item API options

Code

<div
    tgDropGrid>
    <div
        tgDrag>
        tgDrag 1
    </div>
    <div
        tgDrag>
        tgDrag 2
    </div>
    <div
        tgDrag>
        tgDrag 3
    </div>
    <div
        tgDrag>
        tgDrag 4
    </div>
</div>

Behaviour

Add tgDrag to an element to make it draggable
To allow elements to be rearranged in a grid put them inside tgDropGrid
The CSS class tg-drag--is-dragging is added to items being dragged

Accessibility

Coming soon...