displacejs
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.1 • Public • Published

    displace.js

    A minimal javascript library to enable moveable DOM elements.

    • ~1.2kb gzipped
    • supports mobile touch
    • no dependencies/bloat
    • IE9+

    Getting started

    Reference

    Install via npm:

    npm install --save displacejs

    Reference displace.min.js and use via displace:

    // es6
    import displace from 'displacejs';
     
    // commonjs
    let displace = require('displace');
     
    // if using globally in browser
    const displace = window.displacejs;

    Initialize

    Initialize and use:

    // initial
    const d = displace(document.querySelector('.some-div'), options);

    API

    Methods

    displace(element, options)

    Creates a new displace instance with a DOM element. For options, see below.

    reinit()

    Runs setup again. Useful when divs have been moved or resized.

    displace.destroy()

    Removes event listeners and destroys instance.


    Options

    constrain

    Constrains element to its parent container

    Default: false

    relativeTo

    Constrains element to the specified DOM element. Requires constrain to be true.

    Default: null

    handle

    Assigns a child element as the moveable handle for the parent element.

    Default: null

    highlightInputs

    Allows you to highlight text in inputs and textareas by disabling drag events originating from those elements.

    Default: false

    ignoreFn

    Function that allows you to prevent dragging from an event. If the function returns true, the event will be ignored.

    Default: null

    onMouseDown

    Function that is triggered when user clicks down on moveable element.

    Default: null

    onMouseMove

    Function that is triggered when user moves element.

    Default: null

    onMouseUp

    Function that is triggered when user clicks up on moveable element.

    Default: null

    onTouchStart

    Function that is triggered when initiates touch event.

    Default: null

    onTouchMove

    Function that is triggered when moves element during touch event.

    Default: null

    onTouchStop

    Function that is triggered when user ends touch event.

    Default: null

    customMove

    Function that can be used to override how x and y are being set on the displaced element on move.

    Default: null

    Development

    Clone the repo and npm install. Available npm scripts are:

    • build library: lib-build
    • library development (watch src files and build on change): lib-dev
    • docs development (port 3001): docs-dev

    Keywords

    Install

    npm i displacejs

    DownloadsWeekly Downloads

    318

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    33.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • catc