{"id":13452195,"url":"https://github.com/bcherny/draggable","last_synced_at":"2025-04-04T17:10:10.084Z","repository":{"id":10399457,"uuid":"12552157","full_name":"bcherny/draggable","owner":"bcherny","description":"High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package","archived":false,"fork":false,"pushed_at":"2022-12-08T10:47:06.000Z","size":80,"stargazers_count":194,"open_issues_count":8,"forks_count":53,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-24T09:43:58.674Z","etag":null,"topics":["drag-and-drop","microlib","vanilla-javascript"],"latest_commit_sha":null,"homepage":"http://bcherny.github.io/draggable/demos/basic/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bcherny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-03T01:13:13.000Z","updated_at":"2025-01-26T09:59:43.000Z","dependencies_parsed_at":"2022-07-30T17:48:08.499Z","dependency_job_id":null,"html_url":"https://github.com/bcherny/draggable","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcherny%2Fdraggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcherny%2Fdraggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcherny%2Fdraggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcherny%2Fdraggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bcherny","download_url":"https://codeload.github.com/bcherny/draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","microlib","vanilla-javascript"],"created_at":"2024-07-31T07:01:16.648Z","updated_at":"2025-04-04T17:10:10.066Z","avatar_url":"https://github.com/bcherny.png","language":"JavaScript","readme":"# draggable\n\nHigh performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package.\n\n## Demo\n\nhttp://bcherny.github.io/draggable/demos/basic/\n\n## Usage\n\n**HTML**\n```html\n\u003cdiv id=\"id\"\u003e\u003c/div\u003e\n```\n\n**JavaScript**\n\n*Using browser globals:*\n```js\nvar element = document.getElementById('id');\nvar options = {\n  grid: 10,\n  onDrag: function(){ ... }\n};\nnew Draggable (element, options);\n```\n\n*Using AMD/CommonJS:*\n```js\nvar Draggable = require ('Draggable');\nvar element = document.getElementById('id');\nnew Draggable (element);\n```\n\n## Dependencies\n\nNone!\n\n## Options\n\n| Option            | Type                | Default | Description                                                           |\n|-------------------|---------------------|---------|-----------------------------------------------------------------------|\n| **grid**          | `Number`            | `0`     | grid size for snapping on drag                                        |\n| **handle**        | `Element`           | `null`  | the handle of the draggable; if null, the whole element is the handle |\n| **filterTarget**  | `Function(target)`  | `null`  | prevent drag when target passes this test                             |\n| **limit**         | `Element`, `Function(x, y, x0, y0)`, or `Object` | `{ x: null, y: null }` | limit x/y drag bounds     |\n| **threshold**     | `Number`            | `0`     | threshold before drag begins (in px)                                  |\n| **setCursor**     | `Boolean` (truthy)  | `false` | change cursor to `move`?                                              |\n| **setPosition**   | `Boolean` (truthy)  | `true`  | change draggable position to `absolute`?                              |\n| **smoothDrag**    | `Boolean` (truthy)  | `true`  | snap to grid only when dropped, not during drag                       |\n| **useGPU**        | `Boolean` (truthy)  | `true`  | move graphics calculation/composition to the GPU? (modern browsers only, graceful degradation) |\n\n## Events\n\n| Event           | Arguments               |\n|-----------------|-------------------------|\n| **onDrag**      | `element, x, y, event`  |\n| **onDragStart** | `element, x, y, event`  |\n| **onDragEnd**   | `element, x, y, event`  |\n\n## Instance methods\n\n| Method        | Arguments                               | Returns               | Description\n|---------------|-----------------------------------------|-----------------------|-------------------------------------------|\n| **get**       | ---                                     | `{Object}` {x, y}     | Get the current coordinates               |\n| **set**       | `{Number}` x, `{Number}` y              | instance              | Move to the specified coordinates         |\n| **setOption** | `{String}` property, `{Mixed}` value    | instance              | Set an option in the live instance        |\n| **destroy**   | ---                                     | ---                   | Unbind the instance's DOM event listeners |\n\n## Notes\n\nOptions.limit accepts arguments in several forms:\n\n```js\n// no limit\nlimit: null\n\n// limit x, but leave y unbounded\nlimit: {\n  x: [1,10],\n  y: null\n}\n\n// limit both axes\nlimit: {\n  x: [1,10],\n  y: [1,500]\n}\n\n// bound x, set y to a constant\nlimit: {\n  x: [1,10],\n  y: 5\n}\n\n// bound with an element\nlimit: document.getElementById('id')\n\n// bound with a custom function\nlimit: function (\n  x,  // current X coordinate\n  y,  // current Y coordinate\n  x0, // original X coordinate (where drag was started)\n  y0  // original Y coordinate (where drag was started)\n) {\n\n  var radius = 100,\n    dx = x - x0,\n    dy = y - y0,\n    distance = Math.sqrt(dx*dx + dy*dy),\n\n    // only allow dragging within a circle of radius 100\n    outOfRange = distance \u003e radius;\n\n\n  // if our point is outside of the circle, compute the\n  // point on the circle's edge closest to our point\n  if (outOfRange) {\n\n    x = x0 + radius * (x - x0) / distance;\n    y = y0 + radius * (y - y0) / distance;\n\n  }\n\n  return {\n    x: x,\n    y: y\n  };\n\n}\n```\n\n## Tested on\n\n- Chrome 29 on OSX\n- Chrome 28 on Windows\n- Firefox 23 on OSX\n- Firefox 21 on Windows\n- Opera 16 on OSX\n- Safari 6 on OSX\n- Safari 6 on iPhone4/iOS6\n- Safari 6 on iPhone5/iOS6\n- Safari 6 on iPad2/iOS6\n- Safari 6 on iPad3/iOS6\n- Internet Explorer 8-10 on Windows\n\n## To do\n\n- Improve performance on old iOS\n- Unit tests\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcherny%2Fdraggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbcherny%2Fdraggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcherny%2Fdraggable/lists"}