Draggy NPM | npm.io

Draggy

<a href="/license"><img src="https://img.shields.io/npm/l/draggy.svg"/></a>
<img src="https://david-dm.org/dfcreative/draggy.svg"/>

Draggable behaviour for elements. Demo.

var Draggable = require('draggy');

//make an element draggable
var el = document.querySelector('.my-element');
var draggy = new Draggable(el, {
	release: true,
	sniper: false,
	axis: 'x'
});

//bind event handler
draggy.on('drag', function () {

});

Options

Parameter	Default	Description
`axis`	`null`	Restrict movement by axis: `'x'`, `'y'` or `null`.
`pin`	`[0,0, selfWidth, selfHeight]`	An area within draggable element which is surely resides within movement limits. Useful if you need draggable element to be restricted not by it’s own shape, but by some inner shape.
`precision`	`1`	Round position to that extent, in pixels.
`css3`	`true`	Use `position` or `translate3d` to place element. The first is more precise and reliable, the second is faster.
`release`	`false`	Continue movement when user releases drag.
`repeat`	`false`	Cycle movement by one of axis: `'x'`, `'y'` or `'both'`.
`sniper`	`true`	Slow down movement by pressing Ctrl/Cmd.
`threshold`	`0`	A movement threshold required to start drag - whether array, number or function.
`within`	`document`	Restrict movement within the container. Pass `'parent'` to take parent node.
`handle`	`self.element`	Use the passed element or selector as a handle for drag. Clicking not on the handle will be ignored. Passing null will ignore handle.
`cancel`	`undefined`	Ignore dragging started on the elements matching the selector.
`droppable`	`undefined`	Selector, element or list of elements to detect droppable areas. For each drop element will be invoked `drop,`dragover`and`dragout` events.

Events

Name	Description
`dragstart`	Drag started. Called both on element/controller.
`threshold`	Entered threshold mode. Called on controller.
`drag`	Drag iteration. Called both on element/controller.
`track`	Track movement. Called on controller.
`release`	User released drag. Called on controller.
`dragend`	Drag has completely finished. Called both on element/controller.
`dragover`	Called on self and on drop target.
`dragout`	Called on self and on drop target.
`drop`	Called on self and on drop target.

API

Name	Description
`Draggy.cache`	WeakMap containing draggy instances for elements. `Draggy.cache.get(element)` - return draggy instance for the element.
`Draggy.prototype.move(x, y)`	Move to a new position, taking into account axis and limits. You can redefine this method to implement custom kinds of movement restrictions, like circular movement. But who dares?
`Draggy.prototype.state`	Current drag state: `'idle'`, `'threshold'`, `'drag'`, `'release'`.
`Draggy.prototype.update(event?)`	Update movement limits. `event` is optional.

What draggy is not

It doesn’t do ghost move, as it is not draggable behaviour and can be implemented externally.
It doesn’t do mouse hiding on drag, as it is implementable externally via callbacks.
It doesn’t init itself automatically on elements as it is due to user to decide when to create/init draggable elements.
It doesn’t polyfill native draggable, as it targets to complete simple task of visual placement of element.

draggable drag-n-drop interact

define-state emmy get-client-xy get-uid inherits intersects mucss mumath mutype xtend

@infinitebrahmanuniverse/nolb-drag @everything-registry/sub-chunk-1513 whiteboard-toolbar audio-lab audio-stats canary-ui prama resizable slidy start-app

8 years ago

8 years ago

8 years ago

8 years ago