@reachalpha/movable NPM

@reachalpha/movable

This is an angular directive that helps you move HTMLElements in Angular.

How to use

Installing and Usage

npm install --save @reachalpha/movable

Add the libary to a module's imports' array (i.e. app.module.ts)

import {MovableModule} from '@reachalpha/movable';

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

Add it to your HTML Element (i.e. app.component.html)

<div style="position: relative; width: 100%; height: 100%" #container>

  <div libMovable [relativeTo]="container" direction="left"
    style="position: absolute; left: 0; top: 0; width: 50px; height: 50px">
  </div>

</div>

Available configuration properties:

Property	Description	Required / Default	Type
relativeTo	parent element	required	HTMLElement
direction	direction the element is suposed to move	required	'left', 'right', 'top'
minSize	minimum size of the element after moving it	0 or handlerSize	number (px)
otherElement	element next to the one moving that adapts to it	void	HTMLElement
handlerSize	size of the element that allows the moving	10	number (px)
handlerInside	put the handler inside the element	false	boolean
clickToggle	if clicking the handler opens or closes the element	true	boolean
toggle	Element that opens / closes the element on click	null	HTMLElement
classOpen	class that is added to the toggle when the element is opened	null	string
classClose	class that is added to the toggle when the element is closed	null	string

Available events:

Event	Description	Type
positionChanged	Sends an event every time the element changes its position	number
opened	sends an event if the element is considered open	void
minSize	sends an event if the element is considered open	void