@reachalpha/movable

Angular directive that allows HTML Element movement

Usage no npm install needed!

<script type="module">
  import reachalphaMovable from 'https://cdn.skypack.dev/@reachalpha/movable';
</script>

README

@reachalpha/movable npm version

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