minidrag
A simple solution to make an HTML element draggable
Last updated 6 years ago by bpierre .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install minidrag 
SYNC missed versions from official npm registry.

minidrag Build Status

A simple solution to make an HTML element draggable. There is no dependencies.

minidrag illustration

Usage

minidrag(element, options);

Where element is the HTMLElement that will be draggable, and options is an object containing the options.

Example

A simple example that just makes the handle draggable:

<div id="container">
  <div id="handle"></div>
</div>
var minidrag = require('minidrag');

var handle = document.querySelector('#handle');
var container = document.querySelector('#container');

minidrag(handle, { constraint: container });

A more complex example with two handles that won’t overlap themselves:

<div id="container">
  <div id="handle-1"></div>
  <div id="handle-2"></div>
</div>
var minidrag = require('minidrag');

var handle1 = container.querySelector('#handle-1');
var handle2 = container.querySelector('#handle-2');
var container = document.querySelector('#container');

// starting x values
var handle1X = 0;
var handle2X = 560;

var handleWidth = 40;
handle2.style.left = handle2X + 'px';

minidrag(handle1, {
  constraint: container,
  move: function(position) { handle1X = position.left },

  // constraintFn: this function can change the position values
  // before they are applied to the dragged element. It doesn’t replace
  // the `constraint` option: both are applied.
  constraintFn: function(position) {
    if (position.left + handleWidth > handle2X) {
      position.left = handle2X - handleWidth;
    }
    return position;
  }
});

minidrag(handle2, {
  constraint: container,
  move: function(position) { handle2X = position.left },
  constraintFn: function(position) {
    if (position.left < handle1X + handleWidth) {
      position.left = handle1X + handleWidth;
    }
    return position;
  }
});

Installation

$ npm install minidrag

Options

constraint

The constraint (limits) of the dragged Element. Possible values: null (no constraints), 'x', 'y' (horizontal / vertical axis), or an HTMLElement (stay in the limits of the Element).

constraintFn

In addition to the constraint parameter, this function can change the position of the dragged Element, adding another limitation if needed (see the second example above). It must return the new position.

This function takes one paramater, which is the current position ({ top: Number, left: Number }) of the handle, after the constraint has been applied to it.

move

A function that will be called on every move event while the Element is dragged.

Parameters: position ({ top: Number, left: Number }), element (the dragged Element).

drop

A function that will be called when the Element is dropped.

Parameters: position ({ top: Number, left: Number }), element (the dragged Element).

Browser compatibility

IE9+ and modern browsers.

Browser support

License

MIT

Special thanks

Illustration made by Raphaël Bastide with scri.ch.

Current Tags

  • 0.1.1                                ...           latest (6 years ago)

9 Versions

  • 0.1.1                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
  • 0.0.6                                ...           6 years ago
  • 0.0.5                                ...           6 years ago
  • 0.0.4                                ...           6 years ago
  • 0.0.3                                ...           6 years ago
  • 0.0.2                                ...           6 years ago
  • 0.0.1                                ...           6 years ago
  • 0.0.0                                ...           6 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |