{"id":25188461,"url":"https://github.com/marcospont/agnostic-draggable","last_synced_at":"2025-04-10T08:58:33.363Z","repository":{"id":49991099,"uuid":"311438832","full_name":"marcospont/agnostic-draggable","owner":"marcospont","description":"An agnostic set of libraries implementing draggable, droppable, sortable and resizable behaviors inspired by the jQuery UI implementation","archived":false,"fork":false,"pushed_at":"2024-09-17T16:16:52.000Z","size":415,"stargazers_count":40,"open_issues_count":3,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-22T20:45:24.510Z","etag":null,"topics":["drag-and-drop","draggable","droppable","jquery-ui","resizable","sortable"],"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/marcospont.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-09T19:07:40.000Z","updated_at":"2025-03-20T01:16:17.000Z","dependencies_parsed_at":"2024-06-18T22:51:49.027Z","dependency_job_id":"51e802b9-3fd0-4da0-a158-c8c100551d86","html_url":"https://github.com/marcospont/agnostic-draggable","commit_stats":{"total_commits":80,"total_committers":2,"mean_commits":40.0,"dds":0.07499999999999996,"last_synced_commit":"b1b144a67116195b3e4744718e7ef638ce48f8c6"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcospont%2Fagnostic-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcospont%2Fagnostic-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcospont%2Fagnostic-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcospont%2Fagnostic-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcospont","download_url":"https://codeload.github.com/marcospont/agnostic-draggable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248190452,"owners_count":21062279,"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","draggable","droppable","jquery-ui","resizable","sortable"],"created_at":"2025-02-09T20:28:45.446Z","updated_at":"2025-04-10T08:58:33.344Z","avatar_url":"https://github.com/marcospont.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# agnostic-draggable\n\nMost of UI developers that worked with web apps from 2008 to 2014 certainly used or at least searched for a library implementing Drag \u0026 Drop support. From all the libraries that were available within that period, [jQuery UI](https://jqueryui.com/) was certainly one of the best choices.\n\nYears later, most of the web applications are tied to frameworks or rendering libraries like Angular, Vue and React and keeping jQuery and jQuery UI as a dependency to these projects can be a headache. In fact, moving away from jQuery is something that many development teams have experienced after these frameworks came into the scene.\n\nHowever, finding a good replacement for what jQuery UI used to offer in terms of drag/drop capabilities is not easy. If you are looking for a solution that is tied to your framework/library of choice, there are plenty of options for you. But if you are looking for a VanillaJS based and agnostic implementation of drag \u0026 drop, you can find yourself browsing for a couple of hours finding just a few consistent options.\n\n[Shopify/Draggable](https://github.com/Shopify/draggable) is a nice alternative, although it has some crucial behaviour changes compared with what jQuery UI used to offer. [SortableJS](https://github.com/SortableJS/sortablejs) offers something similar to what the jQuery UI`s Sortable widget offers. By looking at the examples, it seems to be even possible to mimic the behavior of the \"connectToSortable\" option of jQuery UI's Draggable widget, that allows an item to be dragged onto a list that has sort capabilities. Native Drag \u0026 Drop implementation from the browser? Forget it until it can support dragging an element using a cloned helper node. Furthermore, the API offered by the native implementation really sucks.\n\nThe solution? Translate the implementation of the Draggable, Droppable and Sortable widgets from jQuery UI into an agnostic, VanillaJS and ES6+ based library. Most of the options and features found in the original implementation by jQuery UI's team are here. The ones that were not translated/rewritten were just not part of the subset of features considered to be the most important ones. This doesn't mean that contributors cannot help finishing the task of bringing them in.\n\n## Install\n\nUsing NPM, type in the following command to install `agnostic-draggable`:\n\n```\nnpm i agnostic-draggable --save\n```\n\n## Usage and Documentation\n\n## Draggable\n\nEnables dragging functionality on any DOM element. Move the Draggable element by clicking on it and dragging it anywhere within the viewport.\n\nElements modified or created will use the same CSS classes inherited from jQuery UI's implementation:\n\n-   ui-draggable: the element being dragged\n-   ui-draggable-handle: the handle of the draggable element. By default, each draggable is also a handle\n-   ui-draggable-helper: the dragging helper\n\n### Options\n\n|                     Name                      |            Type             |                  Default                  |                               Description                                |\n| :-------------------------------------------: | :-------------------------: | :---------------------------------------: | :----------------------------------------------------------------------: |\n|          **[`appendTo`](#appendto)**          |         `{String}`          |                 `parent`                  |                   Where to append the dragging helper.                   |\n|              **[`axis`](#axis)**              |         `{String}`          |                   null                    |                 Constraint dragging movement to an axis.                 |\n| **[`connectToSortable`](#connecttosortable)** |         `{String}`          |                   null                    | Allows the Draggable to be dropped onto the specified Sortable elements. |\n|       **[`containment`](#containment)**       |      `{String,Array}`       |                   null                    |          Constraints dragging movement to an element or region.          |\n|            **[`cursor`](#cursor)**            |         `{String}`          |                   null                    |             Allows changing the cursor style while dragging.             |\n|          **[`disabled`](#disabled)**          |         `{Boolean}`         |                  `false`                  |                 Allows disabling the dragging behaviour.                 |\n|          **[`distance`](#distance)**          |         `{Number}`          |                    `0`                    |              Distance in pixels before dragging can start.               |\n|              **[`grid`](#grid)**              |          `{Array}`          |                   null                    |        Snaps the dragging helper to a grid, every x and y pixels.        |\n|            **[`handle`](#handle)**            |         `{String}`          |                   null                    |           Dragging only starts if click matches this selector.           |\n|            **[`helper`](#helper)**            |     `{String,Function}`     |                `original`                 |                   Configures the dragging helper node.                   |\n|           **[`opacity`](#opacity)**           |         `{Number}`          |                   null                    |               Allows changing the opacity while dragging.                |\n|            **[`revert`](#revert)**            | `{Boolean,String,Function}` |                  `false`                  |       Whether the element should be reverted after dragging stops.       |\n|    **[`revertDuration`](#revertduration)**    |         `{Number}`          |                   `200`                   |            Duration in milliseconds of the revert animation.             |\n|             **[`scope`](#scope)**             |         `{String}`          |                 `default`                 |    Used to group sets of Draggable, Droppable and Sortable elements.     |\n|            **[`scroll`](#scroll)**            |         `{Boolean}`         |                  `true`                   |               Allows auto-scrolling within the container.                |\n| **[`scrollSensitivity`](#scrollsensitivity)** |         `{Number}`          |                   `20`                    |                      Scroll sensitivity in pixels.                       |\n|       **[`scrollSpeed`](#scrollspeed)**       |         `{Number}`          |                   `10`                    |                         Scroll speed in pixels.                          |\n|              **[`skip`](#skip)**              |         `{String}`          | `input, textarea, button, select, option` |           Prevents dragging when this CSS selector is matched.           |\n|             **[`stack`](#stack)**             |         `{String}`          |                   null                    | Manages the z-indexes of Draggable elements matching this CSS selector.  |\n|            **[`zIndex`](#zindex)**            |         `{Number}`          |                   null                    |               Allows changing the z-index while dragging.                |\n\n### `appendTo`\n\n-   **Type:** `String`\n-   **Default:** `parent`\n-   **Accepted values:** `parent` or a CSS selector\n-   **Modifiable at runtime:** yes\n\nWhich element the dragging helper should be appended to while dragging.\nOnly works when the [`helper`](#helper) option is set to not use the original element.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tappendTo: 'body'\n});\n```\n\n### `axis`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** `x` or `y`\n-   **Modifiable at runtime:** yes\n\nConstrains dragging to either the horizontal (x) or vertical (y) axis.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\taxis: 'x'\n});\n```\n\n### `connectToSortable`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** a CSS selector\n-   **Modifiable at runtime:** yes\n\nAllows the Draggable to be dropped onto the specified Sortables. If this option is used, a Draggable can be dropped onto a Sortable list and then becomes part of it. Note: The `helper` option must be set to `clone` in order to work flawlessly.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Draggable, Sortable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tconnectToSortable: '#sort1'\n});\nnew Sortable(document.querySelector('#sort1'));\n```\n\n### `containment`\n\n-   **Type:** `String,Array`\n-   **Default:** null\n-   **Accepted values:** `parent`, `document`, `window`, a CSS selector or an array of 4 numbers in the form `[x1, y1, x2, y2]`\n-   **Modifiable at runtime:** yes\n\nConstrains dragging to within the bounds of the specified element or region.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n\u003cdiv id=\"drag2\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tcontainment: 'window'\n});\nnew Draggable(document.querySelector('#drag2'), {\n\tcontainment: [100, 100, 800, 800]\n});\n```\n\n### `cursor`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** any values accepted by the `cursor` CSS property\n-   **Modifiable at runtime:** yes\n\nAllows changing the cursor style while dragging the element.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tcursor: 'move'\n});\n```\n\n### `disabled`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nDetermines whether the Draggable instance should be disabled.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tdisabled: true\n});\n```\n\n### `distance`\n\n-   **Type:** `Number`\n-   **Default:** `0`\n-   **Modifiable at runtime:** yes\n\nDistance in pixels that the mouse should move before the dragging should start. Prevents unwanted drags when the Draggable element is clicked.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tdistance: 10\n});\n```\n\n### `grid`\n\n-   **Type:** `Array`\n-   **Default:** null\n-   **Accepted values:** an array of 2 numbers in the form `[x, y]`\n-   **Modifiable at runtime:** yes\n\nSnaps the dragging helper to a grid, every x and y pixels.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tgrid: [10, 10]\n});\n```\n\n### `handle`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** a CSS selector\n-   **Modifiable at runtime:** no\n\nIf specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). Only elements that descend from the Draggable element are permitted.\n\n```html\n\u003cdiv id=\"drag1\"\u003e\n\t\u003cspan class=\"handle\"\u003eDrag Me\u003c/span\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\thandle: '.handle'\n});\n```\n\n### `helper`\n\n-   **Type:** `String,Function`\n-   **Default:** `original`\n-   **Accepted values:** `original`, `clone` or a function\n-   **Modifiable at runtime:** yes\n\nAllows for a helper element to be used for dragging display.\nIf set to `clone`, then the element will be cloned and the clone will be dragged.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\thelper: 'clone'\n});\n```\n\n### `opacity`\n\n-   **Type:** `Number`\n-   **Default:** null\n-   **Modifiable at runtime:** yes\n\nAllows changing the opacity of the element while being dragged.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\topacity: 0.5\n});\n```\n\n### `revert`\n\n-   **Type:** `Boolean,String,Function`\n-   **Default:** `false`\n-   **Accepted values:** `invalid`, `valid`, `true`, `false` or a function\n-   **Modifiable at runtime:** yes\n\nWhether the element should revert to its start position when dragging stops.\nIf set to `true`, the element will always revert.\nIf set to `invalid` or `valid` it will respectively revert if dropped on a Droppable or not.\nIf it's a function, it must return `true` to indicate that the element should revert.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\trevert: 'invalid'\n});\n```\n\n### `revertDuration`\n\n-   **Type:** `Number`\n-   **Default:** `200`\n-   **Modifiable at runtime:** yes\n\nUses an animation with this specific duration in milliseconds when reverting the element.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\trevert: 'invalid',\n\trevertDuration: 500\n});\n```\n\n### `scope`\n\n-   **Type:** `String`\n-   **Default:** `default`\n-   **Modifiable at runtime:** yes\n\nUsed to group sets of Draggable, Droppable and Sortable elements, in addition to Droppable's [`accept`](#accept) option. A Draggable with the same scope value as a Droppable will be accepted by it.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tscope: 'my-scope'\n});\n```\n\n### `scroll`\n\n-   **Type:** `Boolean`\n-   **Default:** `true`\n-   **Modifiable at runtime:** yes\n\nIf this option is set to `true`, the container of the element will auto-scroll if needed.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tscroll: true\n});\n```\n\n### `scrollSensitivity`\n\n-   **Type:** `Number`\n-   **Default:** `20`\n-   **Modifiable at runtime:** yes\n\nDetermines how close to the edge of the viewport the auto-scroll should happen. Distance is relative to the mouse pointer, not to the dragging element.\n\n\u003e This option is ignored if [`scroll`](#scroll) is set to `false`.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tscroll: true,\n\tscrollSensitivity: 50\n});\n```\n\n### `scrollSpeed`\n\n-   **Type:** `Number`\n-   **Default:** `10`\n-   **Modifiable at runtime:** yes\n\nThe speed in pixels at which the container should auto-scroll when the distance in [`scrollSensitivity`](#scrollsensitivity) is met.\n\n\u003e This option is ignored if [`scroll`](#scroll) is set to `false`.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tscroll: true,\n\tscrollSpeed: 20\n});\n```\n\n### `skip`\n\n-   **Type:** `String`\n-   **Default:** `input, textarea, button, select, option`\n-   **Accepted values:** a CSS selector\n-   **Modifiable at runtime:** yes\n\nPrevents dragging if the clicked element matches the given CSS selector.\n\n```html\n\u003cdiv id=\"drag1\"\u003e\n\t\u003cspan class=\"skip\"\u003eDon't Drag Me\u003c/span\u003e\n\t\u003cspan\u003eDrag Me\u003c/span\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tskip: '.skip'\n});\n```\n\n### `stack`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** a CSS selector\n-   **Modifiable at runtime:** yes\n\nManages the z-indexes of Draggable elements matching the given CSS selector.\nBrings the currently dragged element to the front compared with other members of the stack.\n\n```html\n\u003cdiv id=\"drag1\" class=\"draggable\"\u003eDrag Me\u003c/div\u003e\n\u003cdiv id=\"drag2\" class=\"draggable\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tstack: '.draggable'\n});\nnew Draggable(document.querySelector('#drag2'), {\n\tstack: '.draggable'\n});\n```\n\n### `zIndex`\n\n-   **Type:** `Number`\n-   **Default:** null\n-   **Modifiable at runtime:** yes\n\nAllows to change the z-index of the element when being dragged.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tzIndex: 1000\n});\n```\n\n### Events\n\n|          Name           |                                     Description                                     |\n| :---------------------: | :---------------------------------------------------------------------------------: |\n|  **`draggable:init`**   |                      Called when the Draggable is initialized.                      |\n|    **`drag:start`**     |             Called when the drag operation is started. Can be canceled.             |\n|     **`drag:move`**     |                 Called while dragging the element. Can be canceled.                 |\n|     **`drag:stop`**     | Called when the drag operation stops. Can be canceled, preventing an unwanted drop. |\n| **`draggable:destroy`** |                       Called when the Draggable is destroyed.                       |\n\n### Event Arguments\n\n### `draggable:init`\n\n-   **draggable:** The draggable being initialized\n\n### `drag:start`\n\n-   **source:** The element being dragged\n-   **helper:** The helper element\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n\n### `drag:move`\n\n-   **source:** The element being dragged\n-   **helper:** The helper element\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n-   **position:** The current mouse position\n\n### `drag:stop`\n\n-   **source:** The element being dragged\n-   **helper:** The helper element\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n-   **droppable:** The droppable where the element was dropped\n\n### `draggable:destroy`\n\n-   **draggable** The draggable being destroyed\n\n### Cancelling an event\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n```\n\n```js\nimport { Draggable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), null, {\n\t'drag:start': function (event) {\n\t\tevent.cancel();\n\t}\n});\n```\n\n---\n\n## Droppable\n\nTransforms elements into droppables or drop zones. This means that elements controlled by a [`Draggable`](#draggable) can be dropped into a Droppable if accepted by them.\n\nElements modified or created will use the same CSS classes inherited from jQuery UI's implementation:\n\n-   ui-droppable: the droppable element\n-   ui-droppable-active: identifies an active droppable element\n-   ui-droppable-hover: used when the droppable has a draggable intersecting with it\n\n### Options\n\n|             Name              |        Type         |   Default   |                            Description                            |\n| :---------------------------: | :-----------------: | :---------: | :---------------------------------------------------------------: |\n|    **[`accept`](#accept)**    | `{String,Function}` |     `*`     |          Controls which Draggable elements are accepted.          |\n| **[`disabled`](#disabled-1)** |     `{Boolean}`     |    null     |             Allows disabling the Droppable behaviour.             |\n|    **[`greedy`](#greedy)**    |     `{Boolean}`     |   `false`   |       How to handle dropping on nested Droppable elements.        |\n|    **[`scope`](#scope-1)**    |     `{String}`      |  `default`  | Used to group sets of Draggable, Droppable and Sortable elements. |\n| **[`tolerance`](#tolerance)** |     `{String}`      | `intersect` |       Intersection mode between Draggables and Droppables.        |\n\n### `accept`\n\n-   **Type:** `String,Function`\n-   **Default:** `*`\n-   **Accepted values:** a CSS selector or a function\n-   **Modifiable at runtime:** yes\n\nControls which Draggable elements can be accepted by this Droppable.\nIt can be a CSS selector that needs to match the accepted Draggables or a function that receives each dragging element and returns true if the element is accepted.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n\u003cdiv id=\"drop1\"\u003eDrop Here\u003c/div\u003e\n```\n\n```js\nimport { Draggable, Droppable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'));\nnew Droppable(document.querySelector('#drop1'), {\n\taccept: '#drag1'\n});\n```\n\n### `disabled`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nAllows disabling the Droppable if set to `true`.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n\u003cdiv id=\"drop1\"\u003eDrop Here\u003c/div\u003e\n```\n\n```js\nimport { Draggable, Droppable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'));\nnew Droppable(document.querySelector('#drop1'), {\n\tdisabled: true\n});\n```\n\n### `greedy`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nBy default, when an element is dropped on nested Droppables, each Droppable will receive the element. However, by setting this option to `true` on a child Droppable, any parent Droppables won't receive the element.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n\u003cdiv id=\"drop1\"\u003e\n\t\u003cdiv\u003eDrop Here\u003c/div\u003e\n\t\u003cdiv id=\"drop2\"\u003eOr Drop Here\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Draggable, Droppable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'));\nnew Droppable(document.querySelector('#drop1'), {\n\taccept: '#drag1'\n});\nnew Droppable(document.querySelector('#drop2'), {\n\taccept: '#drag1',\n\tgreedy: true\n});\n```\n\n### `scope`\n\n-   **Type:** `String`\n-   **Default:** `default`\n-   **Modifiable at runtime:** yes\n\nUsed to group sets of Draggable, Droppable and Sortable elements, in addition to the [`accept`](#accept) option. A Droppable will only accept a Draggable of the same scope.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n\u003cdiv id=\"drop1\"\u003eDrop Here\u003c/div\u003e\n```\n\n```js\nimport { Draggable, Droppable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'), {\n\tscope: 'my-scope'\n});\nnew Droppable(document.querySelector('#drop1'), {\n\tscope: 'my-scope'\n});\n```\n\n### `tolerance`\n\n-   **Type:** `String`\n-   **Default:** `intersect`\n-   **Accepted values:** `fit`, `intersect`, `pointer` or `touch`\n-   **Modifiable at runtime:** yes\n\nSpecifies which mode to use for testing whether a Draggable is hovering over a Droppable.\nThe `fit` option requires the dragging element to overlap the droppable area entirely.\nThe `intersect` option requires the dragging element to overlap the droppable area at 50% in both directions.\nThe `pointer` requires the mouse pointer to overlap the droppable area.\nThe `touch` requires the dragging element to overlap the droppable area in any amount or direction.\n\n```html\n\u003cdiv id=\"drag1\"\u003eDrag Me\u003c/div\u003e\n\u003cdiv id=\"drop1\"\u003eDrop Here\u003c/div\u003e\n```\n\n```js\nimport { Draggable, Droppable } from 'agnostic-draggable';\n\nnew Draggable(document.querySelector('#drag1'));\nnew Droppable(document.querySelector('#drop1'), {\n\tdisabled: true\n});\n```\n\n### Events\n\n|            Name            |                                  Description                                   |\n| :------------------------: | :----------------------------------------------------------------------------: |\n|    **`droppable:init`**    |                   Called when the Droppable is initialized.                    |\n|  **`droppable:activate`**  | Called when drag starts on a Draggable or Sortable accepted by the Droppable.  |\n|    **`droppable:over`**    |    Called when a Draggable or Sortable item intersects with the Droppable.     |\n|    **`droppable:drop`**    |    Called when a Draggable or Sortable item is dropped into the Droppable.     |\n|    **`droppable:out`**     | Called when a Draggable or Sortable item is dragged out of the Droppable area. |\n| **`droppable:deactivate`** |  Called when drag stops on a Draggable or Sortable accepted by the Droppable.  |\n|  **`draggable:destroy`**   |                    Called when the Droppable is destroyed.                     |\n\n### Event Arguments\n\n### `droppable:init`\n\n-   **droppable:** The droppable being initialized\n\n### `droppable:activate`\n\n-   **droppable:** The droppable being activated\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the activation\n\n### `droppable:over`\n\n-   **droppable:** The droppable being hovered over\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the event\n\n### `droppable:drop`\n\n-   **droppable:** The droppable where the element is being dropped\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the event\n\n### `droppable:out`\n\n-   **droppable:** The droppable being hovered out\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the event\n\n### `droppable:deactivate`\n\n-   **droppable:** The droppable being deactivated\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the activation\n\n### `droppable:destroy`\n\n-   **droppable:** The droppable being destroyed\n\n---\n\n## Sortable\n\nTransforms elements that contains multiple child nodes in a way that these child nodes can be sorted by using the mouse.\n\nElements modified or created will use the same CSS classes inherited from jQuery UI's implementation:\n\n-   ui-sortable: the element containing the sortable elements\n-   ui-sortable-handle: the handle of each sortable item. By default, each sortable item is also a handle\n-   ui-sortable-helper: the element shown when dragging a sortable item\n-   ui-sortable-placeholder: the element used to show the future position of the item being dragged\n\n\u003e In order to use this component to sort table rows, the element passed should be the `tbody`, not the `table`.\n\n### Options\n\n|                        Name                         |            Type             |                  Default                  |                             Description                             |\n| :-------------------------------------------------: | :-------------------------: | :---------------------------------------: | :-----------------------------------------------------------------: |\n|            **[`appendTo`](#appendto-1)**            |         `{String}`          |                    `*`                    |                 Where to append the sorting helper.                 |\n|                **[`axis`](#axis-1)**                |         `{String}`          |                   null                    |               Constraint sorting movement to an axis.               |\n|          **[`connectWith`](#connectwith)**          |         `{String}`          |                   null                    |           Allows to connect to other Sortable instances.            |\n|         **[`containment`](#containment-1)**         |      `{String,Array}`       |                   null                    |        Constraints sorting movement to an element or region.        |\n|              **[`cursor`](#cursor-1)**              |         `{String}`          |                   null                    |                 Style for the cursor while sorting.                 |\n|            **[`disabled`](#disabled-2)**            |         `{Boolean}`         |                  `false`                  |               Allows disabling the sorting behaviour.               |\n|            **[`distance`](#distance-1)**            |         `{Number}`          |                    `0`                    |            Distance in pixels before sorting can start.             |\n|          **[`dropOnEmpty`](#droponempty)**          |         `{Boolean}`         |                  `false`                  | Whether items from this Sortable can be dropped on empty Sortables. |\n|      **[`forceHelperSize`](#forcehelpersize)**      |         `{Boolean}`         |                  `false`                  |         Whether to force the sorting helper to have a size.         |\n| **[`forcePlaceholderSize`](#forceplaceholdersize)** |         `{Boolean}`         |                  `false`                  |      Whether to force the sorting placeholder to have a size.       |\n|      **[`hidePlaceholder`](#hideplaceholder)**      |         `{Boolean}`         |                  `false`                  |     Whether to set the visibility of the placeholder to hidden.     |\n|                **[`grid`](#grid-1)**                |          `{Array}`          |                    `*`                    |      Snaps the sorting helper to a grid, every x and y pixels.      |\n|              **[`handle`](#handle-1)**              |         `{String}`          |                   null                    |         Sorting only starts if click matches this selector.         |\n|              **[`helper`](#helper-1)**              |     `{String,Function}`     |                `original`                 |                 Configures the sorting helper node.                 |\n|                **[`items`](#items)**                |     `{String,Function}`     |                   null                    |              Specifies which items should be sortable.              |\n|             **[`opacity`](#opacity-1)**             |         `{Number}`          |                   null`                   |             Allows changing the opacity while sorting.              |\n|              **[`revert`](#revert-1)**              | `{Boolean,String,Function}` |                  `false`                  |   Whether the sortable item should be reverted after sort stops.    |\n|      **[`revertDuration`](#revertduration-1)**      |         `{Number}`          |                   `200`                   |          Duration in milliseconds of the revert animation.          |\n|               **[`scope`](#scope-1)**               |         `{String}`          |                 `default`                 |  Used to group sets of draggable, droppable and sortable elements.  |\n|              **[`scroll`](#scroll-1)**              |         `{Boolean}`         |                  `true`                   |             Allows auto-scrolling within the container.             |\n|   **[`scrollSensitivity`](#scrollsensitivity-1)**   |         `{Number}`          |                   `20`                    |                    Scroll sensitivity in pixels.                    |\n|         **[`scrollSpeed`](#scrollspeed-1)**         |         `{Number}`          |                   `10`                    |                       Scroll speed in pixels.                       |\n|                **[`skip`](#skip-1)**                |         `{String}`          | `input, textarea, button, select, option` |          Prevents sorting if this CSS selector is matched.          |\n|           **[`tolerance`](#tolerance-1)**           |         `{String}`          |                `intersect`                |              Intersection mode between sortable items.              |\n|              **[`zIndex`](#zindex-1)**              |         `{Number}`          |                   null                    |             Allows changing the z-index while sorting.              |\n\n### `appendTo`\n\n-   **Type:** `String`\n-   **Default:** `parent`\n-   **Accepted values:** `parent` or a CSS selector\n-   **Modifiable at runtime:** yes\n\nWhich element the sorting helper should be appended to while sorting.\nOnly works when the [`helper`](#helper-1) option is set to not use the original element.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tappendTo: 'body'\n});\n```\n\n### `axis`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** `x` or `y`\n-   **Modifiable at runtime:** yes\n\nConstrains sorting to either the horizontal (x) or vertical (y) axis.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\taxis: 'x'\n});\n```\n\n### `connectWith`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** a CSS selector\n-   **Modifiable at runtime:** yes\n\nA selector of other Sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the `connectWith` option must be set on both Sortable elements.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"sort2\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tconnectWith: '#sort2'\n});\n```\n\n### `containment`\n\n-   **Type:** `String,Array`\n-   **Default:** null\n-   **Accepted values:** `parent`, `document`, `window`, a CSS selector or an array of 4 numbers in the form `[x1, y1, x2, y2]`\n-   **Modifiable at runtime:** yes\n\nConstrains sorting to within the bounds of the specified element or region.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tcontainment: 'window'\n});\n```\n\n### `cursor`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** any values accepted by the `cursor` CSS property\n-   **Modifiable at runtime:** yes\n\nAllows changing the cursor style while sorting items.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tcursor: 'move'\n});\n```\n\n### `disabled`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nDetermines whether the Sortable instance should be disabled.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tdisabled: true\n});\n```\n\n### `distance`\n\n-   **Type:** `Number`\n-   **Default:** `0`\n-   **Modifiable at runtime:** yes\n\nDistance in pixels that the mouse should move before the sorting should start. Prevents unwanted sorts when sortable items are clicked.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tdistance: 10\n});\n```\n\n### `dropOnEmpty`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nIf `false`, items from this Sortable can't be dropped on an empty connected Sortable (see the [`connectWith`](#connectwith) option.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"sort2\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tconnectWith: '#sort2',\n\tdropOnEmpty: true\n});\n```\n\n### `forceHelperSize`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nWhether to force the sorting helper to have a size.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tforceHelperSize: true\n});\n```\n\n### `forcePlaceholderSize`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nWhether to force the sorting placeholder to have a size.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tforcePlaceholderSize: true\n});\n```\n\n### `hidePlaceholder`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nWhether to set the visibility of the placeholder to hidden.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\thidePlaceholder: true\n});\n```\n\n### `grid`\n\n-   **Type:** `Array`\n-   **Default:** null\n-   **Accepted values:** an array of 2 numbers in the form `[x, y]`\n-   **Modifiable at runtime:** yes\n\nSnaps the sorting helper to a grid, every x and y pixels.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tgrid: [10, 10]\n});\n```\n\n### `handle`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** a CSS selector\n-   **Modifiable at runtime:** no\n\nIf specified, restricts sorting from starting unless the mousedown occurs on the specified element(s). Only elements that descend from the sortable items are permitted.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003e\n\t\t\u003cdiv class=\"handle\"\u003eSort Me\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cdiv\u003e\n\t\t\u003cdiv class=\"handle\"\u003eSort Me\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\thandle: '.handle'\n});\n```\n\n### `helper`\n\n-   **Type:** `String,Function`\n-   **Default:** `original`\n-   **Accepted values:** `original`, `clone` or a function\n-   **Modifiable at runtime:** yes\n\nAllows for a helper element to be used for sorting display.\nIf set to `clone`, then the item being sorted will be cloned and the clone will be dragged.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\thelper: 'clone'\n});\n```\n\n### `items`\n\n-   **Type:** `String,Function`\n-   **Default:** null\n-   **Accepted values:** a CSS selector or a function\n-   **Modifiable at runtime:** yes\n\nSpecifies how to find the sortable items. It can be provided as a CSS selector or a function returning an array of sortable nodes\n\n\u003e By default, all the direct descendants of the element will be considered sortable.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\titems: 'div'\n});\n```\n\n### `opacity`\n\n-   **Type:** `Number`\n-   **Default:** null\n-   **Modifiable at runtime:** yes\n\nAllows changing the opacity of the items while being sorted.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\topacity: 0.5\n});\n```\n\n### `revert`\n\n-   **Type:** `Boolean,String,Function`\n-   **Default:** `false`\n-   **Accepted values:** `invalid`, `valid`, `true`, `false` or a function\n-   **Modifiable at runtime:** yes\n\nWhether the sortable item should revert to its start position when sorting stops.\nIf set to `true`, the sortable item will always revert.\nIf set to `invalid` or `valid` it will respectively revert if dropped on a droppable or not.\nIf it's a function, it must return `true` to indicate that the sortable item should revert.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\trevert: 'invalid'\n});\n```\n\n### `revertDuration`\n\n-   **Type:** `Number`\n-   **Default:** `200`\n-   **Modifiable at runtime:** yes\n\nUses an animation with this specific duration in milliseconds when reverting the items.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\trevert: 'invalid',\n\trevertDuration: 500\n});\n```\n\n### `scope`\n\n-   **Type:** `String`\n-   **Default:** `default`\n-   **Modifiable at runtime:** yes\n\nUsed to group sets of Draggable, Droppable and Sortable elements, in addition to Droppable's [`accept`](#accept) option. A Sortable with the same scope value as a Droppable will be accepted by it.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tscope: 'my-scope'\n});\n```\n\n### `scroll`\n\n-   **Type:** `Boolean`\n-   **Default:** `true`\n-   **Modifiable at runtime:** yes\n\nIf this option is set to `true`, the container of the element will auto-scroll if needed.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tscroll: true\n});\n```\n\n### `scrollSensitivity`\n\n-   **Type:** `Number`\n-   **Default:** `20`\n-   **Modifiable at runtime:** yes\n\nDetermines how close to the edge of the viewport the auto-scroll should happen. Distance is realtive to the mouse pointer, not to the sorting item.\n\n\u003e This option is ignored if [`scroll`](#scroll-1) is set to `false`.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tscroll: true,\n\tscrollSensitivity: 50\n});\n```\n\n### `scrollSpeed`\n\n-   **Type:** `Number`\n-   **Default:** `10`\n-   **Modifiable at runtime:** yes\n\nThe speed in pixels at which the container should auto-scroll when the distance in [`scrollSensitivity`](#scrollsensitivity-1) is met.\n\n\u003e This option is ignored if [`scroll`](#scroll-1) is set to `false`.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tscroll: true,\n\tscrollSpeed: 20\n});\n```\n\n### `skip`\n\n-   **Type:** `String`\n-   **Default:** `input, textarea, button, select, option`\n-   **Accepted values:** a CSS selector\n-   **Modifiable at runtime:** yes\n\nPrevents sorting if the clicked element matches the given CSS selector.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003e\n\t\t\u003cspan class=\"skip\"\u003eDon't Sort Me\u003c/span\u003e\n\t\t\u003cspan\u003eSort Me\u003c/span\u003e\n\t\u003c/div\u003e\n\t\u003cdiv\u003e\n\t\t\u003cspan class=\"skip\"\u003eDon't Sort Me\u003c/span\u003e\n\t\t\u003cspan\u003eSort Me\u003c/span\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tskip: '.skip'\n});\n```\n\n### `tolerance`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** `intersect` or `pointer`\n-   **Modifiable at runtime:** yes\n\nSpecifies which mode to use for testing whether the item being moved is hovering over another item.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\ttolerance: 'pointer'\n});\n```\n\n### `zIndex`\n\n-   **Type:** `Number`\n-   **Default:** null\n-   **Modifiable at runtime:** yes\n\nAllows to change the z-index of the item when being sorted.\n\n```html\n\u003cdiv id=\"sort1\"\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\t\u003cdiv\u003eSort Me\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { Sortable } from 'agnostic-draggable';\n\nnew Sortable(document.querySelector('#sort1'), {\n\tzIndex: 1000\n});\n```\n\n### Events\n\n|           Name            |                                        Description                                         |\n| :-----------------------: | :----------------------------------------------------------------------------------------: |\n|    **`sortable:init`**    |                          Called when the Sortable is initialized.                          |\n|  **`sortable:activate`**  |             Called when drag/sort starts on a connected Draggable or Sortable.             |\n|     **`sort:start`**      |                Called when the sort operation is started. Can be canceled.                 |\n|      **`sort:move`**      |                       Called while sorting an item. Can be canceled.                       |\n|      **`sort:stop`**      | Called when the sort operation stops. Can be canceled to prevent an unwanted sort or drop. |\n|    **`sortable:over`**    |      Called when a connected Draggable or Sortable item intersects with the Sortable.      |\n|   **`sortable:change`**   |             Called whenever the sort order is changed within a Sortable list.              |\n|   **`sortable:remove`**   |                      Called when an item is removed from a Sortable.                       |\n|  **`sortable:receive`**   | Called when a new item (from a connected Draggable or Sortable) is received by a Sortable. |\n|   **`sortable:update`**   |                     Called when the items of a Sortable were updated.                      |\n|    **`sortable:out`**     |  Called when a connected Draggable or Sortable item is dragged out of the Sortable area.   |\n| **`sortable:deactivate`** |             Called when drag/sort stops on a connected Draggable or Sortable.              |\n|  **`sortable:destroy`**   |                           Called when the Sortable is destroyed.                           |\n\n### Event Arguments\n\n### `sortable:init`\n\n-   **sortable:** The sortable being initialized\n\n### `sortable:activate`\n\n-   **sortable:** The sortable being activated\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the event\n-   **peerSortable:** The connected sortable that originated the event\n\n### `sort:start`\n\n-   **source:** The element being sorted\n-   **helper:** The helper element\n-   **placeholder:** The placeholder element\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n\n### `sort:move`\n\n-   **source:** The element being sorted\n-   **helper:** The helper element\n-   **placeholder:** The placeholder element\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n-   **position:** The current mouse position\n\n### `sort:start`\n\n-   **source:** The element being sorted\n-   **helper:** The helper element\n-   **placeholder:** The placeholder element\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n-   **droppable:** The droppable where the sorting element was dropped\n\n### `sortable:over`\n\n-   **sortable:** The sortable being hovered over\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the event\n-   **peerSortable:** The connected sortable that originated the event\n\n### `sortable:change`\n\n-   **sortable:** The sortable being changed\n\n### `sortable:remove`\n\n-   **sortable:** The sortable from where the item was removed\n-   **item:** The item being removed\n-   **previousIndex:** The item index in the source sortable\n-   **peerSortable:** The connected sortable that is receiving the item\n\n### `sortable:receive`\n\n-   **sortable:** The sortable receiving the item\n-   **item:** The item being received\n-   **newIndex:** The item index in the target sortable\n-   **draggable:** The draggable that was the previous owned of the item\n-   **peerSortable:** The connected sortable that was the previous owner of the item\n\n### `sortable:update`\n\n-   **sortable:** The sortable updated\n-   **item:** The item that was moved\n-   **previousIndex:** The previous item index\n-   **newIndex:** The new item index\n-   **peerSortable:** The connected sortable that was the previous owner of the item\n\n### `sortable:out`\n\n-   **sortable:** The sortable being hovered out\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the event\n-   **peerSortable:** The connected sortable that originated the event\n\n### `sortable:deactivate`\n\n-   **sortable:** The sortable being deactivated\n-   **sensorEvent:** The sensor event\n-   **draggable:** The draggable that originated the event\n-   **peerSortable:** The connected sortable that originated the event\n\n### `sortable:destroy`\n\n-   **sortable:** The sortable being destroyed\n\n---\n\n## Resizable\n\nEnables resizing functionality on any DOM element. Creates handles on specific areas of the resizable elements that allow them to be resized using the mouse.\n\nElements modified or created will use the same CSS classes inherited from jQuery UI's implementation:\n\n-   ui-resizable: the element being resized\n-   ui-resizable-handle: the handles of a resizable element\n-   ui-resizable-n: resize handle added on the upper area of a resizable element\n-   ui-resizable-s: resize handle added on the lower area of a resizable element\n-   ui-resizable-e: resize handle added on the right area of a resizable element\n-   ui-resizable-w: resize handle added on the left area of a resizable element\n-   ui-resizable-ne: resize handle added on the upper/right corner of a resizable element\n-   ui-resizable-nw: resize handle added on the upper/left corner of a resizable element\n-   ui-resizable-se: resize handle added on the lower/right corner of a resizable element\n-   ui-resizable-nw: resize handle added on the lower/left corner of a resizable element\n-   ui-resizable-ghost: the ghost element added to preview the new size of an element being resized\n-   ui-resizable-helper: the resizing helper\n\n### Options\n\n|                   Name                    |    Type     | Default  |                                  Description                                   |\n| :---------------------------------------: | :---------: | :------: | :----------------------------------------------------------------------------: |\n|         **[`animate`](#animate)**         | `{Boolean}` | `false`  |            Where to animate the size change on a resizable element.            |\n| **[`animateDuration`](#animateduration)** | `{Number}`  |  `500`   |                   Resize animation duration in milliseconds.                   |\n|     **[`aspectRatio`](#aspectratio)**     | `{Boolean}` | `false`  |          Where to keep the aspect ratio of the element when resizing.          |\n|        **[`autoHide`](#autohide)**        | `{Boolean}` | `false`  | Where to auto hide the resize handles when hovering out the resizable element. |\n|    **[`containment`](#containment-2)**    | `{String}`  |   null   |             Constraints resizing movement to an element or region.             |\n|       **[`disabled`](#disabled-3)**       | `{Boolean}` | `false`  |                    Allows disabling the resizing behaviour.                    |\n|       **[`distance`](#distance-2)**       | `{Number}`  |   `0`    |                 Distance in pixels before resizing can start.                  |\n|            **[`flex`](#flex)**            | `{Boolean}` | `false`  |       Apply new width to elements using `flexBasis` instead of `width`.        |\n|           **[`ghost`](#ghost)**           | `{Boolean}` | `false`  |    Whether to use a ghost element to represent the new size while resizing.    |\n|           **[`grid`](#grid-2)**           |  `{Array}`  |   null   |          Snaps the resizing behavior to a grid, every x and y pixels.          |\n|         **[`handles`](#handles)**         | `{String}`  | `e,s,se` |                   Indicates which resize handles to create.                    |\n|       **[`maxHeight`](#maxheight)**       | `{Number}`  |   null   |                             Maximum resize height.                             |\n|        **[`maxWidth`](#maxwidth)**        | `{Number}`  |   null   |                             Maximum resize width.                              |\n|       **[`minHeight`](#minheight)**       | `{Number}`  |   null   |                             Minimum resize height.                             |\n|        **[`minWidth`](#minwidth)**        | `{Number}`  |   null   |                             Minimum resize width.                              |\n|         **[`zIndex`](#zindex-2)**         | `{Number}`  |   null   |                  Allows changing the z-index while resizing.                   |\n\n### `animate`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nWhether to animate the size change of resizable elements when the resize operation stops.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tanimate: true\n});\n```\n\n### `animateDuration`\n\n-   **Type:** `Number`\n-   **Default:** `500`\n-   **Modifiable at runtime:** yes\n\nDetermines the amount of time in milliseconds to be used in the size change animation.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tanimate: true,\n\tanimateDuration: 1000\n});\n```\n\n### `aspectRatio`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nIf set to `true`, changing the size of a resizable element will always preserve its aspect ratio.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\taspectRatio: true\n});\n```\n\n### `autoHide`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** no\n\nIf set to `true`, the resize handles will only be visible when hovering over the resizable elements.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tautoHide: true\n});\n```\n\n### `containment`\n\n-   **Type:** `String`\n-   **Default:** null\n-   **Accepted values:** `parent`, `document` or a CSS selector\n-   **Modifiable at runtime:** yes\n\nConstrains resizing to within the bounds of the specified element.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tcontainment: 'parent'\n});\n```\n\n### `disabled`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nDetermines whether the Resizable instance should be disabled.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tdisabled: true\n});\n```\n\n### `distance`\n\n-   **Type:** `Number`\n-   **Default:** `0`\n-   **Modifiable at runtime:** yes\n\nDistance in pixels that the mouse should move before the resizing should start. Prevents unwanted resizes when resizable items are clicked.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tdistance: 10\n});\n```\n\n### `flex`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** no\n\nIf set to `true`, the resizable element is considered to be using flex-box and the width updates will be performed using the `flexBasis` style property.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tflex: true\n});\n```\n\n### `ghost`\n\n-   **Type:** `Boolean`\n-   **Default:** `false`\n-   **Modifiable at runtime:** yes\n\nWhether to create a ghost element to demonstrate the size change of a resizable element.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tghost: true\n});\n```\n\n### `grid`\n\n-   **Type:** `Array`\n-   **Default:** null\n-   **Accepted values:** an array of 2 numbers in the form `[x, y]`\n-   **Modifiable at runtime:** yes\n\nSnaps the resizing behavior to a grid, every x and y pixels.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tgrid: [10, 10]\n});\n```\n\n### `handles`\n\n-   **Type:** `String`\n-   **Default:** `e,s,se`\n-   **Accepted values:** a list of handle identifiers\n-   **Modifiable at runtime:** no\n\nSpecifies which resize handles should be created on the resizable element.\nThe option value must be a comma separated list of handle identifiers: `n`, `s`, `e`, `w`, `ne`, `nw`, `se`, `sw`.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\thandles: 'e,se'\n});\n```\n\n### `maxHeight`\n\n-   **Type:** `Number`\n-   **Default:** null\n-   **Modifiable at runtime:** yes\n\nDetermines the maximum height of a resizable element.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tmaxHeight: 1000\n});\n```\n\n### `maxWidth`\n\n-   **Type:** `Number`\n-   **Default:** null\n-   **Modifiable at runtime:** yes\n\nDetermines the maximum width of a resizable element.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tmaxWidth: 1000\n});\n```\n\n### `minHeight`\n\n-   **Type:** `Number`\n-   **Default:** null\n-   **Modifiable at runtime:** yes\n\nDetermines the minimum height of a resizable element.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tminHeight: 100\n});\n```\n\n### `minWidth`\n\n-   **Type:** `Number`\n-   **Default:** null\n-   **Modifiable at runtime:** yes\n\nDetermines the minimum width of a resizable element.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tminWidth: 100\n});\n```\n\n### `zIndex`\n\n-   **Type:** `Number`\n-   **Default:** `500`\n-   **Modifiable at runtime:** yes\n\nAllows to change the z-index of an element being resized.\n\n```html\n\u003cdiv id=\"resize1\"\u003eResize Me\u003c/div\u003e\n```\n\n```js\nimport { Resizable } from 'agnostic-draggable';\n\nnew Resizable(document.querySelector('#resize1'), {\n\tzIndex: 10\n});\n```\n\n### Events\n\n|          Name           |                                      Description                                       |\n| :---------------------: | :------------------------------------------------------------------------------------: |\n|  **`resizable:init`**   |                       Called when the Resizable is initialized.                        |\n|   **`resize:start`**    |             Called when the resize operation is started. Can be canceled.              |\n|   **`resize:change`**   |                    Called while resizing an item. Can be canceled.                     |\n|    **`resize:stop`**    | Called when the resize operation stops. Can be canceled to prevent an unwanted resize. |\n| **`resizable:destroy`** |                        Called when the Resizable is destroyed.                         |\n\n### Event Arguments\n\n### `resizable:init`\n\n-   **resizable:** The resizable being initialized\n\n### `resize:start`\n\n-   **source:** The element to be resized\n-   **helper:** The helper element\n-   **originalElement:** The original element\n-   **originalSize:** The original element size\n-   **originalPosition:** The original element position\n-   **size:** The current element size\n-   **position:** The current element position\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n\n### `resize:change`\n\n-   **element:** The element being resized\n-   **helper:** The helper element\n-   **originalElement:** The original element\n-   **originalSize:** The original element size\n-   **originalPosition:** The original element position\n-   **size:** The current element size\n-   **position:** The current element position\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n\n### `resize:stop`\n\n-   **source:** The resized element\n-   **helper:** The helper element\n-   **originalElement:** The original element\n-   **originalSize:** The original element size\n-   **originalPosition:** The original element position\n-   **size:** The new element size\n-   **position:** The new element position\n-   **sensorEvent:** The sensor event\n-   **originalEvent:** The original mouse event\n\n### `resizable:destroy`\n\n-   **resizable** The resizable being destroyed\n\n---\n\n## Contributing\n\nFeel free to submit pull requests. The most wanted help would be bringing the remaining features from jQuery UI's that were not translated to this library.\n\nThis library was ported from an old library, so it lacks support for mobile touch events. Anyone interested in implementing enhancements like this would be very welcome.\n\nOther new features or fixes for any kind of defects are also very welcome.\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcospont%2Fagnostic-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcospont%2Fagnostic-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcospont%2Fagnostic-draggable/lists"}