Draggy

Make any element draggable. Demo.

import Draggable from '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] | Defines a smaller area within the draggable element that stays within movement limits. Useful to restrict movement based on an inner shape rather than the full element. | | precision | 1 | Round position to that extent, in pixels. | | css3 | true | Use position vs 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 | Loop 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 an array, number or function. | | within | document | Restrict movement within the container. Pass 'parent' to use parent node. | | handle | self.element | Use element or selector as a handle for drag. Clicking outside the handle is ignored. | | 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. |

What draggy is not

• It doesn’t do ghost move, as it is not draggable behavior and can be implemented externally.
• It doesn’t do mouse hiding on drag, as it can be done via callbacks.
• It doesn’t init itself automatically - it's up to you to decide when to create/init draggable.
• It doesn’t polyfill native draggable, as it targets to complete simple task of visual placement of element.

Alternatives

• interactjs
• @shopify/draggable
• draggabilly

License

MIT