Nebulous Plasma Muffin

    draggable-elm

    0.0.6 • Public • Published

    License: MIT Build Status

    draggable-elm

    Makes elements draggable. Vanilla style.

    const draggable = require('draggable-elm');
     
    const myElm = document.getElementById('target');
     
    draggable(myElm, {options});

    Options

    • classname - String. A replacement for the draggable classname.
    • top - Number. Initial top position in pixels.
    • bottom - Number. Initial bottom position in pixels.
    • left - Number. Initial left position in pixels.
    • right - Number. Initial right position in pixels.
    • axis - String. Restrict movement along a single axis, 'x' or 'y'.
    • grip - Element | String (element selector). A grip handle element to activate draggability upon mouse down. By default you can start dragging from anywhere within the main element.

    API

    Calling the draggable() function returns a Draggable instance:

    const d = draggable(elm);

    It has the following methods:

    .enable() / .disable()

    Toggle draggability. When disabled, the main element gets a 'drag-disabled' classname.

    .setGrip(newGrip)

    Sets a new grip handle. Argument could be either an HTML Element or an element selector string (e.g. '#my-grip'). See the grip option above.

    .on(eventName, callback)

    Listen to drag and drop events:

    • 'drag-start' - dragging started, on mouse down.
    • 'dragging' - moving around, on mouse move (with mouse down)
    • 'drag-stop' - dragging stopped, on mouse up.

    Event Aliases
    For extra convenience, anything that contains start, stop/end/drop or ing will match its respective event.

    .moveTo({top, left, bottom, right})

    Sets the element position. The argument is an object containing one or more of the positioning properties:

    • top
    • left
    • bottom
    • right

    top and left are preferred over bottom and right, respectively.

    .destroy()

    Kills the Draggable instance for good, unbinds events, releases element references.

    Classnames

    For styling, the main element will be given the following classes:

    • 'draggable' - from initialization until destruction.
    • 'dragging' - on mouse down, until mouse up.

    Any element that is set as a grip handle will be given the classname: 'drag-grip-handle'.

     

    Position:

    On initialization, the target element will be placed inside the <body> element and will be given an inline style of position: absolute.

    Install

    npm i draggable-elm

    DownloadsWeekly Downloads

    2

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    20.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • taitulism