drag and drop with material style
https://angular-jd6bgy.stackblitz.io or stackblitz editor
npm i d-d-material-style --save
import { DDMaterialStyleModule } from 'd-d-material-style';
@NgModule({
...
imports: [ ..., DDMaterialStyleModule ],
...
})
<div ddMatStyle>Dragable div</div>
<div class="limit-box" #container>
<div ddMatStyle config="{container: container}">Dragable div inner div.limit-box</div>
</div>
@Input() config: {container: any, direction?: 'x' | 'y' | 'grid', matClick?: boolean, shadow?: boolean, elem?: any, swipe?: string, autoWidth?: boolean, autoHeight?: boolean}
@Input() draggable: boolean;
@Input() laterInit: boolean;
@Output() dChange: EventEmitter<IEvent>
@Output() dDrop: EventEmitter<IEvent>
IEvent = {
type: 'change' | 'drop';
point: {...};
elem: {...} | any;
collection: {...}[] | any;
}
See at example.
<div class="vertical-box" #container>
<d-d-material-style [config]="{container: container, direction: 'y', shadow: true}">
<div class='item {{ el.style }}' *ngFor="let el of miniCollect" ddMatStyle>
<span>{{ el.data }}</span>
</div>
</d-d-material-style>
</div>
@Input() config: {container: any, direction?: 'x' | 'y' | 'grid', matClick?: boolean, shadow?: boolean, collection?: any[], swipe?: string, autoWidth?: boolean, autoHeight?: boolean}
@Input() draggable: boolean;
@Input() laterInit: boolean;
@Output() dChange: EventEmitter<IEvent>
@Output() dDrop: EventEmitter<IEvent>
See at example.