bcherny / Draggable
Licence: mit
High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package
Stars: ✭ 160
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Draggable
Html5sortable
VanillaJS sortable lists and grids using native HTML5 drag and drop API.
Stars: ✭ 1,384 (+765%)
Mutual labels: drag-and-drop, vanilla-javascript
Ipfs Dropzone
Dropzone.js that uploads to IPFS instead of to an URL
Stars: ✭ 151 (-5.62%)
Mutual labels: drag-and-drop
The Grid
Grid layout custom element with drag and drop capabilities
Stars: ✭ 122 (-23.75%)
Mutual labels: drag-and-drop
Upload
The file upload extension with insane intelligence for your Flarum forum.
Stars: ✭ 131 (-18.12%)
Mutual labels: drag-and-drop
React Dragline
🐼Guide lines and magnetic adsorption to better align draggable elements in React.
Stars: ✭ 134 (-16.25%)
Mutual labels: drag-and-drop
React Kanban Dnd
📋 Open source kanban board built with React
Stars: ✭ 121 (-24.37%)
Mutual labels: drag-and-drop
Ngx Dynamic Dashboard Framework
This is a JSON driven angular x based dashboard framework that is inspired by JIRA's dashboard implementation and https://github.com/raulgomis/angular-dashboard-framework
Stars: ✭ 160 (+0%)
Mutual labels: drag-and-drop
Angular Skyhook
An implementation of react-dnd for Angular.
Stars: ✭ 146 (-8.75%)
Mutual labels: drag-and-drop
Dnd Multi Backend
Multi Backend system for DnD Core & more
Stars: ✭ 129 (-19.37%)
Mutual labels: drag-and-drop
Rails sortable
Easy drag & drop sorting with persisting the arranged order for rails
Stars: ✭ 127 (-20.62%)
Mutual labels: drag-and-drop
Filepond
🌊 A flexible and fun JavaScript file upload library
Stars: ✭ 11,869 (+7318.13%)
Mutual labels: drag-and-drop
React File Drop
React component for Gmail or Facebook -like drag and drop file uploader
Stars: ✭ 123 (-23.12%)
Mutual labels: drag-and-drop
Sharer.js
🔛 🔖 Create your own social share buttons. No jquery.
Stars: ✭ 1,624 (+915%)
Mutual labels: vanilla-javascript
Dnd Kit
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Stars: ✭ 3,456 (+2060%)
Mutual labels: drag-and-drop
Vidar
An extendable video-editing framework for the browser and Node
Stars: ✭ 132 (-17.5%)
Mutual labels: vanilla-javascript
Datepickk
Simple, beautiful and powerful datepicker!
Stars: ✭ 160 (+0%)
Mutual labels: vanilla-javascript
Lxreorderablecollectionviewflowlayout
Extends `UICollectionViewFlowLayout` to support reordering of cells. Similar to long press and pan on books in iBook.
Stars: ✭ 1,831 (+1044.38%)
Mutual labels: drag-and-drop
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].