oosor / d-d-material-style

drag and drop with material style

d-d-material-style

drag and drop with material style

Demo

https://angular-jd6bgy.stackblitz.io or stackblitz editor

Install

npm i d-d-material-style --save

Setup

import { DDMaterialStyleModule } from 'd-d-material-style';

@NgModule({
  ...
  imports:      [ ..., DDMaterialStyleModule ],
  ...
})

Use Directive

<div ddMatStyle>Dragable div</div>

<div class="limit-box" #container>
  <div ddMatStyle config="{container: container}">Dragable div inner div.limit-box</div>
</div>

Directive config

@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.

Use Component with Directive

<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>

Component config

@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.