https://github.com/metafizzy/unidragger

:point_down: Draggable base class
https://github.com/metafizzy/unidragger

Last synced: 19 days ago
JSON representation

:point_down: Draggable base class

• Host: GitHub
• URL: https://github.com/metafizzy/unidragger
• Owner: metafizzy
• License: mit
• Created: 2015-01-22T18:19:12.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T07:14:29.000Z (over 1 year ago)
• Last Synced: 2024-11-16T23:16:18.544Z (27 days ago)
• Language: JavaScript
• Homepage:
• Size: 130 KB
• Stars: 83
• Watchers: 6
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Unidragger

_Base draggable class_

Used in [Flickity](https://flickity.metafizzy.co) and [Draggabilly](https://draggabilly.desandro.com).

Unidragger handles all the event binding and handling to support a draggable library.

## Features

+ Touch device support: iOS, Android, Microsoft Surface

+ Handles click events in `input` elements 

## Install

npm: `npm install unidragger`

Yarn: `yarn add unidragger`

## Demo code

``` js

// your draggable class

function Dragger( elem ) {

  this.element = elem;

}

// use Unidragger as a mixin

extend( Dragger.prototype, Unidragger.prototype );

Dragger.prototype.create = function() {

  // set drag handles

  this.handles = [ this.element ];

  this.bindHandles();

};

Dragger.prototype.dragStart = function( event, pointer ) {

  console.log('drag start');

};

Dragger.prototype.dragMove = function( event, pointer, moveVector ) {

  var dragX = this.dragStartPoint.x + moveVector.x;

  var dragY = this.dragStartPoint.y + moveVector.y;

  this.element.style.left = dragX + 'px';

  this.element.style.top = dragY + 'px';

};

Dragger.prototype.dragEnd = function( event, pointer ) {

  console.log('drag end');

};

```

---

MIT license

By [Metafizzy 🌈🐻](https://metafizzy.co)