{"id":28708357,"url":"https://github.com/bpierre/minidrag","last_synced_at":"2026-04-02T02:38:21.587Z","repository":{"id":18538755,"uuid":"21739633","full_name":"bpierre/minidrag","owner":"bpierre","description":"A simple solution to make an HTML element draggable (no dependencies).","archived":false,"fork":false,"pushed_at":"2019-02-13T17:16:27.000Z","size":22,"stargazers_count":10,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-22T02:04:33.184Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/bpierre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-11T14:44:28.000Z","updated_at":"2019-02-13T17:16:29.000Z","dependencies_parsed_at":"2022-07-10T07:30:16.999Z","dependency_job_id":null,"html_url":"https://github.com/bpierre/minidrag","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/bpierre/minidrag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fminidrag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fminidrag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fminidrag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fminidrag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpierre","download_url":"https://codeload.github.com/bpierre/minidrag/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpierre%2Fminidrag/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267325122,"owners_count":24069403,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-06-14T18:11:10.302Z","updated_at":"2026-04-02T02:38:21.564Z","avatar_url":"https://github.com/bpierre.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# minidrag [![Build Status](https://travis-ci.org/bpierre/minidrag.png?branch=master)](https://travis-ci.org/bpierre/minidrag)\n\nA simple solution to make an HTML element draggable. There is no dependencies.\n\n\u003cp align=\"center\"\u003e\u003cimg width=\"255\" height=\"153\" alt=\"minidrag illustration\" src=\"https://scri.ch/nd1-2x.png\"\u003e\u003c/p\u003e\n\n## Usage\n\n```js\nminidrag(element, options);\n```\n\nWhere `element` is the `HTMLElement` that will be draggable, and `options` is an object containing the options.\n\n## Example\n\nA simple example that just makes the handle draggable:\n\n```html\n\u003cdiv id=\"container\"\u003e\n  \u003cdiv id=\"handle\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nvar minidrag = require('minidrag');\n\nvar handle = document.querySelector('#handle');\nvar container = document.querySelector('#container');\n\nminidrag(handle, { constraint: container });\n```\n\nA more complex example with two handles that won’t overlap themselves:\n\n```html\n\u003cdiv id=\"container\"\u003e\n  \u003cdiv id=\"handle-1\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"handle-2\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nvar minidrag = require('minidrag');\n\nvar handle1 = container.querySelector('#handle-1');\nvar handle2 = container.querySelector('#handle-2');\nvar container = document.querySelector('#container');\n\n// starting x values\nvar handle1X = 0;\nvar handle2X = 560;\n\nvar handleWidth = 40;\nhandle2.style.left = handle2X + 'px';\n\nminidrag(handle1, {\n  constraint: container,\n  move: function(position) { handle1X = position.left },\n\n  // constraintFn: this function can change the position values\n  // before they are applied to the dragged element. It doesn’t replace\n  // the `constraint` option: both are applied.\n  constraintFn: function(position) {\n    if (position.left + handleWidth \u003e handle2X) {\n      position.left = handle2X - handleWidth;\n    }\n    return position;\n  }\n});\n\nminidrag(handle2, {\n  constraint: container,\n  move: function(position) { handle2X = position.left },\n  constraintFn: function(position) {\n    if (position.left \u003c handle1X + handleWidth) {\n      position.left = handle1X + handleWidth;\n    }\n    return position;\n  }\n});\n```\n\n\n## Installation\n\n```shell\n$ npm install minidrag\n```\n\n## Options\n\n### `constraint`\n\nThe constraint (limits) of the dragged Element. Possible values: `null` (no\nconstraints), `'x'`, `'y'` (horizontal / vertical axis), or an `HTMLElement`\n(stay in the limits of the Element).\n\n### `constraintFn`\n\nIn addition to the `constraint` parameter, this function can change the position of the dragged Element, adding another limitation if needed (see the second example above). It must return the new position.\n\nThis function takes one paramater, which is the current `position` (`{ top: Number, left: Number }`) of the handle, after the `constraint` has been applied to it.\n\n### `move`\n\nA function that will be called on every move event while the Element is dragged.\n\nParameters: `position` (`{ top: Number, left: Number }`), `element` (the dragged Element).\n\n### `drop`\n\nA function that will be called when the Element is dropped.\n\nParameters: `position` (`{ top: Number, left: Number }`), `element` (the dragged Element).\n\n## Browser compatibility\n\nIE9+ and modern browsers.\n\n[![Browser support](https://ci.testling.com/bpierre/minidrag.png)](https://ci.testling.com/bpierre/minidrag)\n\n## License\n\n[MIT](LICENSE)\n\n## Special thanks\n\nIllustration made by [Raphaël Bastide](http://raphaelbastide.com/) with [scri.ch](http://scri.ch/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Fminidrag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpierre%2Fminidrag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpierre%2Fminidrag/lists"}