• Stars
    star
    121
  • Rank 292,355 (Top 6 %)
  • Language
    JavaScript
  • Created over 12 years ago
  • Updated almost 8 years ago

Reviews

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

Repository Details

Make your DOM elements draggable easily

draggable.js Build Status codecov.io Bitdeli Badge

Make your DOM elements draggagle easily

Examples

DOM:

<div id="elementToDrag">
  <div class="handle"></div>
</div>

To make the whole element draggable:

var elementToDrag = document.getElementById('elementToDrag');
draggable(elementToDrag);

To make it draggable only when dragging the handle element:

var elementToDrag = document.getElementById('elementToDrag');
var handle = elementToDrag.getElementsByClassName('handle')[0];
draggable(elementToDrag, handle);

Notes

  • You have to provide the raw element, not the one wrapped by your favorite dom query lib. Using jQuery, for example, you'd need to do something like var elementToDrag = $('#elementToDrag').get(0);
  • If you are using AMD (e.g. require.js) this lib becomes a module. Otherwise it'll create a global draggable.

Browser Compatibility

I've ran the tests in Chrome and Firefox. On travis-ci the tests run in Phantomjs. If you find any incompatibility or want to support other browsers, please do a pull request with the fix! :-)

Development

Prerequisites
phantomjs
mocha npm install mocha

License

This is licensed under the feel-free-to-do-whatever-you-want-to-do license.

More Repositories

1

ooze

🧬 Go Mutation Testing
Go
246
star
2

stripe-angular

Angular directives to deal with Stripe.
JavaScript
112
star
3

angular-flash

Flash messages for Angular.js
JavaScript
99
star
4

lambda

Fun with λ calculus!
JavaScript
89
star
5

keyvent.js

Keyboard events simulator
JavaScript
46
star
6

passport-stub

Passport.js stub for testing.
CoffeeScript
44
star
7

elysia-tailwind

Elysia Tailwind Plugin
TypeScript
32
star
8

Writeboard

Whiteboard for distributed teams
CoffeeScript
31
star
9

elysia-htmx

Elysia HTMX Context
TypeScript
31
star
10

h-factors

Hypermedia Factors
Less
23
star
11

docker-diagrams

An image for https://github.com/mingrammer/diagrams
Python
22
star
12

griffith.cr

Beautiful UI for showing tasks running on the command line.
Crystal
21
star
13

mongoose-friendly

Friendly URLs for your Mongoose models
JavaScript
15
star
14

walter.cr

Keep your crystal clean!
Crystal
14
star
15

spinner-frames.cr

A collection of spinner frames
Crystal
11
star
16

spring-river

Rapids/Rivers/Ponds – https://vimeo.com/79866979
JavaScript
10
star
17

go-extlib

Go Extended Lib
Go
9
star
18

ghooks.gradle

Simple git hooks
Kotlin
9
star
19

docker-semantic-release

An image for https://github.com/semantic-release/semantic-release
Makefile
7
star
20

dotfiles

System Setup
Nix
7
star
21

gmailto

Send quick Gmails from your command line.
JavaScript
7
star
22

ansi-escapes.cr

ANSI escape codes for manipulating the terminal.
Crystal
6
star
23

elysia-requestid

Elysia Request ID Plugin
TypeScript
6
star
24

cloudbees-node

Quick and dirty bash script to add node.js and npm to your cloudbees Jenkins project
Shell
6
star
25

loading.js

Simple messages to your website
CoffeeScript
4
star
26

sourcing

🐾 Simple Event Sourcing
JavaScript
4
star
27

elysia-error-handler

Elysia Error Handler
TypeScript
4
star
28

mongod-run

Runs mongod. Useful when testing APIs.
JavaScript
3
star
29

ghooks.cr

simple git hooks for crystal
Crystal
3
star
30

jekyll.workflow

master ⇝ gh-pages
CSS
3
star
31

docker-commitlint

An image for https://github.com/marionebl/commitlint
Makefile
2
star
32

freenodejs

Search on #Node.js at freenode.net - through nodejs.debuggable.com
JavaScript
2
star
33

docker-svgbob

Docker image for https://github.com/ivanceras/svgbob
Makefile
2
star
34

gtramontina.github.io

Personal Website
HTML
1
star
35

npmw

NPM .bin wrapper
JavaScript
1
star
36

cssee

See your DOM elements with CSSee!
JavaScript
1
star
37

docker-live-server

An image for https://github.com/tapio/live-server
Makefile
1
star