Touch enabled implementation of WHATWG drag and drop mechanism.
npm install pan
Touch enabled implementation of WHATWG drag and drop (aka HTML drag and drop) mechanism.
* Pan
* How Does It Work?
* Visual Feedback
* Benefits
* Quick Start
* Examples
* Events
* Event Object
* Download
``js`
new Pan(targetElement);
This will give targetElement a draggable property and set an event listener for dragstart, drag and dragend; it will also set an event listener for touchstart, touchmove and touchend. These events are re-emitted through the eventEmitter and allow you to animate handle in response to drag/touch events.
HTML drag and drop spec does not define a method for styling or animating the handle in response to the drag event, e.g. there is no way to control element opacity while dragging.
The following mechanism is used to get the full control of the visual feedback:
In the event of dragstart and touchstart:
1. Make a clone (handle) of the target element.
1. Take the target element out of the flow (i.e., hide).
1. Insert the handle element in place of the target element.
In the event of drag and touchmove:
1. Make a reference to the handle element available to the event object.
In the event of dragend and touchend:
3. Remove the handle element.
3. Restore the target element.
As a result, you have full control over the visual feedback.
There is a reference to the handle element in the Event Object.
* Access to all of the DOM events for drag and touch.
* Lightweight and performs good.
To make element draggable:
`js
var targetElement,
pan;
targetElement = document.querySelector('#target-element');
pan new Pan(targetElement);
pan.eventEmitter.on('start', function (e) {
console.log(e);
});
pan.eventEmitter.on('move', function (e) {
e.handle.style.transform = 'translate(' + e.offsetX + 'px,' + e.offsetY + 'px)';
});
pan.eventEmitter.on('end', function (e) {
console.log(e);
});
`
This will make the #target-element element draggable using CSS3 transformations.
The result of Pan() is an object with a single property (eventEmitter) used to emit events.
* Basic element dragging using CSS transformations.
* Events logged in the console.log.
The code for all of the examples is in the examples folder.
Raise an issue if you are missing an example.
You can listen for individual drag and touch DOM events:
`js
targetElement.addEventListener('dragstart', dragStart);
targetElement.addEventListener('drag', dragMove);
targetElement.addEventListener('dragend', dragEnd);
targetElement.addEventListener('touchstart', dragStart);
targetElement.addEventListener('touchmove', dragMove);
targetElement.addEventListener('touchend', dragEnd);
`
You can use the eventEmitter object that will normalize drag and touch events to:
`js`
pan.eventEmitter.on('start', dragStart);
pan.eventEmitter.on('move', dragMove);
pan.eventEmitter.on('end', dragEnd);
The listener of the eventEmitter is passed a single eventObject object.
`js`
pan.eventEmitter.on('move', function (eventObject) {
});
| Name | Value |
| --- | --- |
| offsetX | Distance from the starting point on X axis. |offsetY
| | Distance from the starting point on Y axis. |target
| | Target that received the event. |handle
| | Element used to represent the target element when dragging. |type
| | Event name. |
Using Bower:
`sh`
bower install pan
Using NPM:
`sh``
npm install pan-drag
The old-fashioned way, download either of the following files:
* https://raw.githubusercontent.com/gajus/pan/master/dist/pan.js
* https://raw.githubusercontent.com/gajus/pan/master/dist/pan.min.js