• Stars
    star
    184
  • Rank 209,187 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 11 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package

draggable

High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package.

Demo

http://bcherny.github.io/draggable/demos/basic/

Usage

HTML

<div id="id"></div>

JavaScript

Using browser globals:

var element = document.getElementById('id');
var options = {
  grid: 10,
  onDrag: function(){ ... }
};
new Draggable (element, options);

Using AMD/CommonJS:

var Draggable = require ('Draggable');
var element = document.getElementById('id');
new Draggable (element);

Dependencies

None!

Options

Option Type Default Description
grid Number 0 grid size for snapping on drag
handle Element null the handle of the draggable; if null, the whole element is the handle
filterTarget Function(target) null prevent drag when target passes this test
limit Element, Function(x, y, x0, y0), or Object { x: null, y: null } limit x/y drag bounds
threshold Number 0 threshold before drag begins (in px)
setCursor Boolean (truthy) false change cursor to move?
setPosition Boolean (truthy) true change draggable position to absolute?
smoothDrag Boolean (truthy) true snap to grid only when dropped, not during drag
useGPU Boolean (truthy) true move graphics calculation/composition to the GPU? (modern browsers only, graceful degradation)

Events

Event Arguments
onDrag element, x, y, event
onDragStart element, x, y, event
onDragEnd element, x, y, event

Instance methods

Method Arguments Returns Description
get --- {Object} {x, y} Get the current coordinates
set {Number} x, {Number} y instance Move to the specified coordinates
setOption {String} property, {Mixed} value instance Set an option in the live instance
destroy --- --- Unbind the instance's DOM event listeners

Notes

Options.limit accepts arguments in several forms:

// no limit
limit: null

// limit x, but leave y unbounded
limit: {
  x: [1,10],
  y: null
}

// limit both axes
limit: {
  x: [1,10],
  y: [1,500]
}

// bound x, set y to a constant
limit: {
  x: [1,10],
  y: 5
}

// bound with an element
limit: document.getElementById('id')

// bound with a custom function
limit: function (
  x,  // current X coordinate
  y,  // current Y coordinate
  x0, // original X coordinate (where drag was started)
  y0  // original Y coordinate (where drag was started)
) {

  var radius = 100,
    dx = x - x0,
    dy = y - y0,
    distance = Math.sqrt(dx*dx + dy*dy),

    // only allow dragging within a circle of radius 100
    outOfRange = distance > radius;


  // if our point is outside of the circle, compute the
  // point on the circle's edge closest to our point
  if (outOfRange) {

    x = x0 + radius * (x - x0) / distance;
    y = y0 + radius * (y - y0) / distance;

  }

  return {
    x: x,
    y: y
  };

}

Tested on

  • Chrome 29 on OSX
  • Chrome 28 on Windows
  • Firefox 23 on OSX
  • Firefox 21 on Windows
  • Opera 16 on OSX
  • Safari 6 on OSX
  • Safari 6 on iPhone4/iOS6
  • Safari 6 on iPhone5/iOS6
  • Safari 6 on iPad2/iOS6
  • Safari 6 on iPad3/iOS6
  • Internet Explorer 8-10 on Windows

To do

  • Improve performance on old iOS
  • Unit tests

More Repositories

1

json-schema-to-typescript

Compile JSON Schema to TypeScript type declarations
TypeScript
2,922
star
2

undux

⚡️ Dead simple state for React. Now with Hooks support.
TypeScript
1,493
star
3

frontend-interview-questions

Answers for https://borischerny.com/javascript/%22functional/programming%22/2017/06/09/Frontend-Interview-Questions.html
JavaScript
1,043
star
4

programming-typescript-answers

Official answers for exercises from Orielly's Programming TypeScript
TypeScript
472
star
5

flow-to-typescript

Convert Flow-annotated files to TypeScript
TypeScript
430
star
6

ngimport

Easy to use ES6 imports for $http, $log, and other Angular 1 services
TypeScript
99
star
7

tslint-no-circular-imports

TSLint plugin to detect and warn about circular imports
TypeScript
86
star
8

lazy-arr

Arrays that look just like regular JavaScript arrays, but are computed lazily.
TypeScript
65
star
9

tsoption

Correct, easy to use Option type for TypeScript. 🦄
TypeScript
55
star
10

json-schema-to-typescript-browser

Browser demo for json-schema-to-typescript
JavaScript
36
star
11

format-as-currency

Angular directive to format an input as a currency as the user types
JavaScript
32
star
12

india

INterface Diffing and Inspection Assistant
JavaScript
29
star
13

typed-rx-emitter

Typesafe RxJS-based EventEmitter
TypeScript
27
star
14

typed-trait

A 100% typesafe class trait util for TypeScript
TypeScript
22
star
15

css-to-matrix

A little library for converting compound CSS transforms into their matrix equivalents
JavaScript
21
star
16

penner

A library for Penner's easing equations.
JavaScript
15
star
17

redrock

Typesafe, reactive redux
TypeScript
14
star
18

uxhr

The teeny tiny cross-browser XHR library - just 493 bytes gzipped!
JavaScript
12
star
19

language-types-comparison

hierarchical diagram of various type systems
12
star
20

undux-todomvc

TypeScript
11
star
21

SASS-Base64

An automated SASS base64 inline image generator
Python
10
star
22

transform-to-matrix

A tiny library to get 2/3D matricies from CSS3 transform functions. Fully covered by unit tests, with support for AMD, CommonJS, Node, and browser globals.
JavaScript
10
star
23

better-asciidoctor-vscode

AsciiDoc VSCode plugin with live preview - makes your Asciidoc look like an Orielly book
CSS
8
star
24

angular-sticky-table-header

Sticky headers for tables
CoffeeScript
6
star
25

infinite-scroll

High performance infinite scrolling for AngularJS.
CoffeeScript
6
star
26

contributor.io

Fetch counts of a user's contributions to various platforms (Github, NPM, Gems, CPAN, Nuget, ...)
CoffeeScript
5
star
27

isbn-cover

Get a book cover from a 9, 10, or 13 digit ISBN. Works with AMD, CommonJS, Node, and browser globals.
CoffeeScript
5
star
28

undux.org

Documentation for Undux
TypeScript
4
star
29

angular2react-demos

Example usages for angular2react and react2angular
JavaScript
4
star
30

Talks

Some presentations I made or am working on
JavaScript
4
star
31

angular-butter-scroll

A plug and play angular directive for smooth scrolling that works by disabling pointer events
CoffeeScript
3
star
32

watch-dom

Angular $watch for the DOM
CoffeeScript
3
star
33

microbox

A beautiful, lightweight, cross browser lightbox.js replacement
CSS
3
star
34

promise-seq

lazy-execute promises in sequence
TypeScript
3
star
35

create-typescript-app

🔮 1 command to create a new TypeScript Node app
JavaScript
3
star
36

matrix-utilities

Tiny (607b gzipped), high performance utilities for performing 2/3D matrix calculations. Full unit test coverage, compatible with Node/CommonJS, AMD, and browser globals.
CoffeeScript
3
star
37

-dev-null

JavaScript
3
star
38

fx

The tiny animation library - high performance, works with everthing from iOS to IE6, and dependency free. For applications where you need a lot of animation functionality without a lot of footprint
JavaScript
3
star
39

umodel

Tiny, generic, fully tested model.
CoffeeScript
3
star
40

tuple-map

ES6 Map where keys are 2-tuples
TypeScript
2
star
41

savant

A designer-friendly way to generate icon fonts from a folder of SVG icons
JavaScript
2
star
42

color-dungeon-solver

A solver for the Color Dungeon Puzzle in Zelda: Link's Awakening DX for Gameboy
JavaScript
2
star
43

programmingtypescriptbook.com

HTML
2
star
44

winston-bugsnag

A Bugsnag transport for Winston
TypeScript
2
star
45

content-type-to-ext

Map content-type to file extension (and vice-versa)
TypeScript
2
star
46

tsedit

TypeScript Notebooks
TypeScript
2
star
47

Chart

High performance CSS chart rendering from tables
JavaScript
2
star
48

wordscapes-solver

Solver for Wordscapes game
Haskell
2
star
49

auditable

Auditable data structures for modern browsers
TypeScript
2
star
50

codenam.es

https://codenam.es
JavaScript
1
star
51

undux-fb

Facebook-specific wrapper for Undux
Shell
1
star
52

skymaps

TypeScript
1
star
53

annie

A super tiny library for authoring cross-browser animations
JavaScript
1
star
54

js-math

JavaScript
1
star
55

crdt-demo

TypeScript
1
star
56

tsinit

Zero-config, opinionated generator for TypeScript+TsLint+Ava projects
JavaScript
1
star
57

concat-maps

Efficiently concatenate ES6 Maps
TypeScript
1
star
58

Flashcards

Simple flashcards app
TypeScript
1
star
59

rxjs-observable

Standalone Observable, pulled out of RxJS
TypeScript
1
star
60

node-timezone

Get server timezone
JavaScript
1
star
61

learning-scala-v2

Scala
1
star
62

tassert

High quality runtime assertions for Typescript
JavaScript
1
star
63

CT4S

Category Theory for the Sciences
1
star
64

sha1-from-file

generate a short sha1 hash from a file's contents
TypeScript
1
star
65

angular-search

A lightweight Angular search widget
CoffeeScript
1
star
66

npm-packages

Fetch a user's package count from NPM
CoffeeScript
1
star
67

bcherny.github.io

My blog
SCSS
1
star
68

typed-store

a strongly typed store with lenses and change subscription
JavaScript
1
star
69

bst-next

Find the next node in a Binary Search Tree
Haskell
1
star
70

awesome-guide-to-protractor-testing

some notes and lessons learned writing protractor tests and getting them to run on ci
1
star
71

undux-hot-module-reloading-demo

Hot module reloading demo for Undux
JavaScript
1
star