Repository: SortableJS/Sortable Branch: master Commit: 031649b81165 Files: 64 Total size: 723.9 KB Directory structure: gitextract_s2mraq4s/ ├── .circleci/ │ └── config.yml ├── .editorconfig ├── .github/ │ └── ISSUE_TEMPLATE/ │ ├── bug-report.md │ ├── custom-template.md │ └── feature-request.md ├── .gitignore ├── .jshintrc ├── .testcaferc.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── Sortable.js ├── babel.config.js ├── bower.json ├── entry/ │ ├── entry-complete.js │ ├── entry-core.js │ └── entry-defaults.js ├── index.html ├── modular/ │ ├── sortable.complete.esm.js │ ├── sortable.core.esm.js │ └── sortable.esm.js ├── package.json ├── plugins/ │ ├── AutoScroll/ │ │ ├── AutoScroll.js │ │ ├── README.md │ │ └── index.js │ ├── MultiDrag/ │ │ ├── MultiDrag.js │ │ ├── README.md │ │ └── index.js │ ├── OnSpill/ │ │ ├── OnSpill.js │ │ ├── README.md │ │ └── index.js │ ├── README.md │ └── Swap/ │ ├── README.md │ ├── Swap.js │ └── index.js ├── scripts/ │ ├── banner.js │ ├── build.js │ ├── esm-build.js │ ├── minify.js │ ├── test-compat.js │ ├── test.js │ └── umd-build.js ├── src/ │ ├── Animation.js │ ├── BrowserInfo.js │ ├── EventDispatcher.js │ ├── PluginManager.js │ ├── Sortable.js │ └── utils.js ├── st/ │ ├── app.js │ ├── iframe/ │ │ ├── frame.html │ │ └── index.html │ ├── prettify/ │ │ ├── prettify.css │ │ ├── prettify.js │ │ └── run_prettify.js │ └── theme.css └── tests/ ├── Sortable.compat.test.js ├── Sortable.test.js ├── dual-list.html ├── empty-list.html ├── filter.html ├── handles.html ├── nested.html ├── single-list.html └── style.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: .circleci/config.yml ================================================ version: 2.0 jobs: build: docker: - image: circleci/node:10.16-browsers steps: - checkout - restore_cache: keys: - v1-dependencies-{{ checksum "package.json" }} - v1-dependencies- - run: npm install - save_cache: paths: - node_modules key: v1-dependencies-{{ checksum "package.json" }} - run: npm run build:umd - run: name: Compatibility Test command: | if [ -z "$CIRCLE_PR_NUMBER" ]; then npm run test:compat fi - run: npm run test - store_test_results: path: /tmp/test-results ================================================ FILE: .editorconfig ================================================ # editorconfig.org root = true [*] indent_style = tab end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false [*.yml] indent_style = space ================================================ FILE: .github/ISSUE_TEMPLATE/bug-report.md ================================================ --- name: Bug report about: Create a report to help us improve title: "[bug] " labels: "" assignees: "" --- **Describe the bug** **To Reproduce** Steps to reproduce the behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error **Expected behavior** **Information** Versions - Look in your `package.json` for this information: sortablejs = ^x.x.x @types/sortablejs = ^x.x.x **Additional context** Add any other context about the problem here. **Reproduction** codesandbox: ================================================ FILE: .github/ISSUE_TEMPLATE/custom-template.md ================================================ --- name: Custom issue template about: Not a feature request or a bug report. Usually questions, queries or concerns title: "" labels: "" assignees: "" --- **Custom** **Reproduction** codesandbox: ================================================ FILE: .github/ISSUE_TEMPLATE/feature-request.md ================================================ --- name: Feature request about: Suggest an idea for this project title: "[feature] " labels: "" assignees: "" --- **Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] **Describe the solution you'd like** A clear and concise description of what you want to happen. **Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered. **Additional context** Add any other context or screenshots about the feature request here. ================================================ FILE: .gitignore ================================================ node_modules mock.png .*.sw* .build* jquery.fn.* .idea/ ================================================ FILE: .jshintrc ================================================ { "strict": false, "newcap": false, "node": true, "expr": true, "supernew": true, "laxbreak": true, "esversion": 9, "white": true, "globals": { "define": true, "test": true, "expect": true, "module": true, "asyncTest": true, "start": true, "ok": true, "equal": true, "notEqual": true, "deepEqual": true, "window": true, "document": true, "performance": true } } ================================================ FILE: .testcaferc.json ================================================ { "speed": 0.4, "reporter": { "name": "xunit", "output": "/tmp/test-results/res.xml" } } ================================================ FILE: CONTRIBUTING.md ================================================ # Contribution Guidelines ### Issue 1. Try [master](https://github.com/SortableJS/Sortable/tree/master/)-branch, perhaps the problem has been solved; 2. [Use the search](https://github.com/SortableJS/Sortable/search?type=Issues&q=problem), maybe already have an answer; 3. If not found, create example on [jsbin.com (draft)](https://jsbin.com/kamiwez/edit?html,js,output) and describe the problem. --- ### Pull Request 1. Only request to merge with the [master](https://github.com/SortableJS/Sortable/tree/master/)-branch. 2. Only modify source files, **do not commit the resulting build** ### Setup 1. Fork the repo on [github](https://github.com) 2. Clone locally 3. Run `npm i` in the local repo ### Building - For development, build the `./Sortable.js` file using the command `npm run build:umd:watch` - To build everything and minify it, run `npm run build` - Do not commit the resulting builds in any pull request – they will be generated at release ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2019 All contributors to Sortable Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Sortable   [![Financial Contributors on Open Collective](https://opencollective.com/Sortable/all/badge.svg?label=financial+contributors)](https://opencollective.com/Sortable) [![CircleCI](https://circleci.com/gh/SortableJS/Sortable.svg?style=svg)](https://circleci.com/gh/SortableJS/Sortable) [![DeepScan grade](https://deepscan.io/api/teams/3901/projects/5666/branches/43977/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3901&pid=5666&bid=43977) [![](https://data.jsdelivr.com/v1/package/npm/sortablejs/badge)](https://www.jsdelivr.com/package/npm/sortablejs) [![npm](https://img.shields.io/npm/v/sortablejs.svg)](https://www.npmjs.com/package/sortablejs) Sortable is a JavaScript library for reorderable drag-and-drop lists. Demo: http://sortablejs.github.io/Sortable/ [](https://saucelabs.com/) ## Features * Supports touch devices and [modern](http://caniuse.com/#search=drag) browsers (including IE9) * Can drag from one list to another or within the same list * CSS animation when moving items * Supports drag handles *and selectable text* (better than voidberg's html5sortable) * Smart auto-scrolling * Advanced swap detection * Smooth animations * [Multi-drag](https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag) support * Support for CSS transforms * Built using native HTML5 drag and drop API * Supports * [Meteor](https://github.com/SortableJS/meteor-sortablejs) * Angular * [2.0+](https://github.com/SortableJS/angular-sortablejs) * [1.*](https://github.com/SortableJS/angular-legacy-sortablejs) * React * [ES2015+](https://github.com/SortableJS/react-sortablejs) * [Mixin](https://github.com/SortableJS/react-mixin-sortablejs) * [Knockout](https://github.com/SortableJS/knockout-sortablejs) * [Polymer](https://github.com/SortableJS/polymer-sortablejs) * [Vue](https://github.com/SortableJS/Vue.Draggable) * [Ember](https://github.com/SortableJS/ember-sortablejs) * Supports any CSS library, e.g. [Bootstrap](#bs) * Simple API * Support for [plugins](#plugins) * [CDN](#cdn) * No jQuery required (but there is [support](https://github.com/SortableJS/jquery-sortablejs)) * Typescript definitions at `@types/sortablejs`
### Articles * [Dragging Multiple Items in Sortable](https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable) (April 26, 2019) * [Swap Thresholds and Direction](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction) (December 2, 2018) * [Sortable v1.0 — New capabilities](https://github.com/SortableJS/Sortable/wiki/Sortable-v1.0-—-New-capabilities/) (December 22, 2014) * [Sorting with the help of HTML5 Drag'n'Drop API](https://github.com/SortableJS/Sortable/wiki/Sorting-with-the-help-of-HTML5-Drag'n'Drop-API/) (December 23, 2013)
### Getting Started Install with NPM: ```bash npm install sortablejs --save ``` Install with Bower: ```bash bower install --save sortablejs ``` Import into your project: ```js // Default SortableJS import Sortable from 'sortablejs'; // Core SortableJS (without default plugins) import Sortable from 'sortablejs/modular/sortable.core.esm.js'; // Complete SortableJS (with all plugins) import Sortable from 'sortablejs/modular/sortable.complete.esm.js'; ``` Cherrypick plugins: ```js // Cherrypick extra plugins import Sortable, { MultiDrag, Swap } from 'sortablejs'; Sortable.mount(new MultiDrag(), new Swap()); // Cherrypick default plugins import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js'; Sortable.mount(new AutoScroll()); ``` --- ### Usage ```html ``` ```js var el = document.getElementById('items'); var sortable = Sortable.create(el); ``` You can use any element for the list and its elements, not just `ul`/`li`. Here is an [example with `div`s](https://jsbin.com/visimub/edit?html,js,output). --- ### Options ```js var sortable = new Sortable(el, { group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] } sort: true, // sorting inside list delay: 0, // time in milliseconds to define when the sorting should start delayOnTouchOnly: false, // only delay if user is using touch touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event disabled: false, // Disables the sortable if set to true. store: null, // @see Store animation: 150, // ms, animation speed moving items when sorting, `0` — without animation easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples. handle: ".my-handle", // Drag handle selector within list items filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function) preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter` draggable: ".item", // Specifies which items inside the element should be draggable dataIdAttr: 'data-id', // HTML attribute that is used by the `toArray()` method ghostClass: "sortable-ghost", // Class name for the drop placeholder chosenClass: "sortable-chosen", // Class name for the chosen item dragClass: "sortable-drag", // Class name for the dragging item swapThreshold: 1, // Threshold of the swap zone invertSwap: false, // Will always use inverted swap zone if set to true invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default) direction: 'horizontal', // Direction of Sortable (will be detected automatically if not given) forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag. dragoverBubble: false, removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // Element is chosen onChoose: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element is unchosen onUnchoose: function(/**Event*/evt) { // same properties as onEnd }, // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element dragging ended onEnd: function (/**Event*/evt) { var itemEl = evt.item; // dragged HTMLElement evt.to; // target list evt.from; // previous list evt.oldIndex; // element's old index within old parent evt.newIndex; // element's new index within new parent evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements evt.clone // the clone element evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving }, // Element is dropped into the list from another list onAdd: function (/**Event*/evt) { // same properties as onEnd }, // Changed sorting within list onUpdate: function (/**Event*/evt) { // same properties as onEnd }, // Called by any change to the list (add / update / remove) onSort: function (/**Event*/evt) { // same properties as onEnd }, // Element is removed from the list into another list onRemove: function (/**Event*/evt) { // same properties as onEnd }, // Attempt to drag a filtered element onFilter: function (/**Event*/evt) { var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event. }, // Event when you move an item in the list or between lists onMove: function (/**Event*/evt, /**Event*/originalEvent) { // Example: https://jsbin.com/nawahef/edit?js,output evt.dragged; // dragged HTMLElement evt.draggedRect; // DOMRect {left, top, right, bottom} evt.related; // HTMLElement on which have guided evt.relatedRect; // DOMRect evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default originalEvent.clientY; // mouse position // return false; — for cancel // return -1; — insert before target // return 1; — insert after target // return true; — keep default insertion point based on the direction // return void; — keep default insertion point based on the direction }, // Called when creating a clone of element onClone: function (/**Event*/evt) { var origEl = evt.item; var cloneEl = evt.clone; }, // Called when dragging element changes position onChange: function(/**Event*/evt) { evt.newIndex // most likely why this event is used is to get the dragging element's current index // same properties as onEnd } }); ``` --- #### `group` option To drag elements from one list into another, both lists must have the same `group` value. You can also define whether lists can give away, give and keep a copy (`clone`), and receive elements. * name: `String` — group name * pull: `true|false|["foo", "bar"]|'clone'|function` — ability to move from the list. `clone` — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to `true`. * put: `true|false|["baz", "qux"]|function` — whether elements can be added from other lists, or an array of group names from which elements can be added. * revertClone: `boolean` — revert cloned element to initial position after moving to a another list. Demo: - https://jsbin.com/hijetos/edit?js,output - https://jsbin.com/nacoyah/edit?js,output — use of complex logic in the `pull` and` put` - https://jsbin.com/bifuyab/edit?js,output — use `revertClone: true` --- #### `sort` option Allow sorting inside list. Demo: https://jsbin.com/jayedig/edit?js,output --- #### `delay` option Time in milliseconds to define when the sorting should start. Unfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag & drop. Demo: https://jsbin.com/zosiwah/edit?js,output --- #### `delayOnTouchOnly` option Whether or not the delay should be applied only if the user is using touch (eg. on a mobile device). No delay will be applied in any other case. Defaults to `false`. --- #### `swapThreshold` option Percentage of the target that the swap zone will take up, as a float between `0` and `1`. [Read more](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold) Demo: http://sortablejs.github.io/Sortable#thresholds --- #### `invertSwap` option Set to `true` to set the swap zone to the sides of the target, for the effect of sorting "in between" items. [Read more](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#forcing-inverted-swap-zone) Demo: http://sortablejs.github.io/Sortable#thresholds --- #### `invertedSwapThreshold` option Percentage of the target that the inverted swap zone will take up, as a float between `0` and `1`. If not given, will default to `swapThreshold`. [Read more](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#dealing-with-swap-glitching) --- #### `direction` option Direction that the Sortable should sort in. Can be set to `'vertical'`, `'horizontal'`, or a function, which will be called whenever a target is dragged over. Must return `'vertical'` or `'horizontal'`. [Read more](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#direction) Example of direction detection for vertical list that includes full column and half column elements: ```js Sortable.create(el, { direction: function(evt, target, dragEl) { if (target !== null && target.className.includes('half-column') && dragEl.className.includes('half-column')) { return 'horizontal'; } return 'vertical'; } }); ``` --- #### `touchStartThreshold` option This option is similar to `fallbackTolerance` option. When the `delay` option is set, some phones with very sensitive touch displays like the Samsung Galaxy S8 will fire unwanted touchmove events even when your finger is not moving, resulting in the sort not triggering. This option sets the minimum pointer movement that must occur before the delayed sorting is cancelled. Values between 3 to 5 are good. --- #### `disabled` options Disables the sortable if set to `true`. Demo: https://jsbin.com/sewokud/edit?js,output ```js var sortable = Sortable.create(list); document.getElementById("switcher").onclick = function () { var state = sortable.option("disabled"); // get sortable.option("disabled", !state); // set }; ``` --- #### `handle` option To make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around. Demo: https://jsbin.com/numakuh/edit?html,js,output ```js Sortable.create(el, { handle: ".my-handle" }); ``` ```html ``` ```css .my-handle { cursor: move; cursor: -webkit-grabbing; } ``` --- #### `filter` option ```js Sortable.create(list, { filter: ".js-remove, .js-edit", onFilter: function (evt) { var item = evt.item, ctrl = evt.target; if (Sortable.utils.is(ctrl, ".js-remove")) { // Click on remove button item.parentNode.removeChild(item); // remove sortable item } else if (Sortable.utils.is(ctrl, ".js-edit")) { // Click on edit link // ... } } }) ``` --- #### `ghostClass` option Class name for the drop placeholder (default `sortable-ghost`). Demo: https://jsbin.com/henuyiw/edit?css,js,output ```css .ghost { opacity: 0.4; } ``` ```js Sortable.create(list, { ghostClass: "ghost" }); ``` --- #### `chosenClass` option Class name for the chosen item (default `sortable-chosen`). Demo: https://jsbin.com/hoqufox/edit?css,js,output ```css .chosen { color: #fff; background-color: #c00; } ``` ```js Sortable.create(list, { delay: 500, chosenClass: "chosen" }); ``` --- #### `forceFallback` option If set to `true`, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser. This gives us the possibility to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers. On top of that, the Fallback always generates a copy of that DOM Element and appends the class `fallbackClass` defined in the options. This behaviour controls the look of this 'dragged' Element. Demo: https://jsbin.com/sibiput/edit?html,css,js,output --- #### `fallbackTolerance` option Emulates the native drag threshold. Specify in pixels how far the mouse should move before it's considered as a drag. Useful if the items are also clickable like in a list of links. When the user clicks inside a sortable element, it's not uncommon for your hand to move a little between the time you press and the time you release. Dragging only starts if you move the pointer past a certain tolerance, so that you don't accidentally start dragging every time you click. 3 to 5 are probably good values. --- #### `dragoverBubble` option If set to `true`, the dragover event will bubble to parent sortables. Works on both fallback and native dragover event. By default, it is false, but Sortable will only stop bubbling the event once the element has been inserted into a parent Sortable, or *can* be inserted into a parent Sortable, but isn't at that specific time (due to animation, etc). Since 1.8.0, you will probably want to leave this option as false. Before 1.8.0, it may need to be `true` for nested sortables to work. --- #### `removeCloneOnHide` option If set to `false`, the clone is hidden by having it's CSS `display` property set to `none`. By default, this option is `true`, meaning Sortable will remove the cloned element from the DOM when it is supposed to be hidden. --- #### `emptyInsertThreshold` option The distance (in pixels) the mouse must be from an empty sortable while dragging for the drag element to be inserted into that sortable. Defaults to `5`. Set to `0` to disable this feature. Demo: https://jsbin.com/becavoj/edit?js,output An alternative to this option would be to set a padding on your list when it is empty. For example: ```css ul:empty { padding-bottom: 20px; } ``` Warning: For `:empty` to work, it must have no node inside (even text one). Demo: https://jsbin.com/yunakeg/edit?html,css,js,output --- ### Event object ([demo](https://jsbin.com/fogujiv/edit?js,output)) - to:`HTMLElement` — list, in which moved element - from:`HTMLElement` — previous list - item:`HTMLElement` — dragged element - clone:`HTMLElement` - oldIndex:`Number|undefined` — old index within parent - newIndex:`Number|undefined` — new index within parent - oldDraggableIndex: `Number|undefined` — old index within parent, only counting draggable elements - newDraggableIndex: `Number|undefined` — new index within parent, only counting draggable elements - pullMode:`String|Boolean|undefined` — Pull mode if dragging into another sortable (`"clone"`, `true`, or `false`), otherwise undefined #### `move` event object - to:`HTMLElement` - from:`HTMLElement` - dragged:`HTMLElement` - draggedRect:`DOMRect` - related:`HTMLElement` — element on which have guided - relatedRect:`DOMRect` - willInsertAfter:`Boolean` — `true` if will element be inserted after target (or `false` if before) --- ### Methods ##### option(name:`String`[, value:`*`]):`*` Get or set the option. ##### closest(el:`HTMLElement`[, selector:`String`]):`HTMLElement|null` For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. ##### toArray():`String[]` Serializes the sortable's item `data-id`'s (`dataIdAttr` option) into an array of string. ##### sort(order:`String[]`, useAnimation:`Boolean`) Sorts the elements according to the array. ```js var order = sortable.toArray(); sortable.sort(order.reverse(), true); // apply ``` ##### save() Save the current sorting (see [store](#store)) ##### destroy() Removes the sortable functionality completely. --- ### Store Saving and restoring of the sort. ```html ``` ```js Sortable.create(el, { group: "localStorage-example", store: { /** * Get the order of elements. Called once during initialization. * @param {Sortable} sortable * @returns {Array} */ get: function (sortable) { var order = localStorage.getItem(sortable.options.group.name); return order ? order.split('|') : []; }, /** * Save the order of elements. Called onEnd (when the item is dropped). * @param {Sortable} sortable */ set: function (sortable) { var order = sortable.toArray(); localStorage.setItem(sortable.options.group.name, order.join('|')); } } }) ``` --- ### Bootstrap Demo: https://jsbin.com/visimub/edit?html,js,output ```html ``` --- ### Static methods & properties ##### Sortable.create(el:`HTMLElement`[, options:`Object`]):`Sortable` Create new instance. --- ##### Sortable.active:`Sortable` The active Sortable instance. --- ##### Sortable.dragged:`HTMLElement` The element being dragged. --- ##### Sortable.ghost:`HTMLElement` The ghost element. --- ##### Sortable.clone:`HTMLElement` The clone element. --- ##### Sortable.get(element:`HTMLElement`):`Sortable` Get the Sortable instance on an element. --- ##### Sortable.mount(plugin:`...SortablePlugin|SortablePlugin[]`) Mounts a plugin to Sortable. --- ##### Sortable.utils * on(el`:HTMLElement`, event`:String`, fn`:Function`) — attach an event handler function * off(el`:HTMLElement`, event`:String`, fn`:Function`) — remove an event handler * css(el`:HTMLElement`)`:Object` — get the values of all the CSS properties * css(el`:HTMLElement`, prop`:String`)`:Mixed` — get the value of style properties * css(el`:HTMLElement`, prop`:String`, value`:String`) — set one CSS properties * css(el`:HTMLElement`, props`:Object`) — set more CSS properties * find(ctx`:HTMLElement`, tagName`:String`[, iterator`:Function`])`:Array` — get elements by tag name * bind(ctx`:Mixed`, fn`:Function`)`:Function` — Takes a function and returns a new one that will always have a particular context * is(el`:HTMLElement`, selector`:String`)`:Boolean` — check the current matched set of elements against a selector * closest(el`:HTMLElement`, selector`:String`[, ctx`:HTMLElement`])`:HTMLElement|Null` — for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree * clone(el`:HTMLElement`)`:HTMLElement` — create a deep copy of the set of matched elements * toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — add or remove one classes from each element * detectDirection(el`:HTMLElement`)`:String` — automatically detect the [direction](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#direction) of the element as either `'vertical'` or `'horizontal'` * index(el`:HTMLElement`, selector`:String`)`:Number` — index of the element within its parent for a selected set of elements * getChild(el`:HTMLElement`, childNum`:Number`, options`:Object`, includeDragEl`:Boolean`):`HTMLElement` — get the draggable element at a given index of draggable elements within a Sortable instance * expando`:String` — expando property name for internal use, sortableListElement[expando] returns the Sortable instance of that elemenet --- ### Plugins #### Extra Plugins (included in complete versions) - [MultiDrag](https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag) - [Swap](https://github.com/SortableJS/Sortable/tree/master/plugins/Swap) #### Default Plugins (included in default versions) - [AutoScroll](https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll) - [OnSpill](https://github.com/SortableJS/Sortable/tree/master/plugins/OnSpill) --- ### CDN ```html ``` --- ### Contributing (Issue/PR) Please, [read this](CONTRIBUTING.md). --- ## Contributors ### Code Contributors This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. ### Financial Contributors Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/Sortable/contribute)] #### Individuals #### Organizations Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/Sortable/contribute)] ## MIT LICENSE Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: Sortable.js ================================================ /**! * Sortable 1.15.7 * @author RubaXa * @author owenm * @license MIT */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = global || self, global.Sortable = factory()); }(this, (function () { 'use strict'; function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); } function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } var version = "1.15.7"; function userAgent(pattern) { if (typeof window !== 'undefined' && window.navigator) { return !! /*@__PURE__*/navigator.userAgent.match(pattern); } } var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i); var Edge = userAgent(/Edge/i); var FireFox = userAgent(/firefox/i); var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i); var IOS = userAgent(/iP(ad|od|hone)/i); var ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i); var captureMode = { capture: false, passive: false }; function on(el, event, fn) { el.addEventListener(event, fn, !IE11OrLess && captureMode); } function off(el, event, fn) { el.removeEventListener(event, fn, !IE11OrLess && captureMode); } function matches( /**HTMLElement*/el, /**String*/selector) { if (!selector) return; selector[0] === '>' && (selector = selector.substring(1)); if (el) { try { if (el.matches) { return el.matches(selector); } else if (el.msMatchesSelector) { return el.msMatchesSelector(selector); } else if (el.webkitMatchesSelector) { return el.webkitMatchesSelector(selector); } } catch (_) { return false; } } return false; } function getParentOrHost(el) { return el.host && el !== document && el.host.nodeType && el.host !== el ? el.host : el.parentNode; } function closest( /**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) { if (el) { ctx = ctx || document; do { if (selector != null && (selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) { return el; } if (el === ctx) break; /* jshint boss:true */ } while (el = getParentOrHost(el)); } return null; } var R_SPACE = /\s+/g; function toggleClass(el, name, state) { if (el && name) { if (el.classList) { el.classList[state ? 'add' : 'remove'](name); } else { var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' '); el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' '); } } } function css(el, prop, val) { var style = el && el.style; if (style) { if (val === void 0) { if (document.defaultView && document.defaultView.getComputedStyle) { val = document.defaultView.getComputedStyle(el, ''); } else if (el.currentStyle) { val = el.currentStyle; } return prop === void 0 ? val : val[prop]; } else { if (!(prop in style) && prop.indexOf('webkit') === -1) { prop = '-webkit-' + prop; } style[prop] = val + (typeof val === 'string' ? '' : 'px'); } } } function matrix(el, selfOnly) { var appliedTransforms = ''; if (typeof el === 'string') { appliedTransforms = el; } else { do { var transform = css(el, 'transform'); if (transform && transform !== 'none') { appliedTransforms = transform + ' ' + appliedTransforms; } /* jshint boss:true */ } while (!selfOnly && (el = el.parentNode)); } var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix; /*jshint -W056 */ return matrixFn && new matrixFn(appliedTransforms); } function find(ctx, tagName, iterator) { if (ctx) { var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length; if (iterator) { for (; i < n; i++) { iterator(list[i], i); } } return list; } return []; } function getWindowScrollingElement() { var scrollingElement = document.scrollingElement; if (scrollingElement) { return scrollingElement; } else { return document.documentElement; } } /** * Returns the "bounding client rect" of given element * @param {HTMLElement} el The element whose boundingClientRect is wanted * @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container * @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr * @param {[Boolean]} undoScale Whether the container's scale() should be undone * @param {[HTMLElement]} container The parent the element will be placed in * @return {Object} The boundingClientRect of el, with specified adjustments */ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) { if (!el.getBoundingClientRect && el !== window) return; var elRect, top, left, bottom, right, height, width; if (el !== window && el.parentNode && el !== getWindowScrollingElement()) { elRect = el.getBoundingClientRect(); top = elRect.top; left = elRect.left; bottom = elRect.bottom; right = elRect.right; height = elRect.height; width = elRect.width; } else { top = 0; left = 0; bottom = window.innerHeight; right = window.innerWidth; height = window.innerHeight; width = window.innerWidth; } if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) { // Adjust for translate() container = container || el.parentNode; // solves #1123 (see: https://stackoverflow.com/a/37953806/6088312) // Not needed on <= IE11 if (!IE11OrLess) { do { if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static')) { var containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container top -= containerRect.top + parseInt(css(container, 'border-top-width')); left -= containerRect.left + parseInt(css(container, 'border-left-width')); bottom = top + elRect.height; right = left + elRect.width; break; } /* jshint boss:true */ } while (container = container.parentNode); } } if (undoScale && el !== window) { // Adjust for scale() var elMatrix = matrix(container || el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d; if (elMatrix) { top /= scaleY; left /= scaleX; width /= scaleX; height /= scaleY; bottom = top + height; right = left + width; } } return { top: top, left: left, bottom: bottom, right: right, width: width, height: height }; } /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ function isScrolledPast(el, elSide, parentSide) { var parent = getParentAutoScrollElement(el, true), elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { var parentSideVal = getRect(parent)[parentSide], visible = void 0; if (parentSide === 'top' || parentSide === 'left') { visible = elSideVal >= parentSideVal; } else { visible = elSideVal <= parentSideVal; } if (!visible) return parent; if (parent === getWindowScrollingElement()) break; parent = getParentAutoScrollElement(parent, false); } return false; } /** * Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible) * and non-draggable elements * @param {HTMLElement} el The parent element * @param {Number} childNum The index of the child * @param {Object} options Parent Sortable's options * @return {HTMLElement} The child at index childNum, or null if not found */ function getChild(el, childNum, options, includeDragEl) { var currentChild = 0, i = 0, children = el.children; while (i < children.length) { if (children[i].style.display !== 'none' && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false)) { if (currentChild === childNum) { return children[i]; } currentChild++; } i++; } return null; } /** * Gets the last child in the el, ignoring ghostEl or invisible elements (clones) * @param {HTMLElement} el Parent element * @param {selector} selector Any other elements that should be ignored * @return {HTMLElement} The last child, ignoring ghostEl */ function lastChild(el, selector) { var last = el.lastElementChild; while (last && (last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector))) { last = last.previousElementSibling; } return last || null; } /** * Returns the index of an element within its parent for a selected set of * elements * @param {HTMLElement} el * @param {selector} selector * @return {number} */ function index(el, selector) { var index = 0; if (!el || !el.parentNode) { return -1; } /* jshint boss:true */ while (el = el.previousElementSibling) { if (el.nodeName.toUpperCase() !== 'TEMPLATE' && el !== Sortable.clone && (!selector || matches(el, selector))) { index++; } } return index; } /** * Returns the scroll offset of the given element, added with all the scroll offsets of parent elements. * The value is returned in real pixels. * @param {HTMLElement} el * @return {Array} Offsets in the format of [left, top] */ function getRelativeScrollOffset(el) { var offsetLeft = 0, offsetTop = 0, winScroller = getWindowScrollingElement(); if (el) { do { var elMatrix = matrix(el), scaleX = elMatrix.a, scaleY = elMatrix.d; offsetLeft += el.scrollLeft * scaleX; offsetTop += el.scrollTop * scaleY; } while (el !== winScroller && (el = el.parentNode)); } return [offsetLeft, offsetTop]; } /** * Returns the index of the object within the given array * @param {Array} arr Array that may or may not hold the object * @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find * @return {Number} The index of the object in the array, or -1 */ function indexOfObject(arr, obj) { for (var i in arr) { if (!arr.hasOwnProperty(i)) continue; for (var key in obj) { if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i); } } return -1; } function getParentAutoScrollElement(el, includeSelf) { // skip to window if (!el || !el.getBoundingClientRect) return getWindowScrollingElement(); var elem = el; var gotSelf = false; do { // we don't need to get elem css if it isn't even overflowing in the first place (performance) if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) { var elemCSS = css(elem); if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) { if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement(); if (gotSelf || includeSelf) return elem; gotSelf = true; } } /* jshint boss:true */ } while (elem = elem.parentNode); return getWindowScrollingElement(); } function extend(dst, src) { if (dst && src) { for (var key in src) { if (src.hasOwnProperty(key)) { dst[key] = src[key]; } } } return dst; } function isRectEqual(rect1, rect2) { return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width); } var _throttleTimeout; function throttle(callback, ms) { return function () { if (!_throttleTimeout) { var args = arguments, _this = this; if (args.length === 1) { callback.call(_this, args[0]); } else { callback.apply(_this, args); } _throttleTimeout = setTimeout(function () { _throttleTimeout = void 0; }, ms); } }; } function cancelThrottle() { clearTimeout(_throttleTimeout); _throttleTimeout = void 0; } function scrollBy(el, x, y) { el.scrollLeft += x; el.scrollTop += y; } function clone(el) { var Polymer = window.Polymer; var $ = window.jQuery || window.Zepto; if (Polymer && Polymer.dom) { return Polymer.dom(el).cloneNode(true); } else if ($) { return $(el).clone(true)[0]; } else { return el.cloneNode(true); } } function setRect(el, rect) { css(el, 'position', 'absolute'); css(el, 'top', rect.top); css(el, 'left', rect.left); css(el, 'width', rect.width); css(el, 'height', rect.height); } function unsetRect(el) { css(el, 'position', ''); css(el, 'top', ''); css(el, 'left', ''); css(el, 'width', ''); css(el, 'height', ''); } function getChildContainingRectFromElement(container, options, ghostEl) { var rect = {}; Array.from(container.children).forEach(function (child) { var _rect$left, _rect$top, _rect$right, _rect$bottom; if (!closest(child, options.draggable, container, false) || child.animated || child === ghostEl) return; var childRect = getRect(child); rect.left = Math.min((_rect$left = rect.left) !== null && _rect$left !== void 0 ? _rect$left : Infinity, childRect.left); rect.top = Math.min((_rect$top = rect.top) !== null && _rect$top !== void 0 ? _rect$top : Infinity, childRect.top); rect.right = Math.max((_rect$right = rect.right) !== null && _rect$right !== void 0 ? _rect$right : -Infinity, childRect.right); rect.bottom = Math.max((_rect$bottom = rect.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : -Infinity, childRect.bottom); }); rect.width = rect.right - rect.left; rect.height = rect.bottom - rect.top; rect.x = rect.left; rect.y = rect.top; return rect; } var expando = 'Sortable' + new Date().getTime(); function AnimationStateManager() { var animationStates = [], animationCallbackId; return { captureAnimationState: function captureAnimationState() { animationStates = []; if (!this.options.animation) return; var children = [].slice.call(this.el.children); children.forEach(function (child) { if (css(child, 'display') === 'none' || child === Sortable.ghost) return; animationStates.push({ target: child, rect: getRect(child) }); var fromRect = _objectSpread2({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation if (child.thisAnimationDuration) { var childMatrix = matrix(child, true); if (childMatrix) { fromRect.top -= childMatrix.f; fromRect.left -= childMatrix.e; } } child.fromRect = fromRect; }); }, addAnimationState: function addAnimationState(state) { animationStates.push(state); }, removeAnimationState: function removeAnimationState(target) { animationStates.splice(indexOfObject(animationStates, { target: target }), 1); }, animateAll: function animateAll(callback) { var _this = this; if (!this.options.animation) { clearTimeout(animationCallbackId); if (typeof callback === 'function') callback(); return; } var animating = false, animationTime = 0; animationStates.forEach(function (state) { var time = 0, target = state.target, fromRect = target.fromRect, toRect = getRect(target), prevFromRect = target.prevFromRect, prevToRect = target.prevToRect, animatingRect = state.rect, targetMatrix = matrix(target, true); if (targetMatrix) { // Compensate for current animation toRect.top -= targetMatrix.f; toRect.left -= targetMatrix.e; } target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect if (isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) && // Make sure animatingRect is on line between toRect & fromRect (animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left)) { // If returning to same place as started from animation and on same axis time = calculateRealTime(animatingRect, prevFromRect, prevToRect, _this.options); } } // if fromRect != toRect: animate if (!isRectEqual(toRect, fromRect)) { target.prevFromRect = fromRect; target.prevToRect = toRect; if (!time) { time = _this.options.animation; } _this.animate(target, animatingRect, toRect, time); } if (time) { animating = true; animationTime = Math.max(animationTime, time); clearTimeout(target.animationResetTimer); target.animationResetTimer = setTimeout(function () { target.animationTime = 0; target.prevFromRect = null; target.fromRect = null; target.prevToRect = null; target.thisAnimationDuration = null; }, time); target.thisAnimationDuration = time; } }); clearTimeout(animationCallbackId); if (!animating) { if (typeof callback === 'function') callback(); } else { animationCallbackId = setTimeout(function () { if (typeof callback === 'function') callback(); }, animationTime); } animationStates = []; }, animate: function animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); var elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, translateX = (currentRect.left - toRect.left) / (scaleX || 1), translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); this.forRepaintDummy = repaint(target); // repaint css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : '')); css(target, 'transform', 'translate3d(0,0,0)'); typeof target.animated === 'number' && clearTimeout(target.animated); target.animated = setTimeout(function () { css(target, 'transition', ''); css(target, 'transform', ''); target.animated = false; target.animatingX = false; target.animatingY = false; }, duration); } } }; } function repaint(target) { return target.offsetWidth; } function calculateRealTime(animatingRect, fromRect, toRect, options) { return Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) * options.animation; } var plugins = []; var defaults = { initializeByDefault: true }; var PluginManager = { mount: function mount(plugin) { // Set default static properties for (var option in defaults) { if (defaults.hasOwnProperty(option) && !(option in plugin)) { plugin[option] = defaults[option]; } } plugins.forEach(function (p) { if (p.pluginName === plugin.pluginName) { throw "Sortable: Cannot mount plugin ".concat(plugin.pluginName, " more than once"); } }); plugins.push(plugin); }, pluginEvent: function pluginEvent(eventName, sortable, evt) { var _this = this; this.eventCanceled = false; evt.cancel = function () { _this.eventCanceled = true; }; var eventNameGlobal = eventName + 'Global'; plugins.forEach(function (plugin) { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if (sortable[plugin.pluginName][eventNameGlobal]) { sortable[plugin.pluginName][eventNameGlobal](_objectSpread2({ sortable: sortable }, evt)); } // Only fire plugin event if plugin is enabled in this sortable, // and plugin has event defined if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { sortable[plugin.pluginName][eventName](_objectSpread2({ sortable: sortable }, evt)); } }); }, initializePlugins: function initializePlugins(sortable, el, defaults, options) { plugins.forEach(function (plugin) { var pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; var initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin _extends(defaults, initialized.defaults); }); for (var option in sortable.options) { if (!sortable.options.hasOwnProperty(option)) continue; var modified = this.modifyOption(sortable, option, sortable.options[option]); if (typeof modified !== 'undefined') { sortable.options[option] = modified; } } }, getEventProperties: function getEventProperties(name, sortable) { var eventProperties = {}; plugins.forEach(function (plugin) { if (typeof plugin.eventProperties !== 'function') return; _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); return eventProperties; }, modifyOption: function modifyOption(sortable, name, value) { var modifiedValue; plugins.forEach(function (plugin) { // Plugin must exist on the Sortable if (!sortable[plugin.pluginName]) return; // If static option listener exists for this option, call in the context of the Sortable's instance of this plugin if (plugin.optionListeners && typeof plugin.optionListeners[name] === 'function') { modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value); } }); return modifiedValue; } }; function dispatchEvent(_ref) { var sortable = _ref.sortable, rootEl = _ref.rootEl, name = _ref.name, targetEl = _ref.targetEl, cloneEl = _ref.cloneEl, toEl = _ref.toEl, fromEl = _ref.fromEl, oldIndex = _ref.oldIndex, newIndex = _ref.newIndex, oldDraggableIndex = _ref.oldDraggableIndex, newDraggableIndex = _ref.newDraggableIndex, originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, extraEventProperties = _ref.extraEventProperties; sortable = sortable || rootEl && rootEl[expando]; if (!sortable) return; var evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent(name, { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent(name, true, true); } evt.to = toEl || rootEl; evt.from = fromEl || rootEl; evt.item = targetEl || rootEl; evt.clone = cloneEl; evt.oldIndex = oldIndex; evt.newIndex = newIndex; evt.oldDraggableIndex = oldDraggableIndex; evt.newDraggableIndex = newDraggableIndex; evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; var allEventProperties = _objectSpread2(_objectSpread2({}, extraEventProperties), PluginManager.getEventProperties(name, sortable)); for (var option in allEventProperties) { evt[option] = allEventProperties[option]; } if (rootEl) { rootEl.dispatchEvent(evt); } if (options[onName]) { options[onName].call(sortable, evt); } } var _excluded = ["evt"]; var pluginEvent = function pluginEvent(eventName, sortable) { var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, originalEvent = _ref.evt, data = _objectWithoutProperties(_ref, _excluded); PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread2({ dragEl: dragEl, parentEl: parentEl, ghostEl: ghostEl, rootEl: rootEl, nextEl: nextEl, lastDownEl: lastDownEl, cloneEl: cloneEl, cloneHidden: cloneHidden, dragStarted: moved, putSortable: putSortable, activeSortable: Sortable.active, originalEvent: originalEvent, oldIndex: oldIndex, oldDraggableIndex: oldDraggableIndex, newIndex: newIndex, newDraggableIndex: newDraggableIndex, hideGhostForTarget: _hideGhostForTarget, unhideGhostForTarget: _unhideGhostForTarget, cloneNowHidden: function cloneNowHidden() { cloneHidden = true; }, cloneNowShown: function cloneNowShown() { cloneHidden = false; }, dispatchSortableEvent: function dispatchSortableEvent(name) { _dispatchEvent({ sortable: sortable, name: name, originalEvent: originalEvent }); } }, data)); }; function _dispatchEvent(info) { dispatchEvent(_objectSpread2({ putSortable: putSortable, cloneEl: cloneEl, targetEl: dragEl, rootEl: rootEl, oldIndex: oldIndex, oldDraggableIndex: oldDraggableIndex, newIndex: newIndex, newDraggableIndex: newDraggableIndex }, info)); } var dragEl, parentEl, ghostEl, rootEl, nextEl, lastDownEl, cloneEl, cloneHidden, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, activeGroup, putSortable, awaitingDragStarted = false, ignoreNextClick = false, sortables = [], tapEvt, touchEvt, lastDx, lastDy, tapDistanceLeft, tapDistanceTop, moved, lastTarget, lastDirection, pastFirstInvertThresh = false, isCircumstantialInvert = false, targetMoveDistance, // For positioning ghost absolutely ghostRelativeParent, ghostRelativeParentInitialScroll = [], // (left, top) _silent = false, savedInputChecked = []; /** @const */ var documentExists = typeof document !== 'undefined', PositionGhostAbsolutely = IOS, CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float', // This will not pass for IE9, because IE9 DnD only works on anchors supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'), supportCssPointerEvents = function () { if (!documentExists) return; // false when <= IE11 if (IE11OrLess) { return false; } var el = document.createElement('x'); el.style.cssText = 'pointer-events:auto'; return el.style.pointerEvents === 'auto'; }(), _detectDirection = function _detectDirection(el, options) { var elCSS = css(el), elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth), child1 = getChild(el, 0, options), child2 = getChild(el, 1, options), firstChildCSS = child1 && css(child1), secondChildCSS = child2 && css(child2), firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width, secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width; if (elCSS.display === 'flex') { return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal'; } if (elCSS.display === 'grid') { return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } return child1 && (firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth) ? 'vertical' : 'horizontal'; }, _dragElInRowColumn = function _dragElInRowColumn(dragRect, targetRect, vertical) { var dragElS1Opp = vertical ? dragRect.left : dragRect.top, dragElS2Opp = vertical ? dragRect.right : dragRect.bottom, dragElOppLength = vertical ? dragRect.width : dragRect.height, targetS1Opp = vertical ? targetRect.left : targetRect.top, targetS2Opp = vertical ? targetRect.right : targetRect.bottom, targetOppLength = vertical ? targetRect.width : targetRect.height; return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2; }, /** * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold. * @param {Number} x X position * @param {Number} y Y position * @return {HTMLElement} Element of the first found nearest Sortable */ _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { var ret; sortables.some(function (sortable) { var threshold = sortable[expando].options.emptyInsertThreshold; if (!threshold || lastChild(sortable)) return; var rect = getRect(sortable), insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold, insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold; if (insideHorizontally && insideVertically) { return ret = sortable; } }); return ret; }, _prepareGroup = function _prepareGroup(options) { function toFn(value, pull) { return function (to, from, dragEl, evt) { var sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name; if (value == null && (pull || sameGroup)) { // Default pull value // Default pull and put value if same group return true; } else if (value == null || value === false) { return false; } else if (pull && value === 'clone') { return value; } else if (typeof value === 'function') { return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt); } else { var otherGroup = (pull ? to : from).options.group.name; return value === true || typeof value === 'string' && value === otherGroup || value.join && value.indexOf(otherGroup) > -1; } }; } var group = {}; var originalGroup = options.group; if (!originalGroup || _typeof(originalGroup) != 'object') { originalGroup = { name: originalGroup }; } group.name = originalGroup.name; group.checkPull = toFn(originalGroup.pull, true); group.checkPut = toFn(originalGroup.put); group.revertClone = originalGroup.revertClone; options.group = group; }, _hideGhostForTarget = function _hideGhostForTarget() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', 'none'); } }, _unhideGhostForTarget = function _unhideGhostForTarget() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', ''); } }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position if (documentExists && !ChromeForAndroid) { document.addEventListener('click', function (evt) { if (ignoreNextClick) { evt.preventDefault(); evt.stopPropagation && evt.stopPropagation(); evt.stopImmediatePropagation && evt.stopImmediatePropagation(); ignoreNextClick = false; return false; } }, true); } var nearestEmptyInsertDetectEvent = function nearestEmptyInsertDetectEvent(evt) { if (dragEl) { evt = evt.touches ? evt.touches[0] : evt; var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY); if (nearest) { // Create imitation event var event = {}; for (var i in evt) { if (evt.hasOwnProperty(i)) { event[i] = evt[i]; } } event.target = event.rootEl = nearest; event.preventDefault = void 0; event.stopPropagation = void 0; nearest[expando]._onDragOver(event); } } }; var _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) { if (dragEl) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); } }; /** * @class Sortable * @param {HTMLElement} el * @param {Object} [options] */ function Sortable(el, options) { if (!(el && el.nodeType && el.nodeType === 1)) { throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(el)); } this.el = el; // root element this.options = options = _extends({}, options); // Export instance el[expando] = this; var defaults = { group: null, sort: true, disabled: false, store: null, handle: null, draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*', swapThreshold: 1, // percentage; 0 <= x <= 1 invertSwap: false, // invert always invertedSwapThreshold: null, // will be set to same as swapThreshold if default removeCloneOnHide: true, direction: function direction() { return _detectDirection(el, this.options); }, ghostClass: 'sortable-ghost', chosenClass: 'sortable-chosen', dragClass: 'sortable-drag', ignore: 'a, img', filter: null, preventOnFilter: true, animation: 0, easing: null, setData: function setData(dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent); }, dropBubble: false, dragoverBubble: false, dataIdAttr: 'data-id', delay: 0, delayOnTouchOnly: false, touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1, forceFallback: false, fallbackClass: 'sortable-fallback', fallbackOnBody: false, fallbackTolerance: 0, fallbackOffset: { x: 0, y: 0 }, // Disabled on Safari: #1571; Enabled on Safari IOS: #2244 supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && (!Safari || IOS), emptyInsertThreshold: 5 }; PluginManager.initializePlugins(this, el, defaults); // Set default options for (var name in defaults) { !(name in options) && (options[name] = defaults[name]); } _prepareGroup(options); // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } // Setup drag mode this.nativeDraggable = options.forceFallback ? false : supportDraggable; if (this.nativeDraggable) { // Touch start threshold cannot be greater than the native dragstart threshold this.options.touchStartThreshold = 1; } // Bind events if (options.supportPointer) { on(el, 'pointerdown', this._onTapStart); } else { on(el, 'mousedown', this._onTapStart); on(el, 'touchstart', this._onTapStart); } if (this.nativeDraggable) { on(el, 'dragover', this); on(el, 'dragenter', this); } sortables.push(this.el); // Restore sorting options.store && options.store.get && this.sort(options.store.get(this) || []); // Add animation state manager _extends(this, AnimationStateManager()); } Sortable.prototype = /** @lends Sortable.prototype */{ constructor: Sortable, _isOutsideThisEl: function _isOutsideThisEl(target) { if (!this.el.contains(target) && target !== this.el) { lastTarget = null; } }, _getDirection: function _getDirection(evt, target) { return typeof this.options.direction === 'function' ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction; }, _onTapStart: function _onTapStart( /** Event|TouchEvent */evt) { if (!evt.cancelable) return; var _this = this, el = this.el, options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, target = (touch || evt).target, originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, filter = options.filter; _saveInputCheckedState(el); // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group. if (dragEl) { return; } if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) { return; // only left button and enabled } // cancel dnd if original target is content editable if (originalTarget.isContentEditable) { return; } // Safari ignores further event handling after mousedown if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') { return; } target = closest(target, options.draggable, el, false); if (target && target.animated) { return; } if (lastDownEl === target) { // Ignoring duplicate `down` return; } // Get the index of the dragged element within its parent oldIndex = index(target); oldDraggableIndex = index(target, options.draggable); // Check filter if (typeof filter === 'function') { if (filter.call(this, evt, target, this)) { _dispatchEvent({ sortable: _this, rootEl: originalTarget, name: 'filter', targetEl: target, toEl: el, fromEl: el }); pluginEvent('filter', _this, { evt: evt }); preventOnFilter && evt.preventDefault(); return; // cancel dnd } } else if (filter) { filter = filter.split(',').some(function (criteria) { criteria = closest(originalTarget, criteria.trim(), el, false); if (criteria) { _dispatchEvent({ sortable: _this, rootEl: criteria, name: 'filter', targetEl: target, fromEl: el, toEl: el }); pluginEvent('filter', _this, { evt: evt }); return true; } }); if (filter) { preventOnFilter && evt.preventDefault(); return; // cancel dnd } } if (options.handle && !closest(originalTarget, options.handle, el, false)) { return; } // Prepare `dragstart` this._prepareDragStart(evt, touch, target); }, _prepareDragStart: function _prepareDragStart( /** Event */evt, /** Touch */touch, /** HTMLElement */target) { var _this = this, el = _this.el, options = _this.options, ownerDocument = el.ownerDocument, dragStartFn; if (target && !dragEl && target.parentNode === el) { var dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; nextEl = dragEl.nextSibling; lastDownEl = target; activeGroup = options.group; Sortable.dragged = dragEl; tapEvt = { target: dragEl, clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; tapDistanceLeft = tapEvt.clientX - dragRect.left; tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; dragStartFn = function dragStartFn() { pluginEvent('delayEnded', _this, { evt: evt }); if (Sortable.eventCanceled) { _this._onDrop(); return; } // Delayed drag has been triggered // we can re-enable the events: touchmove/mousemove _this._disableDelayedDragEvents(); if (!FireFox && _this.nativeDraggable) { dragEl.draggable = true; } // Bind the events: dragstart/dragend _this._triggerDragStart(evt, touch); // Drag start event _dispatchEvent({ sortable: _this, name: 'choose', originalEvent: evt }); // Chosen item toggleClass(dragEl, options.chosenClass, true); }; // Disable "draggable" options.ignore.split(',').forEach(function (criteria) { find(dragEl, criteria.trim(), _disableDraggable); }); on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent); on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent); on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent); if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._onDrop); // Native D&D triggers pointercancel !this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop); } else { on(ownerDocument, 'mouseup', _this._onDrop); on(ownerDocument, 'touchend', _this._onDrop); on(ownerDocument, 'touchcancel', _this._onDrop); } // Make dragEl draggable (must be before delay for FireFox) if (FireFox && this.nativeDraggable) { this.options.touchStartThreshold = 4; dragEl.draggable = true; } pluginEvent('delayStart', this, { evt: evt }); // Delay is impossible for native DnD in Edge or IE if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) { if (Sortable.eventCanceled) { this._onDrop(); return; } // If the user moves the pointer or let go the click or touch // before the delay has been reached: // disable the delayed drag if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._disableDelayedDrag); on(ownerDocument, 'pointercancel', _this._disableDelayedDrag); } else { on(ownerDocument, 'mouseup', _this._disableDelayedDrag); on(ownerDocument, 'touchend', _this._disableDelayedDrag); on(ownerDocument, 'touchcancel', _this._disableDelayedDrag); } on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler); on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler); options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler); _this._dragStartTimer = setTimeout(dragStartFn, options.delay); } else { dragStartFn(); } } }, _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler( /** TouchEvent|PointerEvent **/e) { var touch = e.touches ? e.touches[0] : e; if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) { this._disableDelayedDrag(); } }, _disableDelayedDrag: function _disableDelayedDrag() { dragEl && _disableDraggable(dragEl); clearTimeout(this._dragStartTimer); this._disableDelayedDragEvents(); }, _disableDelayedDragEvents: function _disableDelayedDragEvents() { var ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._disableDelayedDrag); off(ownerDocument, 'touchend', this._disableDelayedDrag); off(ownerDocument, 'touchcancel', this._disableDelayedDrag); off(ownerDocument, 'pointerup', this._disableDelayedDrag); off(ownerDocument, 'pointercancel', this._disableDelayedDrag); off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler); }, _triggerDragStart: function _triggerDragStart( /** Event */evt, /** Touch */touch) { touch = touch || evt.pointerType == 'touch' && evt; if (!this.nativeDraggable || touch) { if (this.options.supportPointer) { on(document, 'pointermove', this._onTouchMove); } else if (touch) { on(document, 'touchmove', this._onTouchMove); } else { on(document, 'mousemove', this._onTouchMove); } } else { on(dragEl, 'dragend', this); on(rootEl, 'dragstart', this._onDragStart); } try { if (document.selection) { _nextTick(function () { document.selection.empty(); }); } else { window.getSelection().removeAllRanges(); } } catch (err) {} }, _dragStarted: function _dragStarted(fallback, evt) { awaitingDragStarted = false; if (rootEl && dragEl) { pluginEvent('dragStarted', this, { evt: evt }); if (this.nativeDraggable) { on(document, 'dragover', _checkOutsideTargetEl); } var options = this.options; // Apply effect !fallback && toggleClass(dragEl, options.dragClass, false); toggleClass(dragEl, options.ghostClass, true); Sortable.active = this; fallback && this._appendGhost(); // Drag start event _dispatchEvent({ sortable: this, name: 'start', originalEvent: evt }); } else { this._nulling(); } }, _emulateDragOver: function _emulateDragOver() { if (touchEvt) { this._lastX = touchEvt.clientX; this._lastY = touchEvt.clientY; _hideGhostForTarget(); var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY); var parent = target; while (target && target.shadowRoot) { target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY); if (target === parent) break; parent = target; } dragEl.parentNode[expando]._isOutsideThisEl(target); if (parent) { do { if (parent[expando]) { var inserted = void 0; inserted = parent[expando]._onDragOver({ clientX: touchEvt.clientX, clientY: touchEvt.clientY, target: target, rootEl: parent }); if (inserted && !this.options.dragoverBubble) { break; } } target = parent; // store last element } /* jshint boss:true */ while (parent = getParentOrHost(parent)); } _unhideGhostForTarget(); } }, _onTouchMove: function _onTouchMove( /**TouchEvent*/evt) { if (tapEvt) { var options = this.options, fallbackTolerance = options.fallbackTolerance, fallbackOffset = options.fallbackOffset, touch = evt.touches ? evt.touches[0] : evt, ghostMatrix = ghostEl && matrix(ghostEl, true), scaleX = ghostEl && ghostMatrix && ghostMatrix.a, scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { return; } this._onDragStart(evt, true); } if (ghostEl) { if (ghostMatrix) { ghostMatrix.e += dx - (lastDx || 0); ghostMatrix.f += dy - (lastDy || 0); } else { ghostMatrix = { a: 1, b: 0, c: 0, d: 1, e: dx, f: dy }; } var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); css(ghostEl, 'webkitTransform', cssMatrix); css(ghostEl, 'mozTransform', cssMatrix); css(ghostEl, 'msTransform', cssMatrix); css(ghostEl, 'transform', cssMatrix); lastDx = dx; lastDy = dy; touchEvt = touch; } evt.cancelable && evt.preventDefault(); } }, _appendGhost: function _appendGhost() { // Bug if using scale(): https://stackoverflow.com/questions/2637058 // Not being adjusted for if (!ghostEl) { var container = this.options.fallbackOnBody ? document.body : rootEl, rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container), options = this.options; // Position absolutely if (PositionGhostAbsolutely) { // Get relatively positioned parent ghostRelativeParent = container; while (css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) { ghostRelativeParent = ghostRelativeParent.parentNode; } if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) { if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement(); rect.top += ghostRelativeParent.scrollTop; rect.left += ghostRelativeParent.scrollLeft; } else { ghostRelativeParent = getWindowScrollingElement(); } ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent); } ghostEl = dragEl.cloneNode(true); toggleClass(ghostEl, options.ghostClass, false); toggleClass(ghostEl, options.fallbackClass, true); toggleClass(ghostEl, options.dragClass, true); css(ghostEl, 'transition', ''); css(ghostEl, 'transform', ''); css(ghostEl, 'box-sizing', 'border-box'); css(ghostEl, 'margin', 0); css(ghostEl, 'top', rect.top); css(ghostEl, 'left', rect.left); css(ghostEl, 'width', rect.width); css(ghostEl, 'height', rect.height); css(ghostEl, 'opacity', '0.8'); css(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed'); css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; container.appendChild(ghostEl); // Set transform-origin css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); } }, _onDragStart: function _onDragStart( /**Event*/evt, /**boolean*/fallback) { var _this = this; var dataTransfer = evt.dataTransfer; var options = _this.options; pluginEvent('dragStart', this, { evt: evt }); if (Sortable.eventCanceled) { this._onDrop(); return; } pluginEvent('setupClone', this); if (!Sortable.eventCanceled) { cloneEl = clone(dragEl); cloneEl.removeAttribute("id"); cloneEl.draggable = false; cloneEl.style['will-change'] = ''; this._hideClone(); toggleClass(cloneEl, this.options.chosenClass, false); Sortable.clone = cloneEl; } // #1143: IFrame support workaround _this.cloneId = _nextTick(function () { pluginEvent('clone', _this); if (Sortable.eventCanceled) return; if (!_this.options.removeCloneOnHide) { rootEl.insertBefore(cloneEl, dragEl); } _this._hideClone(); _dispatchEvent({ sortable: _this, name: 'clone' }); }); !fallback && toggleClass(dragEl, options.dragClass, true); // Set proper drop events if (fallback) { ignoreNextClick = true; _this._loopId = setInterval(_this._emulateDragOver, 50); } else { // Undo what was set in _prepareDragStart before drag started off(document, 'mouseup', _this._onDrop); off(document, 'touchend', _this._onDrop); off(document, 'touchcancel', _this._onDrop); if (dataTransfer) { dataTransfer.effectAllowed = 'move'; options.setData && options.setData.call(_this, dataTransfer, dragEl); } on(document, 'drop', _this); // #1276 fix: css(dragEl, 'transform', 'translateZ(0)'); } awaitingDragStarted = true; _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt)); on(document, 'selectstart', _this); moved = true; window.getSelection().removeAllRanges(); if (Safari) { css(document.body, 'user-select', 'none'); } }, // Returns true - if no further action is needed (either inserted or another condition) _onDragOver: function _onDragOver( /**Event*/evt) { var el = this.el, target = evt.target, dragRect, targetRect, revert, options = this.options, group = options.group, activeSortable = Sortable.active, isOwner = activeGroup === group, canSort = options.sort, fromSortable = putSortable || activeSortable, vertical, _this = this, completedFired = false; if (_silent) return; function dragOverEvent(name, extra) { pluginEvent(name, _this, _objectSpread2({ evt: evt, isOwner: isOwner, axis: vertical ? 'vertical' : 'horizontal', revert: revert, dragRect: dragRect, targetRect: targetRect, canSort: canSort, fromSortable: fromSortable, target: target, completed: completed, onMove: function onMove(target, after) { return _onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after); }, changed: changed }, extra)); } // Capture animation state function capture() { dragOverEvent('dragOverAnimationCapture'); _this.captureAnimationState(); if (_this !== fromSortable) { fromSortable.captureAnimationState(); } } // Return invocation when dragEl is inserted (or completed) function completed(insertion) { dragOverEvent('dragOverCompleted', { insertion: insertion }); if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } else { activeSortable._showClone(_this); } if (_this !== fromSortable) { // Set ghost class to new sortable's ghost class toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false); toggleClass(dragEl, options.ghostClass, true); } if (putSortable !== _this && _this !== Sortable.active) { putSortable = _this; } else if (_this === Sortable.active && putSortable) { putSortable = null; } // Animation if (fromSortable === _this) { _this._ignoreWhileAnimating = target; } _this.animateAll(function () { dragOverEvent('dragOverAnimationComplete'); _this._ignoreWhileAnimating = null; }); if (_this !== fromSortable) { fromSortable.animateAll(); fromSortable._ignoreWhileAnimating = null; } } // Null lastTarget if it is not inside a previously swapped element if (target === dragEl && !dragEl.animated || target === el && !target.animated) { lastTarget = null; } // no bubbling and not fallback if (!options.dragoverBubble && !evt.rootEl && target !== document) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); // Do not detect for empty insert if already inserted !insertion && nearestEmptyInsertDetectEvent(evt); } !options.dragoverBubble && evt.stopPropagation && evt.stopPropagation(); return completedFired = true; } // Call when dragEl has been inserted function changed() { newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); _dispatchEvent({ sortable: _this, name: 'change', toEl: el, newIndex: newIndex, newDraggableIndex: newDraggableIndex, originalEvent: evt }); } if (evt.preventDefault !== void 0) { evt.cancelable && evt.preventDefault(); } target = closest(target, options.draggable, el, true); dragOverEvent('dragOver'); if (Sortable.eventCanceled) return completedFired; if (dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target) { return completed(false); } ignoreNextClick = false; if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = parentEl !== rootEl) // Reverting item into the original list : putSortable === this || (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt))) { vertical = this._getDirection(evt, target) === 'vertical'; dragRect = getRect(dragEl); dragOverEvent('dragOverValid'); if (Sortable.eventCanceled) return completedFired; if (revert) { parentEl = rootEl; // actualization capture(); this._hideClone(); dragOverEvent('revert'); if (!Sortable.eventCanceled) { if (nextEl) { rootEl.insertBefore(dragEl, nextEl); } else { rootEl.appendChild(dragEl); } } return completed(true); } var elLastChild = lastChild(el, options.draggable); if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) { // Insert to end of list // If already at end of list: Do not insert if (elLastChild === dragEl) { return completed(false); } // if there is a last element, it is the target if (elLastChild && el === evt.target) { target = elLastChild; } if (target) { targetRect = getRect(target); } if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) { capture(); if (elLastChild && elLastChild.nextSibling) { // the last draggable element is not the last node el.insertBefore(dragEl, elLastChild.nextSibling); } else { el.appendChild(dragEl); } parentEl = el; // actualization changed(); return completed(true); } } else if (elLastChild && _ghostIsFirst(evt, vertical, this)) { // Insert to start of list var firstChild = getChild(el, 0, options, true); if (firstChild === dragEl) { return completed(false); } target = firstChild; targetRect = getRect(target); if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) { capture(); el.insertBefore(dragEl, firstChild); parentEl = el; // actualization changed(); return completed(true); } } else if (target.parentNode === el) { targetRect = getRect(target); var direction = 0, targetBeforeFirstSwap, differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { targetBeforeFirstSwap = targetRect[side1]; pastFirstInvertThresh = false; isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel; } direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target); var sibling; if (direction !== 0) { // Check if target is beside dragEl in respective direction (ignoring hidden elements) var dragIndex = index(dragEl); do { dragIndex -= direction; sibling = parentEl.children[dragIndex]; } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl)); } // If dragEl is already beside target: Do not insert if (direction === 0 || sibling === target) { return completed(false); } lastTarget = target; lastDirection = direction; var nextSibling = target.nextElementSibling, after = false; after = direction === 1; var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after); if (moveVector !== false) { if (moveVector === 1 || moveVector === -1) { after = moveVector === 1; } _silent = true; setTimeout(_unsilent, 30); capture(); if (after && !nextSibling) { el.appendChild(dragEl); } else { target.parentNode.insertBefore(dragEl, after ? nextSibling : target); } // Undo chrome's scroll adjustment (has no effect on other browsers) if (scrolledPastTop) { scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop); } parentEl = dragEl.parentNode; // actualization // must be done before animation if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) { targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]); } changed(); return completed(true); } } if (el.contains(dragEl)) { return completed(false); } } return false; }, _ignoreWhileAnimating: null, _offMoveEvents: function _offMoveEvents() { off(document, 'mousemove', this._onTouchMove); off(document, 'touchmove', this._onTouchMove); off(document, 'pointermove', this._onTouchMove); off(document, 'dragover', nearestEmptyInsertDetectEvent); off(document, 'mousemove', nearestEmptyInsertDetectEvent); off(document, 'touchmove', nearestEmptyInsertDetectEvent); }, _offUpEvents: function _offUpEvents() { var ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._onDrop); off(ownerDocument, 'touchend', this._onDrop); off(ownerDocument, 'pointerup', this._onDrop); off(ownerDocument, 'pointercancel', this._onDrop); off(ownerDocument, 'touchcancel', this._onDrop); off(document, 'selectstart', this); }, _onDrop: function _onDrop( /**Event*/evt) { var el = this.el, options = this.options; // Get the index of the dragged element within its parent newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt: evt }); parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); if (Sortable.eventCanceled) { this._nulling(); return; } awaitingDragStarted = false; isCircumstantialInvert = false; pastFirstInvertThresh = false; clearInterval(this._loopId); clearTimeout(this._dragStartTimer); _cancelNextTick(this.cloneId); _cancelNextTick(this._dragStartId); // Unbind events if (this.nativeDraggable) { off(document, 'drop', this); off(el, 'dragstart', this._onDragStart); } this._offMoveEvents(); this._offUpEvents(); if (Safari) { css(document.body, 'user-select', ''); } css(dragEl, 'transform', ''); if (evt) { if (moved) { evt.cancelable && evt.preventDefault(); !options.dropBubble && evt.stopPropagation(); } ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl); if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { // Remove clone(s) cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl); } if (dragEl) { if (this.nativeDraggable) { off(dragEl, 'dragend', this); } _disableDraggable(dragEl); dragEl.style['will-change'] = ''; // Remove classes // ghostClass is added in dragStarted if (moved && !awaitingDragStarted) { toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false); } toggleClass(dragEl, this.options.chosenClass, false); // Drag stop event _dispatchEvent({ sortable: this, name: 'unchoose', toEl: parentEl, newIndex: null, newDraggableIndex: null, originalEvent: evt }); if (rootEl !== parentEl) { if (newIndex >= 0) { // Add event _dispatchEvent({ rootEl: parentEl, name: 'add', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); // Remove event _dispatchEvent({ sortable: this, name: 'remove', toEl: parentEl, originalEvent: evt }); // drag from one list and drop into another _dispatchEvent({ rootEl: parentEl, name: 'sort', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } putSortable && putSortable.save(); } else { if (newIndex !== oldIndex) { if (newIndex >= 0) { // drag & drop within the same list _dispatchEvent({ sortable: this, name: 'update', toEl: parentEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } } } if (Sortable.active) { /* jshint eqnull:true */ if (newIndex == null || newIndex === -1) { newIndex = oldIndex; newDraggableIndex = oldDraggableIndex; } _dispatchEvent({ sortable: this, name: 'end', toEl: parentEl, originalEvent: evt }); // Save sorting this.save(); } } } this._nulling(); }, _nulling: function _nulling() { pluginEvent('nulling', this); rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null; var el = this.el; savedInputChecked.forEach(function (checkEl) { if (el.contains(checkEl)) { checkEl.checked = true; } }); savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function handleEvent( /**Event*/evt) { switch (evt.type) { case 'drop': case 'dragend': this._onDrop(evt); break; case 'dragenter': case 'dragover': if (dragEl) { this._onDragOver(evt); _globalDragOver(evt); } break; case 'selectstart': evt.preventDefault(); break; } }, /** * Serializes the item into an array of string. * @returns {String[]} */ toArray: function toArray() { var order = [], el, children = this.el.children, i = 0, n = children.length, options = this.options; for (; i < n; i++) { el = children[i]; if (closest(el, options.draggable, this.el, false)) { order.push(el.getAttribute(options.dataIdAttr) || _generateId(el)); } } return order; }, /** * Sorts the elements according to the array. * @param {String[]} order order of the items */ sort: function sort(order, useAnimation) { var items = {}, rootEl = this.el; this.toArray().forEach(function (id, i) { var el = rootEl.children[i]; if (closest(el, this.options.draggable, rootEl, false)) { items[id] = el; } }, this); useAnimation && this.captureAnimationState(); order.forEach(function (id) { if (items[id]) { rootEl.removeChild(items[id]); rootEl.appendChild(items[id]); } }); useAnimation && this.animateAll(); }, /** * Save the current sorting */ save: function save() { var store = this.options.store; store && store.set && store.set(this); }, /** * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. * @param {HTMLElement} el * @param {String} [selector] default: `options.draggable` * @returns {HTMLElement|null} */ closest: function closest$1(el, selector) { return closest(el, selector || this.options.draggable, this.el, false); }, /** * Set/get option * @param {string} name * @param {*} [value] * @returns {*} */ option: function option(name, value) { var options = this.options; if (value === void 0) { return options[name]; } else { var modifiedValue = PluginManager.modifyOption(this, name, value); if (typeof modifiedValue !== 'undefined') { options[name] = modifiedValue; } else { options[name] = value; } if (name === 'group') { _prepareGroup(options); } } }, /** * Destroy */ destroy: function destroy() { pluginEvent('destroy', this); var el = this.el; el[expando] = null; off(el, 'mousedown', this._onTapStart); off(el, 'touchstart', this._onTapStart); off(el, 'pointerdown', this._onTapStart); if (this.nativeDraggable) { off(el, 'dragover', this); off(el, 'dragenter', this); } // Remove draggable attributes Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) { el.removeAttribute('draggable'); }); this._onDrop(); this._disableDelayedDragEvents(); sortables.splice(sortables.indexOf(this.el), 1); this.el = el = null; }, _hideClone: function _hideClone() { if (!cloneHidden) { pluginEvent('hideClone', this); if (Sortable.eventCanceled) return; css(cloneEl, 'display', 'none'); if (this.options.removeCloneOnHide && cloneEl.parentNode) { cloneEl.parentNode.removeChild(cloneEl); } cloneHidden = true; } }, _showClone: function _showClone(putSortable) { if (putSortable.lastPutMode !== 'clone') { this._hideClone(); return; } if (cloneHidden) { pluginEvent('showClone', this); if (Sortable.eventCanceled) return; // show clone at dragEl or original position if (dragEl.parentNode == rootEl && !this.options.group.revertClone) { rootEl.insertBefore(cloneEl, dragEl); } else if (nextEl) { rootEl.insertBefore(cloneEl, nextEl); } else { rootEl.appendChild(cloneEl); } if (this.options.group.revertClone) { this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); cloneHidden = false; } } }; function _globalDragOver( /**Event*/evt) { if (evt.dataTransfer) { evt.dataTransfer.dropEffect = 'move'; } evt.cancelable && evt.preventDefault(); } function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) { var evt, sortable = fromEl[expando], onMoveFn = sortable.options.onMove, retVal; // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent('move', { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent('move', true, true); } evt.to = toEl; evt.from = fromEl; evt.dragged = dragEl; evt.draggedRect = dragRect; evt.related = targetEl || toEl; evt.relatedRect = targetRect || getRect(toEl); evt.willInsertAfter = willInsertAfter; evt.originalEvent = originalEvent; fromEl.dispatchEvent(evt); if (onMoveFn) { retVal = onMoveFn.call(sortable, evt, originalEvent); } return retVal; } function _disableDraggable(el) { el.draggable = false; } function _unsilent() { _silent = false; } function _ghostIsFirst(evt, vertical, sortable) { var firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true)); var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); var spacer = 10; return vertical ? evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left; } function _ghostIsLast(evt, vertical, sortable) { var lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable)); var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); var spacer = 10; return vertical ? evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top; } function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) { var mouseOnAxis = vertical ? evt.clientY : evt.clientX, targetLength = vertical ? targetRect.height : targetRect.width, targetS1 = vertical ? targetRect.top : targetRect.left, targetS2 = vertical ? targetRect.bottom : targetRect.right, invert = false; if (!invertSwap) { // Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) { // multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2 // check if past first invert threshold on side opposite of lastDirection if (!pastFirstInvertThresh && (lastDirection === 1 ? mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 : mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2)) { // past first invert threshold, do not restrict inverted threshold to dragEl shadow pastFirstInvertThresh = true; } if (!pastFirstInvertThresh) { // dragEl shadow (target move distance shadow) if (lastDirection === 1 ? mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow : mouseOnAxis > targetS2 - targetMoveDistance) { return -lastDirection; } } else { invert = true; } } else { // Regular if (mouseOnAxis > targetS1 + targetLength * (1 - swapThreshold) / 2 && mouseOnAxis < targetS2 - targetLength * (1 - swapThreshold) / 2) { return _getInsertDirection(target); } } } invert = invert || invertSwap; if (invert) { // Invert of regular if (mouseOnAxis < targetS1 + targetLength * invertedSwapThreshold / 2 || mouseOnAxis > targetS2 - targetLength * invertedSwapThreshold / 2) { return mouseOnAxis > targetS1 + targetLength / 2 ? 1 : -1; } } return 0; } /** * Gets the direction dragEl must be swapped relative to target in order to make it * seem that dragEl has been "inserted" into that element's position * @param {HTMLElement} target The target whose position dragEl is being inserted at * @return {Number} Direction dragEl must be swapped */ function _getInsertDirection(target) { if (index(dragEl) < index(target)) { return 1; } else { return -1; } } /** * Generate id * @param {HTMLElement} el * @returns {String} * @private */ function _generateId(el) { var str = el.tagName + el.className + el.src + el.href + el.textContent, i = str.length, sum = 0; while (i--) { sum += str.charCodeAt(i); } return sum.toString(36); } function _saveInputCheckedState(root) { savedInputChecked.length = 0; var inputs = root.getElementsByTagName('input'); var idx = inputs.length; while (idx--) { var el = inputs[idx]; el.checked && savedInputChecked.push(el); } } function _nextTick(fn) { return setTimeout(fn, 0); } function _cancelNextTick(id) { return clearTimeout(id); } // Fixed #973: if (documentExists) { on(document, 'touchmove', function (evt) { if ((Sortable.active || awaitingDragStarted) && evt.cancelable) { evt.preventDefault(); } }); } // Export utils Sortable.utils = { on: on, off: off, css: css, find: find, is: function is(el, selector) { return !!closest(el, selector, el, false); }, extend: extend, throttle: throttle, closest: closest, toggleClass: toggleClass, clone: clone, index: index, nextTick: _nextTick, cancelNextTick: _cancelNextTick, detectDirection: _detectDirection, getChild: getChild, expando: expando }; /** * Get the Sortable instance of an element * @param {HTMLElement} element The element * @return {Sortable|undefined} The instance of Sortable */ Sortable.get = function (element) { return element[expando]; }; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ Sortable.mount = function () { for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { plugins[_key] = arguments[_key]; } if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach(function (plugin) { if (!plugin.prototype || !plugin.prototype.constructor) { throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); } if (plugin.utils) Sortable.utils = _objectSpread2(_objectSpread2({}, Sortable.utils), plugin.utils); PluginManager.mount(plugin); }); }; /** * Create sortable instance * @param {HTMLElement} el * @param {Object} [options] */ Sortable.create = function (el, options) { return new Sortable(el, options); }; // Export Sortable.version = version; var autoScrolls = [], scrollEl, scrollRootEl, scrolling = false, lastAutoScrollX, lastAutoScrollY, touchEvt$1, pointerElemChangedInterval; function AutoScrollPlugin() { function AutoScroll() { this.defaults = { scroll: true, forceAutoScrollFallback: false, scrollSensitivity: 30, scrollSpeed: 10, bubbleScroll: true }; // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } } AutoScroll.prototype = { dragStarted: function dragStarted(_ref) { var originalEvent = _ref.originalEvent; if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); } else { on(document, 'mousemove', this._handleFallbackAutoScroll); } } }, dragOverCompleted: function dragOverCompleted(_ref2) { var originalEvent = _ref2.originalEvent; // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, drop: function drop() { if (this.sortable.nativeDraggable) { off(document, 'dragover', this._handleAutoScroll); } else { off(document, 'pointermove', this._handleFallbackAutoScroll); off(document, 'touchmove', this._handleFallbackAutoScroll); off(document, 'mousemove', this._handleFallbackAutoScroll); } clearPointerElemChangedInterval(); clearAutoScrolls(); cancelThrottle(); }, nulling: function nulling() { touchEvt$1 = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null; autoScrolls.length = 0; }, _handleFallbackAutoScroll: function _handleFallbackAutoScroll(evt) { this._handleAutoScroll(evt, true); }, _handleAutoScroll: function _handleAutoScroll(evt, fallback) { var _this = this; var x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt$1 = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, // MACOS Safari does not have autoscroll, // Firefox and Chrome are good if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) { autoScroll(evt, this.options, elem, fallback); // Listener for pointer element change var ogElemScroller = getParentAutoScrollElement(elem, true); if (scrolling && (!pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY)) { pointerElemChangedInterval && clearPointerElemChangedInterval(); // Detect for pointer elem change, emulating native DnD behaviour pointerElemChangedInterval = setInterval(function () { var newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true); if (newElem !== ogElemScroller) { ogElemScroller = newElem; clearAutoScrolls(); } autoScroll(evt, _this.options, newElem, fallback); }, 10); lastAutoScrollX = x; lastAutoScrollY = y; } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false); } } }; return _extends(AutoScroll, { pluginName: 'scroll', initializeByDefault: true }); } function clearAutoScrolls() { autoScrolls.forEach(function (autoScroll) { clearInterval(autoScroll.pid); }); autoScrolls = []; } function clearPointerElemChangedInterval() { clearInterval(pointerElemChangedInterval); } var autoScroll = throttle(function (evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; var x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); var scrollThisInstance = false, scrollCustomFn; // New scroll root, set scrollEl if (scrollRootEl !== rootEl) { scrollRootEl = rootEl; clearAutoScrolls(); scrollEl = options.scroll; scrollCustomFn = options.scrollFn; if (scrollEl === true) { scrollEl = getParentAutoScrollElement(rootEl, true); } } var layersOut = 0; var currentParent = scrollEl; do { var el = currentParent, rect = getRect(el), top = rect.top, bottom = rect.bottom, left = rect.left, right = rect.right, width = rect.width, height = rect.height, canScrollX = void 0, canScrollY = void 0, scrollWidth = el.scrollWidth, scrollHeight = el.scrollHeight, elCSS = css(el), scrollPosX = el.scrollLeft, scrollPosY = el.scrollTop; if (el === winScroller) { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible'); } else { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (var i = 0; i <= layersOut; i++) { if (!autoScrolls[i]) { autoScrolls[i] = {}; } } } if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) { autoScrolls[layersOut].el = el; autoScrolls[layersOut].vx = vx; autoScrolls[layersOut].vy = vy; clearInterval(autoScrolls[layersOut].pid); if (vx != 0 || vy != 0) { scrollThisInstance = true; /* jshint loopfunc:true */ autoScrolls[layersOut].pid = setInterval(function () { // emulate drag over during autoscroll (fallback), emulating native DnD behaviour if (isFallback && this.layer === 0) { Sortable.active._onTouchMove(touchEvt$1); // To move ghost if it is positioned absolutely } var scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0; var scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0; if (typeof scrollCustomFn === 'function') { if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt$1, autoScrolls[this.layer].el) !== 'continue') { return; } } scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY); }.bind({ layer: layersOut }), 24); } } layersOut++; } while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false))); scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not }, 30); var drop = function drop(_ref) { var originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, dragEl = _ref.dragEl, activeSortable = _ref.activeSortable, dispatchSortableEvent = _ref.dispatchSortableEvent, hideGhostForTarget = _ref.hideGhostForTarget, unhideGhostForTarget = _ref.unhideGhostForTarget; if (!originalEvent) return; var toSortable = putSortable || activeSortable; hideGhostForTarget(); var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; var target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); this.onSpill({ dragEl: dragEl, putSortable: putSortable }); } }; function Revert() {} Revert.prototype = { startIndex: null, dragStart: function dragStart(_ref2) { var oldDraggableIndex = _ref2.oldDraggableIndex; this.startIndex = oldDraggableIndex; }, onSpill: function onSpill(_ref3) { var dragEl = _ref3.dragEl, putSortable = _ref3.putSortable; this.sortable.captureAnimationState(); if (putSortable) { putSortable.captureAnimationState(); } var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); } else { this.sortable.el.appendChild(dragEl); } this.sortable.animateAll(); if (putSortable) { putSortable.animateAll(); } }, drop: drop }; _extends(Revert, { pluginName: 'revertOnSpill' }); function Remove() {} Remove.prototype = { onSpill: function onSpill(_ref4) { var dragEl = _ref4.dragEl, putSortable = _ref4.putSortable; var parentSortable = putSortable || this.sortable; parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); parentSortable.animateAll(); }, drop: drop }; _extends(Remove, { pluginName: 'removeOnSpill' }); var lastSwapEl; function SwapPlugin() { function Swap() { this.defaults = { swapClass: 'sortable-swap-highlight' }; } Swap.prototype = { dragStart: function dragStart(_ref) { var dragEl = _ref.dragEl; lastSwapEl = dragEl; }, dragOverValid: function dragOverValid(_ref2) { var completed = _ref2.completed, target = _ref2.target, onMove = _ref2.onMove, activeSortable = _ref2.activeSortable, changed = _ref2.changed, cancel = _ref2.cancel; if (!activeSortable.options.swap) return; var el = this.sortable.el, options = this.options; if (target && target !== el) { var prevSwapEl = lastSwapEl; if (onMove(target) !== false) { toggleClass(target, options.swapClass, true); lastSwapEl = target; } else { lastSwapEl = null; } if (prevSwapEl && prevSwapEl !== lastSwapEl) { toggleClass(prevSwapEl, options.swapClass, false); } } changed(); completed(true); cancel(); }, drop: function drop(_ref3) { var activeSortable = _ref3.activeSortable, putSortable = _ref3.putSortable, dragEl = _ref3.dragEl; var toSortable = putSortable || this.sortable; var options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { if (dragEl !== lastSwapEl) { toSortable.captureAnimationState(); if (toSortable !== activeSortable) activeSortable.captureAnimationState(); swapNodes(dragEl, lastSwapEl); toSortable.animateAll(); if (toSortable !== activeSortable) activeSortable.animateAll(); } } }, nulling: function nulling() { lastSwapEl = null; } }; return _extends(Swap, { pluginName: 'swap', eventProperties: function eventProperties() { return { swapItem: lastSwapEl }; } }); } function swapNodes(n1, n2) { var p1 = n1.parentNode, p2 = n2.parentNode, i1, i2; if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; i1 = index(n1); i2 = index(n2); if (p1.isEqualNode(p2) && i1 < i2) { i2++; } p1.insertBefore(n2, p1.children[i1]); p2.insertBefore(n1, p2.children[i2]); } var multiDragElements = [], multiDragClones = [], lastMultiDragSelect, // for selection with modifier key down (SHIFT) multiDragSortable, initialFolding = false, // Initial multi-drag fold when drag started folding = false, // Folding any other time dragStarted = false, dragEl$1, clonesFromRect, clonesHidden; function MultiDragPlugin() { function MultiDrag(sortable) { // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } if (!sortable.options.avoidImplicitDeselect) { if (sortable.options.supportPointer) { on(document, 'pointerup', this._deselectMultiDrag); } else { on(document, 'mouseup', this._deselectMultiDrag); on(document, 'touchend', this._deselectMultiDrag); } } on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, avoidImplicitDeselect: false, setData: function setData(dataTransfer, dragEl) { var data = ''; if (multiDragElements.length && multiDragSortable === sortable) { multiDragElements.forEach(function (multiDragElement, i) { data += (!i ? '' : ', ') + multiDragElement.textContent; }); } else { data = dragEl.textContent; } dataTransfer.setData('Text', data); } }; } MultiDrag.prototype = { multiDragKeyDown: false, isMultiDrag: false, delayStartGlobal: function delayStartGlobal(_ref) { var dragged = _ref.dragEl; dragEl$1 = dragged; }, delayEnded: function delayEnded() { this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); }, setupClone: function setupClone(_ref2) { var sortable = _ref2.sortable, cancel = _ref2.cancel; if (!this.isMultiDrag) return; for (var i = 0; i < multiDragElements.length; i++) { multiDragClones.push(clone(multiDragElements[i])); multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; multiDragClones[i].draggable = false; multiDragClones[i].style['will-change'] = ''; toggleClass(multiDragClones[i], this.options.selectedClass, false); multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); cancel(); }, clone: function clone(_ref3) { var sortable = _ref3.sortable, rootEl = _ref3.rootEl, dispatchSortableEvent = _ref3.dispatchSortableEvent, cancel = _ref3.cancel; if (!this.isMultiDrag) return; if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); cancel(); } } }, showClone: function showClone(_ref4) { var cloneNowShown = _ref4.cloneNowShown, rootEl = _ref4.rootEl, cancel = _ref4.cancel; if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(function (clone) { css(clone, 'display', ''); }); cloneNowShown(); clonesHidden = false; cancel(); }, hideClone: function hideClone(_ref5) { var _this = this; var sortable = _ref5.sortable, cloneNowHidden = _ref5.cloneNowHidden, cancel = _ref5.cancel; if (!this.isMultiDrag) return; multiDragClones.forEach(function (clone) { css(clone, 'display', 'none'); if (_this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; cancel(); }, dragStartGlobal: function dragStartGlobal(_ref6) { var sortable = _ref6.sortable; if (!this.isMultiDrag && multiDragSortable) { multiDragSortable.multiDrag._deselectMultiDrag(); } multiDragElements.forEach(function (multiDragElement) { multiDragElement.sortableIndex = index(multiDragElement); }); // Sort multi-drag elements multiDragElements = multiDragElements.sort(function (a, b) { return a.sortableIndex - b.sortableIndex; }); dragStarted = true; }, dragStarted: function dragStarted(_ref7) { var _this2 = this; var sortable = _ref7.sortable; if (!this.isMultiDrag) return; if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, // show multi drag elements, // animate to rects, // unset rects & remove from DOM sortable.captureAnimationState(); if (this.options.animation) { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; css(multiDragElement, 'position', 'absolute'); }); var dragRect = getRect(dragEl$1, false, true, true); multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; setRect(multiDragElement, dragRect); }); folding = true; initialFolding = true; } } sortable.animateAll(function () { folding = false; initialFolding = false; if (_this2.options.animation) { multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled if (_this2.options.sort) { removeMultiDragElements(); } }); }, dragOver: function dragOver(_ref8) { var target = _ref8.target, completed = _ref8.completed, cancel = _ref8.cancel; if (folding && ~multiDragElements.indexOf(target)) { completed(false); cancel(); } }, revert: function revert(_ref9) { var fromSortable = _ref9.fromSortable, rootEl = _ref9.rootEl, sortable = _ref9.sortable, dragRect = _ref9.dragRect; if (multiDragElements.length > 1) { // Setup unfold animation multiDragElements.forEach(function (multiDragElement) { sortable.addAnimationState({ target: multiDragElement, rect: folding ? getRect(multiDragElement) : dragRect }); unsetRect(multiDragElement); multiDragElement.fromRect = dragRect; fromSortable.removeAnimationState(multiDragElement); }); folding = false; insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted: function dragOverCompleted(_ref10) { var sortable = _ref10.sortable, isOwner = _ref10.isOwner, insertion = _ref10.insertion, activeSortable = _ref10.activeSortable, parentEl = _ref10.parentEl, putSortable = _ref10.putSortable; var options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } initialFolding = false; // If leaving sort:false root, or already folding - Fold to new location if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) { // Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible var dragRectAbsolute = getRect(dragEl$1, false, true, true); multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; setRect(multiDragElement, dragRectAbsolute); // Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted // while folding, and so that we can capture them again because old sortable will no longer be fromSortable parentEl.appendChild(multiDragElement); }); folding = true; } // Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out if (!isOwner) { // Only remove if not folding (folding will remove them anyways) if (!folding) { removeMultiDragElements(); } if (multiDragElements.length > 1) { var clonesHiddenBefore = clonesHidden; activeSortable._showClone(sortable); // Unfold animation for clones if showing from hidden if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) { multiDragClones.forEach(function (clone) { activeSortable.addAnimationState({ target: clone, rect: clonesFromRect }); clone.fromRect = clonesFromRect; clone.thisAnimationDuration = null; }); } } else { activeSortable._showClone(sortable); } } } }, dragOverAnimationCapture: function dragOverAnimationCapture(_ref11) { var dragRect = _ref11.dragRect, isOwner = _ref11.isOwner, activeSortable = _ref11.activeSortable; multiDragElements.forEach(function (multiDragElement) { multiDragElement.thisAnimationDuration = null; }); if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) { clonesFromRect = _extends({}, dragRect); var dragMatrix = matrix(dragEl$1, true); clonesFromRect.top -= dragMatrix.f; clonesFromRect.left -= dragMatrix.e; } }, dragOverAnimationComplete: function dragOverAnimationComplete() { if (folding) { folding = false; removeMultiDragElements(); } }, drop: function drop(_ref12) { var evt = _ref12.originalEvent, rootEl = _ref12.rootEl, parentEl = _ref12.parentEl, sortable = _ref12.sortable, dispatchSortableEvent = _ref12.dispatchSortableEvent, oldIndex = _ref12.oldIndex, putSortable = _ref12.putSortable; var toSortable = putSortable || this.sortable; if (!evt) return; var options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { if (options.multiDragKey && !this.multiDragKeyDown) { this._deselectMultiDrag(); } toggleClass(dragEl$1, options.selectedClass, !~multiDragElements.indexOf(dragEl$1)); if (!~multiDragElements.indexOf(dragEl$1)) { multiDragElements.push(dragEl$1); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', targetEl: dragEl$1, originalEvent: evt }); // Modifier activated, select from last to dragEl if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { var lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl$1); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { (function () { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) var n, i; if (currentIndex > lastIndex) { i = lastIndex; n = currentIndex; } else { i = currentIndex; n = lastIndex + 1; } var filter = options.filter; for (; i < n; i++) { if (~multiDragElements.indexOf(children[i])) continue; // Check if element is draggable if (!closest(children[i], options.draggable, parentEl, false)) continue; // Check if element is filtered var filtered = filter && (typeof filter === 'function' ? filter.call(sortable, evt, children[i], sortable) : filter.split(',').some(function (criteria) { return closest(children[i], criteria.trim(), parentEl, false); })); if (filtered) continue; toggleClass(children[i], options.selectedClass, true); multiDragElements.push(children[i]); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', targetEl: children[i], originalEvent: evt }); } })(); } } else { lastMultiDragSelect = dragEl$1; } multiDragSortable = toSortable; } else { multiDragElements.splice(multiDragElements.indexOf(dragEl$1), 1); lastMultiDragSelect = null; dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'deselect', targetEl: dragEl$1, originalEvent: evt }); } } // Multi-drag drop if (dragStarted && this.isMultiDrag) { folding = false; // Do not "unfold" after around dragEl if reverted if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) { var dragRect = getRect(dragEl$1), multiDragIndex = index(dragEl$1, ':not(.' + this.options.selectedClass + ')'); if (!initialFolding && options.animation) dragEl$1.thisAnimationDuration = null; toSortable.captureAnimationState(); if (!initialFolding) { if (options.animation) { dragEl$1.fromRect = dragRect; multiDragElements.forEach(function (multiDragElement) { multiDragElement.thisAnimationDuration = null; if (multiDragElement !== dragEl$1) { var rect = folding ? getRect(multiDragElement) : dragRect; multiDragElement.fromRect = rect; // Prepare unfold animation toSortable.addAnimationState({ target: multiDragElement, rect: rect }); } }); } // Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert // properly they must all be removed removeMultiDragElements(); multiDragElements.forEach(function (multiDragElement) { if (children[multiDragIndex]) { parentEl.insertBefore(multiDragElement, children[multiDragIndex]); } else { parentEl.appendChild(multiDragElement); } multiDragIndex++; }); // If initial folding is done, the elements may have changed position because they are now // unfolding around dragEl, even though dragEl may not have his index changed, so update event // must be fired here as Sortable will not. if (oldIndex === index(dragEl$1)) { var update = false; multiDragElements.forEach(function (multiDragElement) { if (multiDragElement.sortableIndex !== index(multiDragElement)) { update = true; return; } }); if (update) { dispatchSortableEvent('update'); dispatchSortableEvent('sort'); } } } // Must be done after capturing individual rects (scroll bar) multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); toSortable.animateAll(); } multiDragSortable = toSortable; } // Remove clones if necessary if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { multiDragClones.forEach(function (clone) { clone.parentNode && clone.parentNode.removeChild(clone); }); } }, nullingGlobal: function nullingGlobal() { this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, destroyGlobal: function destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); off(document, 'mouseup', this._deselectMultiDrag); off(document, 'touchend', this._deselectMultiDrag); off(document, 'keydown', this._checkKeyDown); off(document, 'keyup', this._checkKeyUp); }, _deselectMultiDrag: function _deselectMultiDrag(evt) { if (typeof dragStarted !== "undefined" && dragStarted) return; // Only deselect if selection is in this sortable if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { var el = multiDragElements[0]; toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, rootEl: this.sortable.el, name: 'deselect', targetEl: el, originalEvent: evt }); } }, _checkKeyDown: function _checkKeyDown(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp: function _checkKeyUp(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } }; return _extends(MultiDrag, { // Static methods & properties pluginName: 'multiDrag', utils: { /** * Selects the provided multi-drag item * @param {HTMLElement} el The element to be selected */ select: function select(el) { var sortable = el.parentNode[expando]; if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return; if (multiDragSortable && multiDragSortable !== sortable) { multiDragSortable.multiDrag._deselectMultiDrag(); multiDragSortable = sortable; } toggleClass(el, sortable.options.selectedClass, true); multiDragElements.push(el); }, /** * Deselects the provided multi-drag item * @param {HTMLElement} el The element to be deselected */ deselect: function deselect(el) { var sortable = el.parentNode[expando], index = multiDragElements.indexOf(el); if (!sortable || !sortable.options.multiDrag || !~index) return; toggleClass(el, sortable.options.selectedClass, false); multiDragElements.splice(index, 1); } }, eventProperties: function eventProperties() { var _this3 = this; var oldIndicies = [], newIndicies = []; multiDragElements.forEach(function (multiDragElement) { oldIndicies.push({ multiDragElement: multiDragElement, index: multiDragElement.sortableIndex }); // multiDragElements will already be sorted if folding var newIndex; if (folding && multiDragElement !== dragEl$1) { newIndex = -1; } else if (folding) { newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } newIndicies.push({ multiDragElement: multiDragElement, index: newIndex }); }); return { items: _toConsumableArray(multiDragElements), clones: [].concat(multiDragClones), oldIndicies: oldIndicies, newIndicies: newIndicies }; }, optionListeners: { multiDragKey: function multiDragKey(key) { key = key.toLowerCase(); if (key === 'ctrl') { key = 'Control'; } else if (key.length > 1) { key = key.charAt(0).toUpperCase() + key.substr(1); } return key; } } }); } function insertMultiDragElements(clonesInserted, rootEl) { multiDragElements.forEach(function (multiDragElement, i) { var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(multiDragElement, target); } else { rootEl.appendChild(multiDragElement); } }); } /** * Insert multi-drag clones * @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted * @param {HTMLElement} rootEl */ function insertMultiDragClones(elementsInserted, rootEl) { multiDragClones.forEach(function (clone, i) { var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(clone, target); } else { rootEl.appendChild(clone); } }); } function removeMultiDragElements() { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement); }); } Sortable.mount(new AutoScrollPlugin()); Sortable.mount(Remove, Revert); Sortable.mount(new SwapPlugin()); Sortable.mount(new MultiDragPlugin()); return Sortable; }))); ================================================ FILE: babel.config.js ================================================ module.exports = function(api) { api.cache(true); let presets; if (process.env.NODE_ENV === 'es') { presets = [ [ "@babel/preset-env", { "modules": false } ] ]; } else if (process.env.NODE_ENV === 'umd') { presets = [ [ "@babel/preset-env" ] ]; } return { plugins: ['@babel/plugin-transform-object-assign'], presets }; }; ================================================ FILE: bower.json ================================================ { "name": "Sortable", "main": [ "Sortable.js" ], "homepage": "http://SortableJS.github.io/Sortable/", "authors": [ "RubaXa ", "owenm " ], "description": "JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.", "keywords": [ "sortable", "reorder", "list", "html5", "drag", "and", "drop", "dnd", "web-components" ], "license": "MIT", "ignore": [ "node_modules", "bower_components", "test", "tests" ] } ================================================ FILE: entry/entry-complete.js ================================================ import Sortable from './entry-defaults.js'; import Swap from '../plugins/Swap'; import MultiDrag from '../plugins/MultiDrag'; Sortable.mount(new Swap()); Sortable.mount(new MultiDrag()); export default Sortable; ================================================ FILE: entry/entry-core.js ================================================ import Sortable from '../src/Sortable.js'; import AutoScroll from '../plugins/AutoScroll'; import OnSpill from '../plugins/OnSpill'; import Swap from '../plugins/Swap'; import MultiDrag from '../plugins/MultiDrag'; export default Sortable; export { Sortable, // Default AutoScroll, OnSpill, // Extra Swap, MultiDrag }; ================================================ FILE: entry/entry-defaults.js ================================================ import Sortable from '../src/Sortable.js'; import AutoScroll from '../plugins/AutoScroll'; import { RemoveOnSpill, RevertOnSpill } from '../plugins/OnSpill'; // Extra import Swap from '../plugins/Swap'; import MultiDrag from '../plugins/MultiDrag'; Sortable.mount(new AutoScroll()); Sortable.mount(RemoveOnSpill, RevertOnSpill); export default Sortable; export { Sortable, // Extra Swap, MultiDrag }; ================================================ FILE: index.html ================================================ SortableJS Fork me on GitHub

SortableJS

JavaScript library for reorderable drag-and-drop lists

Features
  • Simple list
  • Shared lists
  • Cloning
  • Disabling sorting
  • Handles
  • Filter
  • Thresholds
    • Examples
  • Grid
  • Nested sortables
    • Plugins
  • MultiDrag
  • Swap
    • Comparisons
    Framework Support

    Features

    Simple list example

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});

    Shared lists

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(example2Left, {
    group: 'shared', // set both lists to same group
    animation: 150
});

new Sortable(example2Right, {
    group: 'shared',
    animation: 150
});

    Cloning

    Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(example3Left, {
    group: {
        name: 'shared',
        pull: 'clone' // To clone: set pull to 'clone'
    },
    animation: 150
});

new Sortable(example3Right, {
    group: {
        name: 'shared',
        pull: 'clone'
    },
    animation: 150
});

    Disabling Sorting

    Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(example4Left, {
    group: {
        name: 'shared',
        pull: 'clone',
        put: false // Do not allow items to be put into this list
    },
    animation: 150,
    sort: false // To disable sorting: set sort to false
});

new Sortable(example4Right, {
    group: 'shared',
    animation: 150
});

    Handle

      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
    new Sortable(example5, {
    handle: '.handle', // handle's class
    animation: 150
});

    Filter

    Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.

    Item 1
    Item 2
    Item 3
    Filtered
    Item 4
    Item 5
    new Sortable(example6, {
    filter: '.filtered', // 'filtered' class is not draggable
    animation: 150
});

    Thresholds

    Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.

    1
    2
    Invert Swap
    new Sortable(example7, {
    swapThreshold: 1,
    animation: 150
});

    Examples

    Grid Example

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15
    Item 16
    Item 17
    Item 18
    Item 19
    Item 20

    Nested Sortables Example

    NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true.
    It is also always recommended that either the invertSwap option is set to true, or the swapThreshold option is lower than the default value of 1 (eg 0.65).

    Item 1.1
    Item 2.1
    Item 2.2
    Item 3.1
    Item 3.2
    Item 3.3
    Item 3.4
    Item 2.3
    Item 2.4
    Item 1.2
    Item 1.3
    Item 1.4
    Item 2.1
    Item 2.2
    Item 2.3
    Item 2.4
    Item 1.5
    // Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
	new Sortable(nestedSortables[i], {
		group: 'nested',
		animation: 150,
		fallbackOnBody: true,
		swapThreshold: 0.65
	});
}

    Plugins

    MultiDrag

    The MultiDrag plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(multiDragDemo, {
	multiDrag: true,
	selectedClass: 'selected',
	fallbackTolerance: 3, // So that we can select items on mobile
	animation: 150
});

    Swap

    The Swap plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(swapDemo, {
	swap: true, // Enable swap plugin
	swapClass: 'highlight', // The class applied to the hovered swap item
	animation: 150
});

    Comparisons

    jQuery-UI

    Dragula

    Framework Support

    Vue

    Vue.Draggable

    React

    react-sortablejs

    Angular

    ngx-sortablejs

    jQuery

    jquery-sortablejs

    Knockout

    knockout-sortablejs

    Meteor

    meteor-sortablejs

    Polymer

    polymer-sortablejs

    Ember

    ember-sortablejs

    ================================================ FILE: modular/sortable.complete.esm.js ================================================ /**! * Sortable 1.15.7 * @author RubaXa * @author owenm * @license MIT */ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); } function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } var version = "1.15.7"; function userAgent(pattern) { if (typeof window !== 'undefined' && window.navigator) { return !! /*@__PURE__*/navigator.userAgent.match(pattern); } } var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i); var Edge = userAgent(/Edge/i); var FireFox = userAgent(/firefox/i); var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i); var IOS = userAgent(/iP(ad|od|hone)/i); var ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i); var captureMode = { capture: false, passive: false }; function on(el, event, fn) { el.addEventListener(event, fn, !IE11OrLess && captureMode); } function off(el, event, fn) { el.removeEventListener(event, fn, !IE11OrLess && captureMode); } function matches( /**HTMLElement*/el, /**String*/selector) { if (!selector) return; selector[0] === '>' && (selector = selector.substring(1)); if (el) { try { if (el.matches) { return el.matches(selector); } else if (el.msMatchesSelector) { return el.msMatchesSelector(selector); } else if (el.webkitMatchesSelector) { return el.webkitMatchesSelector(selector); } } catch (_) { return false; } } return false; } function getParentOrHost(el) { return el.host && el !== document && el.host.nodeType && el.host !== el ? el.host : el.parentNode; } function closest( /**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) { if (el) { ctx = ctx || document; do { if (selector != null && (selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) { return el; } if (el === ctx) break; /* jshint boss:true */ } while (el = getParentOrHost(el)); } return null; } var R_SPACE = /\s+/g; function toggleClass(el, name, state) { if (el && name) { if (el.classList) { el.classList[state ? 'add' : 'remove'](name); } else { var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' '); el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' '); } } } function css(el, prop, val) { var style = el && el.style; if (style) { if (val === void 0) { if (document.defaultView && document.defaultView.getComputedStyle) { val = document.defaultView.getComputedStyle(el, ''); } else if (el.currentStyle) { val = el.currentStyle; } return prop === void 0 ? val : val[prop]; } else { if (!(prop in style) && prop.indexOf('webkit') === -1) { prop = '-webkit-' + prop; } style[prop] = val + (typeof val === 'string' ? '' : 'px'); } } } function matrix(el, selfOnly) { var appliedTransforms = ''; if (typeof el === 'string') { appliedTransforms = el; } else { do { var transform = css(el, 'transform'); if (transform && transform !== 'none') { appliedTransforms = transform + ' ' + appliedTransforms; } /* jshint boss:true */ } while (!selfOnly && (el = el.parentNode)); } var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix; /*jshint -W056 */ return matrixFn && new matrixFn(appliedTransforms); } function find(ctx, tagName, iterator) { if (ctx) { var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length; if (iterator) { for (; i < n; i++) { iterator(list[i], i); } } return list; } return []; } function getWindowScrollingElement() { var scrollingElement = document.scrollingElement; if (scrollingElement) { return scrollingElement; } else { return document.documentElement; } } /** * Returns the "bounding client rect" of given element * @param {HTMLElement} el The element whose boundingClientRect is wanted * @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container * @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr * @param {[Boolean]} undoScale Whether the container's scale() should be undone * @param {[HTMLElement]} container The parent the element will be placed in * @return {Object} The boundingClientRect of el, with specified adjustments */ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) { if (!el.getBoundingClientRect && el !== window) return; var elRect, top, left, bottom, right, height, width; if (el !== window && el.parentNode && el !== getWindowScrollingElement()) { elRect = el.getBoundingClientRect(); top = elRect.top; left = elRect.left; bottom = elRect.bottom; right = elRect.right; height = elRect.height; width = elRect.width; } else { top = 0; left = 0; bottom = window.innerHeight; right = window.innerWidth; height = window.innerHeight; width = window.innerWidth; } if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) { // Adjust for translate() container = container || el.parentNode; // solves #1123 (see: https://stackoverflow.com/a/37953806/6088312) // Not needed on <= IE11 if (!IE11OrLess) { do { if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static')) { var containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container top -= containerRect.top + parseInt(css(container, 'border-top-width')); left -= containerRect.left + parseInt(css(container, 'border-left-width')); bottom = top + elRect.height; right = left + elRect.width; break; } /* jshint boss:true */ } while (container = container.parentNode); } } if (undoScale && el !== window) { // Adjust for scale() var elMatrix = matrix(container || el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d; if (elMatrix) { top /= scaleY; left /= scaleX; width /= scaleX; height /= scaleY; bottom = top + height; right = left + width; } } return { top: top, left: left, bottom: bottom, right: right, width: width, height: height }; } /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ function isScrolledPast(el, elSide, parentSide) { var parent = getParentAutoScrollElement(el, true), elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { var parentSideVal = getRect(parent)[parentSide], visible = void 0; if (parentSide === 'top' || parentSide === 'left') { visible = elSideVal >= parentSideVal; } else { visible = elSideVal <= parentSideVal; } if (!visible) return parent; if (parent === getWindowScrollingElement()) break; parent = getParentAutoScrollElement(parent, false); } return false; } /** * Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible) * and non-draggable elements * @param {HTMLElement} el The parent element * @param {Number} childNum The index of the child * @param {Object} options Parent Sortable's options * @return {HTMLElement} The child at index childNum, or null if not found */ function getChild(el, childNum, options, includeDragEl) { var currentChild = 0, i = 0, children = el.children; while (i < children.length) { if (children[i].style.display !== 'none' && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false)) { if (currentChild === childNum) { return children[i]; } currentChild++; } i++; } return null; } /** * Gets the last child in the el, ignoring ghostEl or invisible elements (clones) * @param {HTMLElement} el Parent element * @param {selector} selector Any other elements that should be ignored * @return {HTMLElement} The last child, ignoring ghostEl */ function lastChild(el, selector) { var last = el.lastElementChild; while (last && (last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector))) { last = last.previousElementSibling; } return last || null; } /** * Returns the index of an element within its parent for a selected set of * elements * @param {HTMLElement} el * @param {selector} selector * @return {number} */ function index(el, selector) { var index = 0; if (!el || !el.parentNode) { return -1; } /* jshint boss:true */ while (el = el.previousElementSibling) { if (el.nodeName.toUpperCase() !== 'TEMPLATE' && el !== Sortable.clone && (!selector || matches(el, selector))) { index++; } } return index; } /** * Returns the scroll offset of the given element, added with all the scroll offsets of parent elements. * The value is returned in real pixels. * @param {HTMLElement} el * @return {Array} Offsets in the format of [left, top] */ function getRelativeScrollOffset(el) { var offsetLeft = 0, offsetTop = 0, winScroller = getWindowScrollingElement(); if (el) { do { var elMatrix = matrix(el), scaleX = elMatrix.a, scaleY = elMatrix.d; offsetLeft += el.scrollLeft * scaleX; offsetTop += el.scrollTop * scaleY; } while (el !== winScroller && (el = el.parentNode)); } return [offsetLeft, offsetTop]; } /** * Returns the index of the object within the given array * @param {Array} arr Array that may or may not hold the object * @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find * @return {Number} The index of the object in the array, or -1 */ function indexOfObject(arr, obj) { for (var i in arr) { if (!arr.hasOwnProperty(i)) continue; for (var key in obj) { if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i); } } return -1; } function getParentAutoScrollElement(el, includeSelf) { // skip to window if (!el || !el.getBoundingClientRect) return getWindowScrollingElement(); var elem = el; var gotSelf = false; do { // we don't need to get elem css if it isn't even overflowing in the first place (performance) if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) { var elemCSS = css(elem); if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) { if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement(); if (gotSelf || includeSelf) return elem; gotSelf = true; } } /* jshint boss:true */ } while (elem = elem.parentNode); return getWindowScrollingElement(); } function extend(dst, src) { if (dst && src) { for (var key in src) { if (src.hasOwnProperty(key)) { dst[key] = src[key]; } } } return dst; } function isRectEqual(rect1, rect2) { return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width); } var _throttleTimeout; function throttle(callback, ms) { return function () { if (!_throttleTimeout) { var args = arguments, _this = this; if (args.length === 1) { callback.call(_this, args[0]); } else { callback.apply(_this, args); } _throttleTimeout = setTimeout(function () { _throttleTimeout = void 0; }, ms); } }; } function cancelThrottle() { clearTimeout(_throttleTimeout); _throttleTimeout = void 0; } function scrollBy(el, x, y) { el.scrollLeft += x; el.scrollTop += y; } function clone(el) { var Polymer = window.Polymer; var $ = window.jQuery || window.Zepto; if (Polymer && Polymer.dom) { return Polymer.dom(el).cloneNode(true); } else if ($) { return $(el).clone(true)[0]; } else { return el.cloneNode(true); } } function setRect(el, rect) { css(el, 'position', 'absolute'); css(el, 'top', rect.top); css(el, 'left', rect.left); css(el, 'width', rect.width); css(el, 'height', rect.height); } function unsetRect(el) { css(el, 'position', ''); css(el, 'top', ''); css(el, 'left', ''); css(el, 'width', ''); css(el, 'height', ''); } function getChildContainingRectFromElement(container, options, ghostEl) { var rect = {}; Array.from(container.children).forEach(function (child) { var _rect$left, _rect$top, _rect$right, _rect$bottom; if (!closest(child, options.draggable, container, false) || child.animated || child === ghostEl) return; var childRect = getRect(child); rect.left = Math.min((_rect$left = rect.left) !== null && _rect$left !== void 0 ? _rect$left : Infinity, childRect.left); rect.top = Math.min((_rect$top = rect.top) !== null && _rect$top !== void 0 ? _rect$top : Infinity, childRect.top); rect.right = Math.max((_rect$right = rect.right) !== null && _rect$right !== void 0 ? _rect$right : -Infinity, childRect.right); rect.bottom = Math.max((_rect$bottom = rect.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : -Infinity, childRect.bottom); }); rect.width = rect.right - rect.left; rect.height = rect.bottom - rect.top; rect.x = rect.left; rect.y = rect.top; return rect; } var expando = 'Sortable' + new Date().getTime(); function AnimationStateManager() { var animationStates = [], animationCallbackId; return { captureAnimationState: function captureAnimationState() { animationStates = []; if (!this.options.animation) return; var children = [].slice.call(this.el.children); children.forEach(function (child) { if (css(child, 'display') === 'none' || child === Sortable.ghost) return; animationStates.push({ target: child, rect: getRect(child) }); var fromRect = _objectSpread2({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation if (child.thisAnimationDuration) { var childMatrix = matrix(child, true); if (childMatrix) { fromRect.top -= childMatrix.f; fromRect.left -= childMatrix.e; } } child.fromRect = fromRect; }); }, addAnimationState: function addAnimationState(state) { animationStates.push(state); }, removeAnimationState: function removeAnimationState(target) { animationStates.splice(indexOfObject(animationStates, { target: target }), 1); }, animateAll: function animateAll(callback) { var _this = this; if (!this.options.animation) { clearTimeout(animationCallbackId); if (typeof callback === 'function') callback(); return; } var animating = false, animationTime = 0; animationStates.forEach(function (state) { var time = 0, target = state.target, fromRect = target.fromRect, toRect = getRect(target), prevFromRect = target.prevFromRect, prevToRect = target.prevToRect, animatingRect = state.rect, targetMatrix = matrix(target, true); if (targetMatrix) { // Compensate for current animation toRect.top -= targetMatrix.f; toRect.left -= targetMatrix.e; } target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect if (isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) && // Make sure animatingRect is on line between toRect & fromRect (animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left)) { // If returning to same place as started from animation and on same axis time = calculateRealTime(animatingRect, prevFromRect, prevToRect, _this.options); } } // if fromRect != toRect: animate if (!isRectEqual(toRect, fromRect)) { target.prevFromRect = fromRect; target.prevToRect = toRect; if (!time) { time = _this.options.animation; } _this.animate(target, animatingRect, toRect, time); } if (time) { animating = true; animationTime = Math.max(animationTime, time); clearTimeout(target.animationResetTimer); target.animationResetTimer = setTimeout(function () { target.animationTime = 0; target.prevFromRect = null; target.fromRect = null; target.prevToRect = null; target.thisAnimationDuration = null; }, time); target.thisAnimationDuration = time; } }); clearTimeout(animationCallbackId); if (!animating) { if (typeof callback === 'function') callback(); } else { animationCallbackId = setTimeout(function () { if (typeof callback === 'function') callback(); }, animationTime); } animationStates = []; }, animate: function animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); var elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, translateX = (currentRect.left - toRect.left) / (scaleX || 1), translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); this.forRepaintDummy = repaint(target); // repaint css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : '')); css(target, 'transform', 'translate3d(0,0,0)'); typeof target.animated === 'number' && clearTimeout(target.animated); target.animated = setTimeout(function () { css(target, 'transition', ''); css(target, 'transform', ''); target.animated = false; target.animatingX = false; target.animatingY = false; }, duration); } } }; } function repaint(target) { return target.offsetWidth; } function calculateRealTime(animatingRect, fromRect, toRect, options) { return Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) * options.animation; } var plugins = []; var defaults = { initializeByDefault: true }; var PluginManager = { mount: function mount(plugin) { // Set default static properties for (var option in defaults) { if (defaults.hasOwnProperty(option) && !(option in plugin)) { plugin[option] = defaults[option]; } } plugins.forEach(function (p) { if (p.pluginName === plugin.pluginName) { throw "Sortable: Cannot mount plugin ".concat(plugin.pluginName, " more than once"); } }); plugins.push(plugin); }, pluginEvent: function pluginEvent(eventName, sortable, evt) { var _this = this; this.eventCanceled = false; evt.cancel = function () { _this.eventCanceled = true; }; var eventNameGlobal = eventName + 'Global'; plugins.forEach(function (plugin) { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if (sortable[plugin.pluginName][eventNameGlobal]) { sortable[plugin.pluginName][eventNameGlobal](_objectSpread2({ sortable: sortable }, evt)); } // Only fire plugin event if plugin is enabled in this sortable, // and plugin has event defined if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { sortable[plugin.pluginName][eventName](_objectSpread2({ sortable: sortable }, evt)); } }); }, initializePlugins: function initializePlugins(sortable, el, defaults, options) { plugins.forEach(function (plugin) { var pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; var initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin _extends(defaults, initialized.defaults); }); for (var option in sortable.options) { if (!sortable.options.hasOwnProperty(option)) continue; var modified = this.modifyOption(sortable, option, sortable.options[option]); if (typeof modified !== 'undefined') { sortable.options[option] = modified; } } }, getEventProperties: function getEventProperties(name, sortable) { var eventProperties = {}; plugins.forEach(function (plugin) { if (typeof plugin.eventProperties !== 'function') return; _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); return eventProperties; }, modifyOption: function modifyOption(sortable, name, value) { var modifiedValue; plugins.forEach(function (plugin) { // Plugin must exist on the Sortable if (!sortable[plugin.pluginName]) return; // If static option listener exists for this option, call in the context of the Sortable's instance of this plugin if (plugin.optionListeners && typeof plugin.optionListeners[name] === 'function') { modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value); } }); return modifiedValue; } }; function dispatchEvent(_ref) { var sortable = _ref.sortable, rootEl = _ref.rootEl, name = _ref.name, targetEl = _ref.targetEl, cloneEl = _ref.cloneEl, toEl = _ref.toEl, fromEl = _ref.fromEl, oldIndex = _ref.oldIndex, newIndex = _ref.newIndex, oldDraggableIndex = _ref.oldDraggableIndex, newDraggableIndex = _ref.newDraggableIndex, originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, extraEventProperties = _ref.extraEventProperties; sortable = sortable || rootEl && rootEl[expando]; if (!sortable) return; var evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent(name, { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent(name, true, true); } evt.to = toEl || rootEl; evt.from = fromEl || rootEl; evt.item = targetEl || rootEl; evt.clone = cloneEl; evt.oldIndex = oldIndex; evt.newIndex = newIndex; evt.oldDraggableIndex = oldDraggableIndex; evt.newDraggableIndex = newDraggableIndex; evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; var allEventProperties = _objectSpread2(_objectSpread2({}, extraEventProperties), PluginManager.getEventProperties(name, sortable)); for (var option in allEventProperties) { evt[option] = allEventProperties[option]; } if (rootEl) { rootEl.dispatchEvent(evt); } if (options[onName]) { options[onName].call(sortable, evt); } } var _excluded = ["evt"]; var pluginEvent = function pluginEvent(eventName, sortable) { var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, originalEvent = _ref.evt, data = _objectWithoutProperties(_ref, _excluded); PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread2({ dragEl: dragEl, parentEl: parentEl, ghostEl: ghostEl, rootEl: rootEl, nextEl: nextEl, lastDownEl: lastDownEl, cloneEl: cloneEl, cloneHidden: cloneHidden, dragStarted: moved, putSortable: putSortable, activeSortable: Sortable.active, originalEvent: originalEvent, oldIndex: oldIndex, oldDraggableIndex: oldDraggableIndex, newIndex: newIndex, newDraggableIndex: newDraggableIndex, hideGhostForTarget: _hideGhostForTarget, unhideGhostForTarget: _unhideGhostForTarget, cloneNowHidden: function cloneNowHidden() { cloneHidden = true; }, cloneNowShown: function cloneNowShown() { cloneHidden = false; }, dispatchSortableEvent: function dispatchSortableEvent(name) { _dispatchEvent({ sortable: sortable, name: name, originalEvent: originalEvent }); } }, data)); }; function _dispatchEvent(info) { dispatchEvent(_objectSpread2({ putSortable: putSortable, cloneEl: cloneEl, targetEl: dragEl, rootEl: rootEl, oldIndex: oldIndex, oldDraggableIndex: oldDraggableIndex, newIndex: newIndex, newDraggableIndex: newDraggableIndex }, info)); } var dragEl, parentEl, ghostEl, rootEl, nextEl, lastDownEl, cloneEl, cloneHidden, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, activeGroup, putSortable, awaitingDragStarted = false, ignoreNextClick = false, sortables = [], tapEvt, touchEvt, lastDx, lastDy, tapDistanceLeft, tapDistanceTop, moved, lastTarget, lastDirection, pastFirstInvertThresh = false, isCircumstantialInvert = false, targetMoveDistance, // For positioning ghost absolutely ghostRelativeParent, ghostRelativeParentInitialScroll = [], // (left, top) _silent = false, savedInputChecked = []; /** @const */ var documentExists = typeof document !== 'undefined', PositionGhostAbsolutely = IOS, CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float', // This will not pass for IE9, because IE9 DnD only works on anchors supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'), supportCssPointerEvents = function () { if (!documentExists) return; // false when <= IE11 if (IE11OrLess) { return false; } var el = document.createElement('x'); el.style.cssText = 'pointer-events:auto'; return el.style.pointerEvents === 'auto'; }(), _detectDirection = function _detectDirection(el, options) { var elCSS = css(el), elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth), child1 = getChild(el, 0, options), child2 = getChild(el, 1, options), firstChildCSS = child1 && css(child1), secondChildCSS = child2 && css(child2), firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width, secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width; if (elCSS.display === 'flex') { return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal'; } if (elCSS.display === 'grid') { return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } return child1 && (firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth) ? 'vertical' : 'horizontal'; }, _dragElInRowColumn = function _dragElInRowColumn(dragRect, targetRect, vertical) { var dragElS1Opp = vertical ? dragRect.left : dragRect.top, dragElS2Opp = vertical ? dragRect.right : dragRect.bottom, dragElOppLength = vertical ? dragRect.width : dragRect.height, targetS1Opp = vertical ? targetRect.left : targetRect.top, targetS2Opp = vertical ? targetRect.right : targetRect.bottom, targetOppLength = vertical ? targetRect.width : targetRect.height; return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2; }, /** * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold. * @param {Number} x X position * @param {Number} y Y position * @return {HTMLElement} Element of the first found nearest Sortable */ _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { var ret; sortables.some(function (sortable) { var threshold = sortable[expando].options.emptyInsertThreshold; if (!threshold || lastChild(sortable)) return; var rect = getRect(sortable), insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold, insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold; if (insideHorizontally && insideVertically) { return ret = sortable; } }); return ret; }, _prepareGroup = function _prepareGroup(options) { function toFn(value, pull) { return function (to, from, dragEl, evt) { var sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name; if (value == null && (pull || sameGroup)) { // Default pull value // Default pull and put value if same group return true; } else if (value == null || value === false) { return false; } else if (pull && value === 'clone') { return value; } else if (typeof value === 'function') { return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt); } else { var otherGroup = (pull ? to : from).options.group.name; return value === true || typeof value === 'string' && value === otherGroup || value.join && value.indexOf(otherGroup) > -1; } }; } var group = {}; var originalGroup = options.group; if (!originalGroup || _typeof(originalGroup) != 'object') { originalGroup = { name: originalGroup }; } group.name = originalGroup.name; group.checkPull = toFn(originalGroup.pull, true); group.checkPut = toFn(originalGroup.put); group.revertClone = originalGroup.revertClone; options.group = group; }, _hideGhostForTarget = function _hideGhostForTarget() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', 'none'); } }, _unhideGhostForTarget = function _unhideGhostForTarget() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', ''); } }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position if (documentExists && !ChromeForAndroid) { document.addEventListener('click', function (evt) { if (ignoreNextClick) { evt.preventDefault(); evt.stopPropagation && evt.stopPropagation(); evt.stopImmediatePropagation && evt.stopImmediatePropagation(); ignoreNextClick = false; return false; } }, true); } var nearestEmptyInsertDetectEvent = function nearestEmptyInsertDetectEvent(evt) { if (dragEl) { evt = evt.touches ? evt.touches[0] : evt; var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY); if (nearest) { // Create imitation event var event = {}; for (var i in evt) { if (evt.hasOwnProperty(i)) { event[i] = evt[i]; } } event.target = event.rootEl = nearest; event.preventDefault = void 0; event.stopPropagation = void 0; nearest[expando]._onDragOver(event); } } }; var _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) { if (dragEl) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); } }; /** * @class Sortable * @param {HTMLElement} el * @param {Object} [options] */ function Sortable(el, options) { if (!(el && el.nodeType && el.nodeType === 1)) { throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(el)); } this.el = el; // root element this.options = options = _extends({}, options); // Export instance el[expando] = this; var defaults = { group: null, sort: true, disabled: false, store: null, handle: null, draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*', swapThreshold: 1, // percentage; 0 <= x <= 1 invertSwap: false, // invert always invertedSwapThreshold: null, // will be set to same as swapThreshold if default removeCloneOnHide: true, direction: function direction() { return _detectDirection(el, this.options); }, ghostClass: 'sortable-ghost', chosenClass: 'sortable-chosen', dragClass: 'sortable-drag', ignore: 'a, img', filter: null, preventOnFilter: true, animation: 0, easing: null, setData: function setData(dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent); }, dropBubble: false, dragoverBubble: false, dataIdAttr: 'data-id', delay: 0, delayOnTouchOnly: false, touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1, forceFallback: false, fallbackClass: 'sortable-fallback', fallbackOnBody: false, fallbackTolerance: 0, fallbackOffset: { x: 0, y: 0 }, // Disabled on Safari: #1571; Enabled on Safari IOS: #2244 supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && (!Safari || IOS), emptyInsertThreshold: 5 }; PluginManager.initializePlugins(this, el, defaults); // Set default options for (var name in defaults) { !(name in options) && (options[name] = defaults[name]); } _prepareGroup(options); // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } // Setup drag mode this.nativeDraggable = options.forceFallback ? false : supportDraggable; if (this.nativeDraggable) { // Touch start threshold cannot be greater than the native dragstart threshold this.options.touchStartThreshold = 1; } // Bind events if (options.supportPointer) { on(el, 'pointerdown', this._onTapStart); } else { on(el, 'mousedown', this._onTapStart); on(el, 'touchstart', this._onTapStart); } if (this.nativeDraggable) { on(el, 'dragover', this); on(el, 'dragenter', this); } sortables.push(this.el); // Restore sorting options.store && options.store.get && this.sort(options.store.get(this) || []); // Add animation state manager _extends(this, AnimationStateManager()); } Sortable.prototype = /** @lends Sortable.prototype */{ constructor: Sortable, _isOutsideThisEl: function _isOutsideThisEl(target) { if (!this.el.contains(target) && target !== this.el) { lastTarget = null; } }, _getDirection: function _getDirection(evt, target) { return typeof this.options.direction === 'function' ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction; }, _onTapStart: function _onTapStart( /** Event|TouchEvent */evt) { if (!evt.cancelable) return; var _this = this, el = this.el, options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, target = (touch || evt).target, originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, filter = options.filter; _saveInputCheckedState(el); // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group. if (dragEl) { return; } if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) { return; // only left button and enabled } // cancel dnd if original target is content editable if (originalTarget.isContentEditable) { return; } // Safari ignores further event handling after mousedown if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') { return; } target = closest(target, options.draggable, el, false); if (target && target.animated) { return; } if (lastDownEl === target) { // Ignoring duplicate `down` return; } // Get the index of the dragged element within its parent oldIndex = index(target); oldDraggableIndex = index(target, options.draggable); // Check filter if (typeof filter === 'function') { if (filter.call(this, evt, target, this)) { _dispatchEvent({ sortable: _this, rootEl: originalTarget, name: 'filter', targetEl: target, toEl: el, fromEl: el }); pluginEvent('filter', _this, { evt: evt }); preventOnFilter && evt.preventDefault(); return; // cancel dnd } } else if (filter) { filter = filter.split(',').some(function (criteria) { criteria = closest(originalTarget, criteria.trim(), el, false); if (criteria) { _dispatchEvent({ sortable: _this, rootEl: criteria, name: 'filter', targetEl: target, fromEl: el, toEl: el }); pluginEvent('filter', _this, { evt: evt }); return true; } }); if (filter) { preventOnFilter && evt.preventDefault(); return; // cancel dnd } } if (options.handle && !closest(originalTarget, options.handle, el, false)) { return; } // Prepare `dragstart` this._prepareDragStart(evt, touch, target); }, _prepareDragStart: function _prepareDragStart( /** Event */evt, /** Touch */touch, /** HTMLElement */target) { var _this = this, el = _this.el, options = _this.options, ownerDocument = el.ownerDocument, dragStartFn; if (target && !dragEl && target.parentNode === el) { var dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; nextEl = dragEl.nextSibling; lastDownEl = target; activeGroup = options.group; Sortable.dragged = dragEl; tapEvt = { target: dragEl, clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; tapDistanceLeft = tapEvt.clientX - dragRect.left; tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; dragStartFn = function dragStartFn() { pluginEvent('delayEnded', _this, { evt: evt }); if (Sortable.eventCanceled) { _this._onDrop(); return; } // Delayed drag has been triggered // we can re-enable the events: touchmove/mousemove _this._disableDelayedDragEvents(); if (!FireFox && _this.nativeDraggable) { dragEl.draggable = true; } // Bind the events: dragstart/dragend _this._triggerDragStart(evt, touch); // Drag start event _dispatchEvent({ sortable: _this, name: 'choose', originalEvent: evt }); // Chosen item toggleClass(dragEl, options.chosenClass, true); }; // Disable "draggable" options.ignore.split(',').forEach(function (criteria) { find(dragEl, criteria.trim(), _disableDraggable); }); on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent); on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent); on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent); if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._onDrop); // Native D&D triggers pointercancel !this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop); } else { on(ownerDocument, 'mouseup', _this._onDrop); on(ownerDocument, 'touchend', _this._onDrop); on(ownerDocument, 'touchcancel', _this._onDrop); } // Make dragEl draggable (must be before delay for FireFox) if (FireFox && this.nativeDraggable) { this.options.touchStartThreshold = 4; dragEl.draggable = true; } pluginEvent('delayStart', this, { evt: evt }); // Delay is impossible for native DnD in Edge or IE if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) { if (Sortable.eventCanceled) { this._onDrop(); return; } // If the user moves the pointer or let go the click or touch // before the delay has been reached: // disable the delayed drag if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._disableDelayedDrag); on(ownerDocument, 'pointercancel', _this._disableDelayedDrag); } else { on(ownerDocument, 'mouseup', _this._disableDelayedDrag); on(ownerDocument, 'touchend', _this._disableDelayedDrag); on(ownerDocument, 'touchcancel', _this._disableDelayedDrag); } on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler); on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler); options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler); _this._dragStartTimer = setTimeout(dragStartFn, options.delay); } else { dragStartFn(); } } }, _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler( /** TouchEvent|PointerEvent **/e) { var touch = e.touches ? e.touches[0] : e; if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) { this._disableDelayedDrag(); } }, _disableDelayedDrag: function _disableDelayedDrag() { dragEl && _disableDraggable(dragEl); clearTimeout(this._dragStartTimer); this._disableDelayedDragEvents(); }, _disableDelayedDragEvents: function _disableDelayedDragEvents() { var ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._disableDelayedDrag); off(ownerDocument, 'touchend', this._disableDelayedDrag); off(ownerDocument, 'touchcancel', this._disableDelayedDrag); off(ownerDocument, 'pointerup', this._disableDelayedDrag); off(ownerDocument, 'pointercancel', this._disableDelayedDrag); off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler); }, _triggerDragStart: function _triggerDragStart( /** Event */evt, /** Touch */touch) { touch = touch || evt.pointerType == 'touch' && evt; if (!this.nativeDraggable || touch) { if (this.options.supportPointer) { on(document, 'pointermove', this._onTouchMove); } else if (touch) { on(document, 'touchmove', this._onTouchMove); } else { on(document, 'mousemove', this._onTouchMove); } } else { on(dragEl, 'dragend', this); on(rootEl, 'dragstart', this._onDragStart); } try { if (document.selection) { _nextTick(function () { document.selection.empty(); }); } else { window.getSelection().removeAllRanges(); } } catch (err) {} }, _dragStarted: function _dragStarted(fallback, evt) { awaitingDragStarted = false; if (rootEl && dragEl) { pluginEvent('dragStarted', this, { evt: evt }); if (this.nativeDraggable) { on(document, 'dragover', _checkOutsideTargetEl); } var options = this.options; // Apply effect !fallback && toggleClass(dragEl, options.dragClass, false); toggleClass(dragEl, options.ghostClass, true); Sortable.active = this; fallback && this._appendGhost(); // Drag start event _dispatchEvent({ sortable: this, name: 'start', originalEvent: evt }); } else { this._nulling(); } }, _emulateDragOver: function _emulateDragOver() { if (touchEvt) { this._lastX = touchEvt.clientX; this._lastY = touchEvt.clientY; _hideGhostForTarget(); var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY); var parent = target; while (target && target.shadowRoot) { target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY); if (target === parent) break; parent = target; } dragEl.parentNode[expando]._isOutsideThisEl(target); if (parent) { do { if (parent[expando]) { var inserted = void 0; inserted = parent[expando]._onDragOver({ clientX: touchEvt.clientX, clientY: touchEvt.clientY, target: target, rootEl: parent }); if (inserted && !this.options.dragoverBubble) { break; } } target = parent; // store last element } /* jshint boss:true */ while (parent = getParentOrHost(parent)); } _unhideGhostForTarget(); } }, _onTouchMove: function _onTouchMove( /**TouchEvent*/evt) { if (tapEvt) { var options = this.options, fallbackTolerance = options.fallbackTolerance, fallbackOffset = options.fallbackOffset, touch = evt.touches ? evt.touches[0] : evt, ghostMatrix = ghostEl && matrix(ghostEl, true), scaleX = ghostEl && ghostMatrix && ghostMatrix.a, scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { return; } this._onDragStart(evt, true); } if (ghostEl) { if (ghostMatrix) { ghostMatrix.e += dx - (lastDx || 0); ghostMatrix.f += dy - (lastDy || 0); } else { ghostMatrix = { a: 1, b: 0, c: 0, d: 1, e: dx, f: dy }; } var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); css(ghostEl, 'webkitTransform', cssMatrix); css(ghostEl, 'mozTransform', cssMatrix); css(ghostEl, 'msTransform', cssMatrix); css(ghostEl, 'transform', cssMatrix); lastDx = dx; lastDy = dy; touchEvt = touch; } evt.cancelable && evt.preventDefault(); } }, _appendGhost: function _appendGhost() { // Bug if using scale(): https://stackoverflow.com/questions/2637058 // Not being adjusted for if (!ghostEl) { var container = this.options.fallbackOnBody ? document.body : rootEl, rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container), options = this.options; // Position absolutely if (PositionGhostAbsolutely) { // Get relatively positioned parent ghostRelativeParent = container; while (css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) { ghostRelativeParent = ghostRelativeParent.parentNode; } if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) { if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement(); rect.top += ghostRelativeParent.scrollTop; rect.left += ghostRelativeParent.scrollLeft; } else { ghostRelativeParent = getWindowScrollingElement(); } ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent); } ghostEl = dragEl.cloneNode(true); toggleClass(ghostEl, options.ghostClass, false); toggleClass(ghostEl, options.fallbackClass, true); toggleClass(ghostEl, options.dragClass, true); css(ghostEl, 'transition', ''); css(ghostEl, 'transform', ''); css(ghostEl, 'box-sizing', 'border-box'); css(ghostEl, 'margin', 0); css(ghostEl, 'top', rect.top); css(ghostEl, 'left', rect.left); css(ghostEl, 'width', rect.width); css(ghostEl, 'height', rect.height); css(ghostEl, 'opacity', '0.8'); css(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed'); css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; container.appendChild(ghostEl); // Set transform-origin css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); } }, _onDragStart: function _onDragStart( /**Event*/evt, /**boolean*/fallback) { var _this = this; var dataTransfer = evt.dataTransfer; var options = _this.options; pluginEvent('dragStart', this, { evt: evt }); if (Sortable.eventCanceled) { this._onDrop(); return; } pluginEvent('setupClone', this); if (!Sortable.eventCanceled) { cloneEl = clone(dragEl); cloneEl.removeAttribute("id"); cloneEl.draggable = false; cloneEl.style['will-change'] = ''; this._hideClone(); toggleClass(cloneEl, this.options.chosenClass, false); Sortable.clone = cloneEl; } // #1143: IFrame support workaround _this.cloneId = _nextTick(function () { pluginEvent('clone', _this); if (Sortable.eventCanceled) return; if (!_this.options.removeCloneOnHide) { rootEl.insertBefore(cloneEl, dragEl); } _this._hideClone(); _dispatchEvent({ sortable: _this, name: 'clone' }); }); !fallback && toggleClass(dragEl, options.dragClass, true); // Set proper drop events if (fallback) { ignoreNextClick = true; _this._loopId = setInterval(_this._emulateDragOver, 50); } else { // Undo what was set in _prepareDragStart before drag started off(document, 'mouseup', _this._onDrop); off(document, 'touchend', _this._onDrop); off(document, 'touchcancel', _this._onDrop); if (dataTransfer) { dataTransfer.effectAllowed = 'move'; options.setData && options.setData.call(_this, dataTransfer, dragEl); } on(document, 'drop', _this); // #1276 fix: css(dragEl, 'transform', 'translateZ(0)'); } awaitingDragStarted = true; _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt)); on(document, 'selectstart', _this); moved = true; window.getSelection().removeAllRanges(); if (Safari) { css(document.body, 'user-select', 'none'); } }, // Returns true - if no further action is needed (either inserted or another condition) _onDragOver: function _onDragOver( /**Event*/evt) { var el = this.el, target = evt.target, dragRect, targetRect, revert, options = this.options, group = options.group, activeSortable = Sortable.active, isOwner = activeGroup === group, canSort = options.sort, fromSortable = putSortable || activeSortable, vertical, _this = this, completedFired = false; if (_silent) return; function dragOverEvent(name, extra) { pluginEvent(name, _this, _objectSpread2({ evt: evt, isOwner: isOwner, axis: vertical ? 'vertical' : 'horizontal', revert: revert, dragRect: dragRect, targetRect: targetRect, canSort: canSort, fromSortable: fromSortable, target: target, completed: completed, onMove: function onMove(target, after) { return _onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after); }, changed: changed }, extra)); } // Capture animation state function capture() { dragOverEvent('dragOverAnimationCapture'); _this.captureAnimationState(); if (_this !== fromSortable) { fromSortable.captureAnimationState(); } } // Return invocation when dragEl is inserted (or completed) function completed(insertion) { dragOverEvent('dragOverCompleted', { insertion: insertion }); if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } else { activeSortable._showClone(_this); } if (_this !== fromSortable) { // Set ghost class to new sortable's ghost class toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false); toggleClass(dragEl, options.ghostClass, true); } if (putSortable !== _this && _this !== Sortable.active) { putSortable = _this; } else if (_this === Sortable.active && putSortable) { putSortable = null; } // Animation if (fromSortable === _this) { _this._ignoreWhileAnimating = target; } _this.animateAll(function () { dragOverEvent('dragOverAnimationComplete'); _this._ignoreWhileAnimating = null; }); if (_this !== fromSortable) { fromSortable.animateAll(); fromSortable._ignoreWhileAnimating = null; } } // Null lastTarget if it is not inside a previously swapped element if (target === dragEl && !dragEl.animated || target === el && !target.animated) { lastTarget = null; } // no bubbling and not fallback if (!options.dragoverBubble && !evt.rootEl && target !== document) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); // Do not detect for empty insert if already inserted !insertion && nearestEmptyInsertDetectEvent(evt); } !options.dragoverBubble && evt.stopPropagation && evt.stopPropagation(); return completedFired = true; } // Call when dragEl has been inserted function changed() { newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); _dispatchEvent({ sortable: _this, name: 'change', toEl: el, newIndex: newIndex, newDraggableIndex: newDraggableIndex, originalEvent: evt }); } if (evt.preventDefault !== void 0) { evt.cancelable && evt.preventDefault(); } target = closest(target, options.draggable, el, true); dragOverEvent('dragOver'); if (Sortable.eventCanceled) return completedFired; if (dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target) { return completed(false); } ignoreNextClick = false; if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = parentEl !== rootEl) // Reverting item into the original list : putSortable === this || (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt))) { vertical = this._getDirection(evt, target) === 'vertical'; dragRect = getRect(dragEl); dragOverEvent('dragOverValid'); if (Sortable.eventCanceled) return completedFired; if (revert) { parentEl = rootEl; // actualization capture(); this._hideClone(); dragOverEvent('revert'); if (!Sortable.eventCanceled) { if (nextEl) { rootEl.insertBefore(dragEl, nextEl); } else { rootEl.appendChild(dragEl); } } return completed(true); } var elLastChild = lastChild(el, options.draggable); if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) { // Insert to end of list // If already at end of list: Do not insert if (elLastChild === dragEl) { return completed(false); } // if there is a last element, it is the target if (elLastChild && el === evt.target) { target = elLastChild; } if (target) { targetRect = getRect(target); } if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) { capture(); if (elLastChild && elLastChild.nextSibling) { // the last draggable element is not the last node el.insertBefore(dragEl, elLastChild.nextSibling); } else { el.appendChild(dragEl); } parentEl = el; // actualization changed(); return completed(true); } } else if (elLastChild && _ghostIsFirst(evt, vertical, this)) { // Insert to start of list var firstChild = getChild(el, 0, options, true); if (firstChild === dragEl) { return completed(false); } target = firstChild; targetRect = getRect(target); if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) { capture(); el.insertBefore(dragEl, firstChild); parentEl = el; // actualization changed(); return completed(true); } } else if (target.parentNode === el) { targetRect = getRect(target); var direction = 0, targetBeforeFirstSwap, differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { targetBeforeFirstSwap = targetRect[side1]; pastFirstInvertThresh = false; isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel; } direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target); var sibling; if (direction !== 0) { // Check if target is beside dragEl in respective direction (ignoring hidden elements) var dragIndex = index(dragEl); do { dragIndex -= direction; sibling = parentEl.children[dragIndex]; } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl)); } // If dragEl is already beside target: Do not insert if (direction === 0 || sibling === target) { return completed(false); } lastTarget = target; lastDirection = direction; var nextSibling = target.nextElementSibling, after = false; after = direction === 1; var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after); if (moveVector !== false) { if (moveVector === 1 || moveVector === -1) { after = moveVector === 1; } _silent = true; setTimeout(_unsilent, 30); capture(); if (after && !nextSibling) { el.appendChild(dragEl); } else { target.parentNode.insertBefore(dragEl, after ? nextSibling : target); } // Undo chrome's scroll adjustment (has no effect on other browsers) if (scrolledPastTop) { scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop); } parentEl = dragEl.parentNode; // actualization // must be done before animation if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) { targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]); } changed(); return completed(true); } } if (el.contains(dragEl)) { return completed(false); } } return false; }, _ignoreWhileAnimating: null, _offMoveEvents: function _offMoveEvents() { off(document, 'mousemove', this._onTouchMove); off(document, 'touchmove', this._onTouchMove); off(document, 'pointermove', this._onTouchMove); off(document, 'dragover', nearestEmptyInsertDetectEvent); off(document, 'mousemove', nearestEmptyInsertDetectEvent); off(document, 'touchmove', nearestEmptyInsertDetectEvent); }, _offUpEvents: function _offUpEvents() { var ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._onDrop); off(ownerDocument, 'touchend', this._onDrop); off(ownerDocument, 'pointerup', this._onDrop); off(ownerDocument, 'pointercancel', this._onDrop); off(ownerDocument, 'touchcancel', this._onDrop); off(document, 'selectstart', this); }, _onDrop: function _onDrop( /**Event*/evt) { var el = this.el, options = this.options; // Get the index of the dragged element within its parent newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt: evt }); parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); if (Sortable.eventCanceled) { this._nulling(); return; } awaitingDragStarted = false; isCircumstantialInvert = false; pastFirstInvertThresh = false; clearInterval(this._loopId); clearTimeout(this._dragStartTimer); _cancelNextTick(this.cloneId); _cancelNextTick(this._dragStartId); // Unbind events if (this.nativeDraggable) { off(document, 'drop', this); off(el, 'dragstart', this._onDragStart); } this._offMoveEvents(); this._offUpEvents(); if (Safari) { css(document.body, 'user-select', ''); } css(dragEl, 'transform', ''); if (evt) { if (moved) { evt.cancelable && evt.preventDefault(); !options.dropBubble && evt.stopPropagation(); } ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl); if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { // Remove clone(s) cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl); } if (dragEl) { if (this.nativeDraggable) { off(dragEl, 'dragend', this); } _disableDraggable(dragEl); dragEl.style['will-change'] = ''; // Remove classes // ghostClass is added in dragStarted if (moved && !awaitingDragStarted) { toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false); } toggleClass(dragEl, this.options.chosenClass, false); // Drag stop event _dispatchEvent({ sortable: this, name: 'unchoose', toEl: parentEl, newIndex: null, newDraggableIndex: null, originalEvent: evt }); if (rootEl !== parentEl) { if (newIndex >= 0) { // Add event _dispatchEvent({ rootEl: parentEl, name: 'add', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); // Remove event _dispatchEvent({ sortable: this, name: 'remove', toEl: parentEl, originalEvent: evt }); // drag from one list and drop into another _dispatchEvent({ rootEl: parentEl, name: 'sort', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } putSortable && putSortable.save(); } else { if (newIndex !== oldIndex) { if (newIndex >= 0) { // drag & drop within the same list _dispatchEvent({ sortable: this, name: 'update', toEl: parentEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } } } if (Sortable.active) { /* jshint eqnull:true */ if (newIndex == null || newIndex === -1) { newIndex = oldIndex; newDraggableIndex = oldDraggableIndex; } _dispatchEvent({ sortable: this, name: 'end', toEl: parentEl, originalEvent: evt }); // Save sorting this.save(); } } } this._nulling(); }, _nulling: function _nulling() { pluginEvent('nulling', this); rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null; var el = this.el; savedInputChecked.forEach(function (checkEl) { if (el.contains(checkEl)) { checkEl.checked = true; } }); savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function handleEvent( /**Event*/evt) { switch (evt.type) { case 'drop': case 'dragend': this._onDrop(evt); break; case 'dragenter': case 'dragover': if (dragEl) { this._onDragOver(evt); _globalDragOver(evt); } break; case 'selectstart': evt.preventDefault(); break; } }, /** * Serializes the item into an array of string. * @returns {String[]} */ toArray: function toArray() { var order = [], el, children = this.el.children, i = 0, n = children.length, options = this.options; for (; i < n; i++) { el = children[i]; if (closest(el, options.draggable, this.el, false)) { order.push(el.getAttribute(options.dataIdAttr) || _generateId(el)); } } return order; }, /** * Sorts the elements according to the array. * @param {String[]} order order of the items */ sort: function sort(order, useAnimation) { var items = {}, rootEl = this.el; this.toArray().forEach(function (id, i) { var el = rootEl.children[i]; if (closest(el, this.options.draggable, rootEl, false)) { items[id] = el; } }, this); useAnimation && this.captureAnimationState(); order.forEach(function (id) { if (items[id]) { rootEl.removeChild(items[id]); rootEl.appendChild(items[id]); } }); useAnimation && this.animateAll(); }, /** * Save the current sorting */ save: function save() { var store = this.options.store; store && store.set && store.set(this); }, /** * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. * @param {HTMLElement} el * @param {String} [selector] default: `options.draggable` * @returns {HTMLElement|null} */ closest: function closest$1(el, selector) { return closest(el, selector || this.options.draggable, this.el, false); }, /** * Set/get option * @param {string} name * @param {*} [value] * @returns {*} */ option: function option(name, value) { var options = this.options; if (value === void 0) { return options[name]; } else { var modifiedValue = PluginManager.modifyOption(this, name, value); if (typeof modifiedValue !== 'undefined') { options[name] = modifiedValue; } else { options[name] = value; } if (name === 'group') { _prepareGroup(options); } } }, /** * Destroy */ destroy: function destroy() { pluginEvent('destroy', this); var el = this.el; el[expando] = null; off(el, 'mousedown', this._onTapStart); off(el, 'touchstart', this._onTapStart); off(el, 'pointerdown', this._onTapStart); if (this.nativeDraggable) { off(el, 'dragover', this); off(el, 'dragenter', this); } // Remove draggable attributes Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) { el.removeAttribute('draggable'); }); this._onDrop(); this._disableDelayedDragEvents(); sortables.splice(sortables.indexOf(this.el), 1); this.el = el = null; }, _hideClone: function _hideClone() { if (!cloneHidden) { pluginEvent('hideClone', this); if (Sortable.eventCanceled) return; css(cloneEl, 'display', 'none'); if (this.options.removeCloneOnHide && cloneEl.parentNode) { cloneEl.parentNode.removeChild(cloneEl); } cloneHidden = true; } }, _showClone: function _showClone(putSortable) { if (putSortable.lastPutMode !== 'clone') { this._hideClone(); return; } if (cloneHidden) { pluginEvent('showClone', this); if (Sortable.eventCanceled) return; // show clone at dragEl or original position if (dragEl.parentNode == rootEl && !this.options.group.revertClone) { rootEl.insertBefore(cloneEl, dragEl); } else if (nextEl) { rootEl.insertBefore(cloneEl, nextEl); } else { rootEl.appendChild(cloneEl); } if (this.options.group.revertClone) { this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); cloneHidden = false; } } }; function _globalDragOver( /**Event*/evt) { if (evt.dataTransfer) { evt.dataTransfer.dropEffect = 'move'; } evt.cancelable && evt.preventDefault(); } function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) { var evt, sortable = fromEl[expando], onMoveFn = sortable.options.onMove, retVal; // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent('move', { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent('move', true, true); } evt.to = toEl; evt.from = fromEl; evt.dragged = dragEl; evt.draggedRect = dragRect; evt.related = targetEl || toEl; evt.relatedRect = targetRect || getRect(toEl); evt.willInsertAfter = willInsertAfter; evt.originalEvent = originalEvent; fromEl.dispatchEvent(evt); if (onMoveFn) { retVal = onMoveFn.call(sortable, evt, originalEvent); } return retVal; } function _disableDraggable(el) { el.draggable = false; } function _unsilent() { _silent = false; } function _ghostIsFirst(evt, vertical, sortable) { var firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true)); var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); var spacer = 10; return vertical ? evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left; } function _ghostIsLast(evt, vertical, sortable) { var lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable)); var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); var spacer = 10; return vertical ? evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top; } function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) { var mouseOnAxis = vertical ? evt.clientY : evt.clientX, targetLength = vertical ? targetRect.height : targetRect.width, targetS1 = vertical ? targetRect.top : targetRect.left, targetS2 = vertical ? targetRect.bottom : targetRect.right, invert = false; if (!invertSwap) { // Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) { // multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2 // check if past first invert threshold on side opposite of lastDirection if (!pastFirstInvertThresh && (lastDirection === 1 ? mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 : mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2)) { // past first invert threshold, do not restrict inverted threshold to dragEl shadow pastFirstInvertThresh = true; } if (!pastFirstInvertThresh) { // dragEl shadow (target move distance shadow) if (lastDirection === 1 ? mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow : mouseOnAxis > targetS2 - targetMoveDistance) { return -lastDirection; } } else { invert = true; } } else { // Regular if (mouseOnAxis > targetS1 + targetLength * (1 - swapThreshold) / 2 && mouseOnAxis < targetS2 - targetLength * (1 - swapThreshold) / 2) { return _getInsertDirection(target); } } } invert = invert || invertSwap; if (invert) { // Invert of regular if (mouseOnAxis < targetS1 + targetLength * invertedSwapThreshold / 2 || mouseOnAxis > targetS2 - targetLength * invertedSwapThreshold / 2) { return mouseOnAxis > targetS1 + targetLength / 2 ? 1 : -1; } } return 0; } /** * Gets the direction dragEl must be swapped relative to target in order to make it * seem that dragEl has been "inserted" into that element's position * @param {HTMLElement} target The target whose position dragEl is being inserted at * @return {Number} Direction dragEl must be swapped */ function _getInsertDirection(target) { if (index(dragEl) < index(target)) { return 1; } else { return -1; } } /** * Generate id * @param {HTMLElement} el * @returns {String} * @private */ function _generateId(el) { var str = el.tagName + el.className + el.src + el.href + el.textContent, i = str.length, sum = 0; while (i--) { sum += str.charCodeAt(i); } return sum.toString(36); } function _saveInputCheckedState(root) { savedInputChecked.length = 0; var inputs = root.getElementsByTagName('input'); var idx = inputs.length; while (idx--) { var el = inputs[idx]; el.checked && savedInputChecked.push(el); } } function _nextTick(fn) { return setTimeout(fn, 0); } function _cancelNextTick(id) { return clearTimeout(id); } // Fixed #973: if (documentExists) { on(document, 'touchmove', function (evt) { if ((Sortable.active || awaitingDragStarted) && evt.cancelable) { evt.preventDefault(); } }); } // Export utils Sortable.utils = { on: on, off: off, css: css, find: find, is: function is(el, selector) { return !!closest(el, selector, el, false); }, extend: extend, throttle: throttle, closest: closest, toggleClass: toggleClass, clone: clone, index: index, nextTick: _nextTick, cancelNextTick: _cancelNextTick, detectDirection: _detectDirection, getChild: getChild, expando: expando }; /** * Get the Sortable instance of an element * @param {HTMLElement} element The element * @return {Sortable|undefined} The instance of Sortable */ Sortable.get = function (element) { return element[expando]; }; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ Sortable.mount = function () { for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { plugins[_key] = arguments[_key]; } if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach(function (plugin) { if (!plugin.prototype || !plugin.prototype.constructor) { throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); } if (plugin.utils) Sortable.utils = _objectSpread2(_objectSpread2({}, Sortable.utils), plugin.utils); PluginManager.mount(plugin); }); }; /** * Create sortable instance * @param {HTMLElement} el * @param {Object} [options] */ Sortable.create = function (el, options) { return new Sortable(el, options); }; // Export Sortable.version = version; var autoScrolls = [], scrollEl, scrollRootEl, scrolling = false, lastAutoScrollX, lastAutoScrollY, touchEvt$1, pointerElemChangedInterval; function AutoScrollPlugin() { function AutoScroll() { this.defaults = { scroll: true, forceAutoScrollFallback: false, scrollSensitivity: 30, scrollSpeed: 10, bubbleScroll: true }; // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } } AutoScroll.prototype = { dragStarted: function dragStarted(_ref) { var originalEvent = _ref.originalEvent; if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); } else { on(document, 'mousemove', this._handleFallbackAutoScroll); } } }, dragOverCompleted: function dragOverCompleted(_ref2) { var originalEvent = _ref2.originalEvent; // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, drop: function drop() { if (this.sortable.nativeDraggable) { off(document, 'dragover', this._handleAutoScroll); } else { off(document, 'pointermove', this._handleFallbackAutoScroll); off(document, 'touchmove', this._handleFallbackAutoScroll); off(document, 'mousemove', this._handleFallbackAutoScroll); } clearPointerElemChangedInterval(); clearAutoScrolls(); cancelThrottle(); }, nulling: function nulling() { touchEvt$1 = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null; autoScrolls.length = 0; }, _handleFallbackAutoScroll: function _handleFallbackAutoScroll(evt) { this._handleAutoScroll(evt, true); }, _handleAutoScroll: function _handleAutoScroll(evt, fallback) { var _this = this; var x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt$1 = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, // MACOS Safari does not have autoscroll, // Firefox and Chrome are good if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) { autoScroll(evt, this.options, elem, fallback); // Listener for pointer element change var ogElemScroller = getParentAutoScrollElement(elem, true); if (scrolling && (!pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY)) { pointerElemChangedInterval && clearPointerElemChangedInterval(); // Detect for pointer elem change, emulating native DnD behaviour pointerElemChangedInterval = setInterval(function () { var newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true); if (newElem !== ogElemScroller) { ogElemScroller = newElem; clearAutoScrolls(); } autoScroll(evt, _this.options, newElem, fallback); }, 10); lastAutoScrollX = x; lastAutoScrollY = y; } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false); } } }; return _extends(AutoScroll, { pluginName: 'scroll', initializeByDefault: true }); } function clearAutoScrolls() { autoScrolls.forEach(function (autoScroll) { clearInterval(autoScroll.pid); }); autoScrolls = []; } function clearPointerElemChangedInterval() { clearInterval(pointerElemChangedInterval); } var autoScroll = throttle(function (evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; var x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); var scrollThisInstance = false, scrollCustomFn; // New scroll root, set scrollEl if (scrollRootEl !== rootEl) { scrollRootEl = rootEl; clearAutoScrolls(); scrollEl = options.scroll; scrollCustomFn = options.scrollFn; if (scrollEl === true) { scrollEl = getParentAutoScrollElement(rootEl, true); } } var layersOut = 0; var currentParent = scrollEl; do { var el = currentParent, rect = getRect(el), top = rect.top, bottom = rect.bottom, left = rect.left, right = rect.right, width = rect.width, height = rect.height, canScrollX = void 0, canScrollY = void 0, scrollWidth = el.scrollWidth, scrollHeight = el.scrollHeight, elCSS = css(el), scrollPosX = el.scrollLeft, scrollPosY = el.scrollTop; if (el === winScroller) { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible'); } else { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (var i = 0; i <= layersOut; i++) { if (!autoScrolls[i]) { autoScrolls[i] = {}; } } } if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) { autoScrolls[layersOut].el = el; autoScrolls[layersOut].vx = vx; autoScrolls[layersOut].vy = vy; clearInterval(autoScrolls[layersOut].pid); if (vx != 0 || vy != 0) { scrollThisInstance = true; /* jshint loopfunc:true */ autoScrolls[layersOut].pid = setInterval(function () { // emulate drag over during autoscroll (fallback), emulating native DnD behaviour if (isFallback && this.layer === 0) { Sortable.active._onTouchMove(touchEvt$1); // To move ghost if it is positioned absolutely } var scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0; var scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0; if (typeof scrollCustomFn === 'function') { if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt$1, autoScrolls[this.layer].el) !== 'continue') { return; } } scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY); }.bind({ layer: layersOut }), 24); } } layersOut++; } while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false))); scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not }, 30); var drop = function drop(_ref) { var originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, dragEl = _ref.dragEl, activeSortable = _ref.activeSortable, dispatchSortableEvent = _ref.dispatchSortableEvent, hideGhostForTarget = _ref.hideGhostForTarget, unhideGhostForTarget = _ref.unhideGhostForTarget; if (!originalEvent) return; var toSortable = putSortable || activeSortable; hideGhostForTarget(); var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; var target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); this.onSpill({ dragEl: dragEl, putSortable: putSortable }); } }; function Revert() {} Revert.prototype = { startIndex: null, dragStart: function dragStart(_ref2) { var oldDraggableIndex = _ref2.oldDraggableIndex; this.startIndex = oldDraggableIndex; }, onSpill: function onSpill(_ref3) { var dragEl = _ref3.dragEl, putSortable = _ref3.putSortable; this.sortable.captureAnimationState(); if (putSortable) { putSortable.captureAnimationState(); } var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); } else { this.sortable.el.appendChild(dragEl); } this.sortable.animateAll(); if (putSortable) { putSortable.animateAll(); } }, drop: drop }; _extends(Revert, { pluginName: 'revertOnSpill' }); function Remove() {} Remove.prototype = { onSpill: function onSpill(_ref4) { var dragEl = _ref4.dragEl, putSortable = _ref4.putSortable; var parentSortable = putSortable || this.sortable; parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); parentSortable.animateAll(); }, drop: drop }; _extends(Remove, { pluginName: 'removeOnSpill' }); var lastSwapEl; function SwapPlugin() { function Swap() { this.defaults = { swapClass: 'sortable-swap-highlight' }; } Swap.prototype = { dragStart: function dragStart(_ref) { var dragEl = _ref.dragEl; lastSwapEl = dragEl; }, dragOverValid: function dragOverValid(_ref2) { var completed = _ref2.completed, target = _ref2.target, onMove = _ref2.onMove, activeSortable = _ref2.activeSortable, changed = _ref2.changed, cancel = _ref2.cancel; if (!activeSortable.options.swap) return; var el = this.sortable.el, options = this.options; if (target && target !== el) { var prevSwapEl = lastSwapEl; if (onMove(target) !== false) { toggleClass(target, options.swapClass, true); lastSwapEl = target; } else { lastSwapEl = null; } if (prevSwapEl && prevSwapEl !== lastSwapEl) { toggleClass(prevSwapEl, options.swapClass, false); } } changed(); completed(true); cancel(); }, drop: function drop(_ref3) { var activeSortable = _ref3.activeSortable, putSortable = _ref3.putSortable, dragEl = _ref3.dragEl; var toSortable = putSortable || this.sortable; var options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { if (dragEl !== lastSwapEl) { toSortable.captureAnimationState(); if (toSortable !== activeSortable) activeSortable.captureAnimationState(); swapNodes(dragEl, lastSwapEl); toSortable.animateAll(); if (toSortable !== activeSortable) activeSortable.animateAll(); } } }, nulling: function nulling() { lastSwapEl = null; } }; return _extends(Swap, { pluginName: 'swap', eventProperties: function eventProperties() { return { swapItem: lastSwapEl }; } }); } function swapNodes(n1, n2) { var p1 = n1.parentNode, p2 = n2.parentNode, i1, i2; if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; i1 = index(n1); i2 = index(n2); if (p1.isEqualNode(p2) && i1 < i2) { i2++; } p1.insertBefore(n2, p1.children[i1]); p2.insertBefore(n1, p2.children[i2]); } var multiDragElements = [], multiDragClones = [], lastMultiDragSelect, // for selection with modifier key down (SHIFT) multiDragSortable, initialFolding = false, // Initial multi-drag fold when drag started folding = false, // Folding any other time dragStarted = false, dragEl$1, clonesFromRect, clonesHidden; function MultiDragPlugin() { function MultiDrag(sortable) { // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } if (!sortable.options.avoidImplicitDeselect) { if (sortable.options.supportPointer) { on(document, 'pointerup', this._deselectMultiDrag); } else { on(document, 'mouseup', this._deselectMultiDrag); on(document, 'touchend', this._deselectMultiDrag); } } on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, avoidImplicitDeselect: false, setData: function setData(dataTransfer, dragEl) { var data = ''; if (multiDragElements.length && multiDragSortable === sortable) { multiDragElements.forEach(function (multiDragElement, i) { data += (!i ? '' : ', ') + multiDragElement.textContent; }); } else { data = dragEl.textContent; } dataTransfer.setData('Text', data); } }; } MultiDrag.prototype = { multiDragKeyDown: false, isMultiDrag: false, delayStartGlobal: function delayStartGlobal(_ref) { var dragged = _ref.dragEl; dragEl$1 = dragged; }, delayEnded: function delayEnded() { this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); }, setupClone: function setupClone(_ref2) { var sortable = _ref2.sortable, cancel = _ref2.cancel; if (!this.isMultiDrag) return; for (var i = 0; i < multiDragElements.length; i++) { multiDragClones.push(clone(multiDragElements[i])); multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; multiDragClones[i].draggable = false; multiDragClones[i].style['will-change'] = ''; toggleClass(multiDragClones[i], this.options.selectedClass, false); multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); cancel(); }, clone: function clone(_ref3) { var sortable = _ref3.sortable, rootEl = _ref3.rootEl, dispatchSortableEvent = _ref3.dispatchSortableEvent, cancel = _ref3.cancel; if (!this.isMultiDrag) return; if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); cancel(); } } }, showClone: function showClone(_ref4) { var cloneNowShown = _ref4.cloneNowShown, rootEl = _ref4.rootEl, cancel = _ref4.cancel; if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(function (clone) { css(clone, 'display', ''); }); cloneNowShown(); clonesHidden = false; cancel(); }, hideClone: function hideClone(_ref5) { var _this = this; var sortable = _ref5.sortable, cloneNowHidden = _ref5.cloneNowHidden, cancel = _ref5.cancel; if (!this.isMultiDrag) return; multiDragClones.forEach(function (clone) { css(clone, 'display', 'none'); if (_this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; cancel(); }, dragStartGlobal: function dragStartGlobal(_ref6) { var sortable = _ref6.sortable; if (!this.isMultiDrag && multiDragSortable) { multiDragSortable.multiDrag._deselectMultiDrag(); } multiDragElements.forEach(function (multiDragElement) { multiDragElement.sortableIndex = index(multiDragElement); }); // Sort multi-drag elements multiDragElements = multiDragElements.sort(function (a, b) { return a.sortableIndex - b.sortableIndex; }); dragStarted = true; }, dragStarted: function dragStarted(_ref7) { var _this2 = this; var sortable = _ref7.sortable; if (!this.isMultiDrag) return; if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, // show multi drag elements, // animate to rects, // unset rects & remove from DOM sortable.captureAnimationState(); if (this.options.animation) { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; css(multiDragElement, 'position', 'absolute'); }); var dragRect = getRect(dragEl$1, false, true, true); multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; setRect(multiDragElement, dragRect); }); folding = true; initialFolding = true; } } sortable.animateAll(function () { folding = false; initialFolding = false; if (_this2.options.animation) { multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled if (_this2.options.sort) { removeMultiDragElements(); } }); }, dragOver: function dragOver(_ref8) { var target = _ref8.target, completed = _ref8.completed, cancel = _ref8.cancel; if (folding && ~multiDragElements.indexOf(target)) { completed(false); cancel(); } }, revert: function revert(_ref9) { var fromSortable = _ref9.fromSortable, rootEl = _ref9.rootEl, sortable = _ref9.sortable, dragRect = _ref9.dragRect; if (multiDragElements.length > 1) { // Setup unfold animation multiDragElements.forEach(function (multiDragElement) { sortable.addAnimationState({ target: multiDragElement, rect: folding ? getRect(multiDragElement) : dragRect }); unsetRect(multiDragElement); multiDragElement.fromRect = dragRect; fromSortable.removeAnimationState(multiDragElement); }); folding = false; insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted: function dragOverCompleted(_ref10) { var sortable = _ref10.sortable, isOwner = _ref10.isOwner, insertion = _ref10.insertion, activeSortable = _ref10.activeSortable, parentEl = _ref10.parentEl, putSortable = _ref10.putSortable; var options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } initialFolding = false; // If leaving sort:false root, or already folding - Fold to new location if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) { // Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible var dragRectAbsolute = getRect(dragEl$1, false, true, true); multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; setRect(multiDragElement, dragRectAbsolute); // Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted // while folding, and so that we can capture them again because old sortable will no longer be fromSortable parentEl.appendChild(multiDragElement); }); folding = true; } // Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out if (!isOwner) { // Only remove if not folding (folding will remove them anyways) if (!folding) { removeMultiDragElements(); } if (multiDragElements.length > 1) { var clonesHiddenBefore = clonesHidden; activeSortable._showClone(sortable); // Unfold animation for clones if showing from hidden if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) { multiDragClones.forEach(function (clone) { activeSortable.addAnimationState({ target: clone, rect: clonesFromRect }); clone.fromRect = clonesFromRect; clone.thisAnimationDuration = null; }); } } else { activeSortable._showClone(sortable); } } } }, dragOverAnimationCapture: function dragOverAnimationCapture(_ref11) { var dragRect = _ref11.dragRect, isOwner = _ref11.isOwner, activeSortable = _ref11.activeSortable; multiDragElements.forEach(function (multiDragElement) { multiDragElement.thisAnimationDuration = null; }); if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) { clonesFromRect = _extends({}, dragRect); var dragMatrix = matrix(dragEl$1, true); clonesFromRect.top -= dragMatrix.f; clonesFromRect.left -= dragMatrix.e; } }, dragOverAnimationComplete: function dragOverAnimationComplete() { if (folding) { folding = false; removeMultiDragElements(); } }, drop: function drop(_ref12) { var evt = _ref12.originalEvent, rootEl = _ref12.rootEl, parentEl = _ref12.parentEl, sortable = _ref12.sortable, dispatchSortableEvent = _ref12.dispatchSortableEvent, oldIndex = _ref12.oldIndex, putSortable = _ref12.putSortable; var toSortable = putSortable || this.sortable; if (!evt) return; var options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { if (options.multiDragKey && !this.multiDragKeyDown) { this._deselectMultiDrag(); } toggleClass(dragEl$1, options.selectedClass, !~multiDragElements.indexOf(dragEl$1)); if (!~multiDragElements.indexOf(dragEl$1)) { multiDragElements.push(dragEl$1); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', targetEl: dragEl$1, originalEvent: evt }); // Modifier activated, select from last to dragEl if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { var lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl$1); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { (function () { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) var n, i; if (currentIndex > lastIndex) { i = lastIndex; n = currentIndex; } else { i = currentIndex; n = lastIndex + 1; } var filter = options.filter; for (; i < n; i++) { if (~multiDragElements.indexOf(children[i])) continue; // Check if element is draggable if (!closest(children[i], options.draggable, parentEl, false)) continue; // Check if element is filtered var filtered = filter && (typeof filter === 'function' ? filter.call(sortable, evt, children[i], sortable) : filter.split(',').some(function (criteria) { return closest(children[i], criteria.trim(), parentEl, false); })); if (filtered) continue; toggleClass(children[i], options.selectedClass, true); multiDragElements.push(children[i]); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', targetEl: children[i], originalEvent: evt }); } })(); } } else { lastMultiDragSelect = dragEl$1; } multiDragSortable = toSortable; } else { multiDragElements.splice(multiDragElements.indexOf(dragEl$1), 1); lastMultiDragSelect = null; dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'deselect', targetEl: dragEl$1, originalEvent: evt }); } } // Multi-drag drop if (dragStarted && this.isMultiDrag) { folding = false; // Do not "unfold" after around dragEl if reverted if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) { var dragRect = getRect(dragEl$1), multiDragIndex = index(dragEl$1, ':not(.' + this.options.selectedClass + ')'); if (!initialFolding && options.animation) dragEl$1.thisAnimationDuration = null; toSortable.captureAnimationState(); if (!initialFolding) { if (options.animation) { dragEl$1.fromRect = dragRect; multiDragElements.forEach(function (multiDragElement) { multiDragElement.thisAnimationDuration = null; if (multiDragElement !== dragEl$1) { var rect = folding ? getRect(multiDragElement) : dragRect; multiDragElement.fromRect = rect; // Prepare unfold animation toSortable.addAnimationState({ target: multiDragElement, rect: rect }); } }); } // Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert // properly they must all be removed removeMultiDragElements(); multiDragElements.forEach(function (multiDragElement) { if (children[multiDragIndex]) { parentEl.insertBefore(multiDragElement, children[multiDragIndex]); } else { parentEl.appendChild(multiDragElement); } multiDragIndex++; }); // If initial folding is done, the elements may have changed position because they are now // unfolding around dragEl, even though dragEl may not have his index changed, so update event // must be fired here as Sortable will not. if (oldIndex === index(dragEl$1)) { var update = false; multiDragElements.forEach(function (multiDragElement) { if (multiDragElement.sortableIndex !== index(multiDragElement)) { update = true; return; } }); if (update) { dispatchSortableEvent('update'); dispatchSortableEvent('sort'); } } } // Must be done after capturing individual rects (scroll bar) multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); toSortable.animateAll(); } multiDragSortable = toSortable; } // Remove clones if necessary if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { multiDragClones.forEach(function (clone) { clone.parentNode && clone.parentNode.removeChild(clone); }); } }, nullingGlobal: function nullingGlobal() { this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, destroyGlobal: function destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); off(document, 'mouseup', this._deselectMultiDrag); off(document, 'touchend', this._deselectMultiDrag); off(document, 'keydown', this._checkKeyDown); off(document, 'keyup', this._checkKeyUp); }, _deselectMultiDrag: function _deselectMultiDrag(evt) { if (typeof dragStarted !== "undefined" && dragStarted) return; // Only deselect if selection is in this sortable if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { var el = multiDragElements[0]; toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, rootEl: this.sortable.el, name: 'deselect', targetEl: el, originalEvent: evt }); } }, _checkKeyDown: function _checkKeyDown(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp: function _checkKeyUp(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } }; return _extends(MultiDrag, { // Static methods & properties pluginName: 'multiDrag', utils: { /** * Selects the provided multi-drag item * @param {HTMLElement} el The element to be selected */ select: function select(el) { var sortable = el.parentNode[expando]; if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return; if (multiDragSortable && multiDragSortable !== sortable) { multiDragSortable.multiDrag._deselectMultiDrag(); multiDragSortable = sortable; } toggleClass(el, sortable.options.selectedClass, true); multiDragElements.push(el); }, /** * Deselects the provided multi-drag item * @param {HTMLElement} el The element to be deselected */ deselect: function deselect(el) { var sortable = el.parentNode[expando], index = multiDragElements.indexOf(el); if (!sortable || !sortable.options.multiDrag || !~index) return; toggleClass(el, sortable.options.selectedClass, false); multiDragElements.splice(index, 1); } }, eventProperties: function eventProperties() { var _this3 = this; var oldIndicies = [], newIndicies = []; multiDragElements.forEach(function (multiDragElement) { oldIndicies.push({ multiDragElement: multiDragElement, index: multiDragElement.sortableIndex }); // multiDragElements will already be sorted if folding var newIndex; if (folding && multiDragElement !== dragEl$1) { newIndex = -1; } else if (folding) { newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } newIndicies.push({ multiDragElement: multiDragElement, index: newIndex }); }); return { items: _toConsumableArray(multiDragElements), clones: [].concat(multiDragClones), oldIndicies: oldIndicies, newIndicies: newIndicies }; }, optionListeners: { multiDragKey: function multiDragKey(key) { key = key.toLowerCase(); if (key === 'ctrl') { key = 'Control'; } else if (key.length > 1) { key = key.charAt(0).toUpperCase() + key.substr(1); } return key; } } }); } function insertMultiDragElements(clonesInserted, rootEl) { multiDragElements.forEach(function (multiDragElement, i) { var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(multiDragElement, target); } else { rootEl.appendChild(multiDragElement); } }); } /** * Insert multi-drag clones * @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted * @param {HTMLElement} rootEl */ function insertMultiDragClones(elementsInserted, rootEl) { multiDragClones.forEach(function (clone, i) { var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(clone, target); } else { rootEl.appendChild(clone); } }); } function removeMultiDragElements() { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement); }); } Sortable.mount(new AutoScrollPlugin()); Sortable.mount(Remove, Revert); Sortable.mount(new SwapPlugin()); Sortable.mount(new MultiDragPlugin()); export default Sortable; ================================================ FILE: modular/sortable.core.esm.js ================================================ /**! * Sortable 1.15.7 * @author RubaXa * @author owenm * @license MIT */ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); } function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } var version = "1.15.7"; function userAgent(pattern) { if (typeof window !== 'undefined' && window.navigator) { return !! /*@__PURE__*/navigator.userAgent.match(pattern); } } var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i); var Edge = userAgent(/Edge/i); var FireFox = userAgent(/firefox/i); var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i); var IOS = userAgent(/iP(ad|od|hone)/i); var ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i); var captureMode = { capture: false, passive: false }; function on(el, event, fn) { el.addEventListener(event, fn, !IE11OrLess && captureMode); } function off(el, event, fn) { el.removeEventListener(event, fn, !IE11OrLess && captureMode); } function matches( /**HTMLElement*/el, /**String*/selector) { if (!selector) return; selector[0] === '>' && (selector = selector.substring(1)); if (el) { try { if (el.matches) { return el.matches(selector); } else if (el.msMatchesSelector) { return el.msMatchesSelector(selector); } else if (el.webkitMatchesSelector) { return el.webkitMatchesSelector(selector); } } catch (_) { return false; } } return false; } function getParentOrHost(el) { return el.host && el !== document && el.host.nodeType && el.host !== el ? el.host : el.parentNode; } function closest( /**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) { if (el) { ctx = ctx || document; do { if (selector != null && (selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) { return el; } if (el === ctx) break; /* jshint boss:true */ } while (el = getParentOrHost(el)); } return null; } var R_SPACE = /\s+/g; function toggleClass(el, name, state) { if (el && name) { if (el.classList) { el.classList[state ? 'add' : 'remove'](name); } else { var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' '); el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' '); } } } function css(el, prop, val) { var style = el && el.style; if (style) { if (val === void 0) { if (document.defaultView && document.defaultView.getComputedStyle) { val = document.defaultView.getComputedStyle(el, ''); } else if (el.currentStyle) { val = el.currentStyle; } return prop === void 0 ? val : val[prop]; } else { if (!(prop in style) && prop.indexOf('webkit') === -1) { prop = '-webkit-' + prop; } style[prop] = val + (typeof val === 'string' ? '' : 'px'); } } } function matrix(el, selfOnly) { var appliedTransforms = ''; if (typeof el === 'string') { appliedTransforms = el; } else { do { var transform = css(el, 'transform'); if (transform && transform !== 'none') { appliedTransforms = transform + ' ' + appliedTransforms; } /* jshint boss:true */ } while (!selfOnly && (el = el.parentNode)); } var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix; /*jshint -W056 */ return matrixFn && new matrixFn(appliedTransforms); } function find(ctx, tagName, iterator) { if (ctx) { var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length; if (iterator) { for (; i < n; i++) { iterator(list[i], i); } } return list; } return []; } function getWindowScrollingElement() { var scrollingElement = document.scrollingElement; if (scrollingElement) { return scrollingElement; } else { return document.documentElement; } } /** * Returns the "bounding client rect" of given element * @param {HTMLElement} el The element whose boundingClientRect is wanted * @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container * @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr * @param {[Boolean]} undoScale Whether the container's scale() should be undone * @param {[HTMLElement]} container The parent the element will be placed in * @return {Object} The boundingClientRect of el, with specified adjustments */ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) { if (!el.getBoundingClientRect && el !== window) return; var elRect, top, left, bottom, right, height, width; if (el !== window && el.parentNode && el !== getWindowScrollingElement()) { elRect = el.getBoundingClientRect(); top = elRect.top; left = elRect.left; bottom = elRect.bottom; right = elRect.right; height = elRect.height; width = elRect.width; } else { top = 0; left = 0; bottom = window.innerHeight; right = window.innerWidth; height = window.innerHeight; width = window.innerWidth; } if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) { // Adjust for translate() container = container || el.parentNode; // solves #1123 (see: https://stackoverflow.com/a/37953806/6088312) // Not needed on <= IE11 if (!IE11OrLess) { do { if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static')) { var containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container top -= containerRect.top + parseInt(css(container, 'border-top-width')); left -= containerRect.left + parseInt(css(container, 'border-left-width')); bottom = top + elRect.height; right = left + elRect.width; break; } /* jshint boss:true */ } while (container = container.parentNode); } } if (undoScale && el !== window) { // Adjust for scale() var elMatrix = matrix(container || el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d; if (elMatrix) { top /= scaleY; left /= scaleX; width /= scaleX; height /= scaleY; bottom = top + height; right = left + width; } } return { top: top, left: left, bottom: bottom, right: right, width: width, height: height }; } /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ function isScrolledPast(el, elSide, parentSide) { var parent = getParentAutoScrollElement(el, true), elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { var parentSideVal = getRect(parent)[parentSide], visible = void 0; if (parentSide === 'top' || parentSide === 'left') { visible = elSideVal >= parentSideVal; } else { visible = elSideVal <= parentSideVal; } if (!visible) return parent; if (parent === getWindowScrollingElement()) break; parent = getParentAutoScrollElement(parent, false); } return false; } /** * Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible) * and non-draggable elements * @param {HTMLElement} el The parent element * @param {Number} childNum The index of the child * @param {Object} options Parent Sortable's options * @return {HTMLElement} The child at index childNum, or null if not found */ function getChild(el, childNum, options, includeDragEl) { var currentChild = 0, i = 0, children = el.children; while (i < children.length) { if (children[i].style.display !== 'none' && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false)) { if (currentChild === childNum) { return children[i]; } currentChild++; } i++; } return null; } /** * Gets the last child in the el, ignoring ghostEl or invisible elements (clones) * @param {HTMLElement} el Parent element * @param {selector} selector Any other elements that should be ignored * @return {HTMLElement} The last child, ignoring ghostEl */ function lastChild(el, selector) { var last = el.lastElementChild; while (last && (last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector))) { last = last.previousElementSibling; } return last || null; } /** * Returns the index of an element within its parent for a selected set of * elements * @param {HTMLElement} el * @param {selector} selector * @return {number} */ function index(el, selector) { var index = 0; if (!el || !el.parentNode) { return -1; } /* jshint boss:true */ while (el = el.previousElementSibling) { if (el.nodeName.toUpperCase() !== 'TEMPLATE' && el !== Sortable.clone && (!selector || matches(el, selector))) { index++; } } return index; } /** * Returns the scroll offset of the given element, added with all the scroll offsets of parent elements. * The value is returned in real pixels. * @param {HTMLElement} el * @return {Array} Offsets in the format of [left, top] */ function getRelativeScrollOffset(el) { var offsetLeft = 0, offsetTop = 0, winScroller = getWindowScrollingElement(); if (el) { do { var elMatrix = matrix(el), scaleX = elMatrix.a, scaleY = elMatrix.d; offsetLeft += el.scrollLeft * scaleX; offsetTop += el.scrollTop * scaleY; } while (el !== winScroller && (el = el.parentNode)); } return [offsetLeft, offsetTop]; } /** * Returns the index of the object within the given array * @param {Array} arr Array that may or may not hold the object * @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find * @return {Number} The index of the object in the array, or -1 */ function indexOfObject(arr, obj) { for (var i in arr) { if (!arr.hasOwnProperty(i)) continue; for (var key in obj) { if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i); } } return -1; } function getParentAutoScrollElement(el, includeSelf) { // skip to window if (!el || !el.getBoundingClientRect) return getWindowScrollingElement(); var elem = el; var gotSelf = false; do { // we don't need to get elem css if it isn't even overflowing in the first place (performance) if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) { var elemCSS = css(elem); if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) { if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement(); if (gotSelf || includeSelf) return elem; gotSelf = true; } } /* jshint boss:true */ } while (elem = elem.parentNode); return getWindowScrollingElement(); } function extend(dst, src) { if (dst && src) { for (var key in src) { if (src.hasOwnProperty(key)) { dst[key] = src[key]; } } } return dst; } function isRectEqual(rect1, rect2) { return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width); } var _throttleTimeout; function throttle(callback, ms) { return function () { if (!_throttleTimeout) { var args = arguments, _this = this; if (args.length === 1) { callback.call(_this, args[0]); } else { callback.apply(_this, args); } _throttleTimeout = setTimeout(function () { _throttleTimeout = void 0; }, ms); } }; } function cancelThrottle() { clearTimeout(_throttleTimeout); _throttleTimeout = void 0; } function scrollBy(el, x, y) { el.scrollLeft += x; el.scrollTop += y; } function clone(el) { var Polymer = window.Polymer; var $ = window.jQuery || window.Zepto; if (Polymer && Polymer.dom) { return Polymer.dom(el).cloneNode(true); } else if ($) { return $(el).clone(true)[0]; } else { return el.cloneNode(true); } } function setRect(el, rect) { css(el, 'position', 'absolute'); css(el, 'top', rect.top); css(el, 'left', rect.left); css(el, 'width', rect.width); css(el, 'height', rect.height); } function unsetRect(el) { css(el, 'position', ''); css(el, 'top', ''); css(el, 'left', ''); css(el, 'width', ''); css(el, 'height', ''); } function getChildContainingRectFromElement(container, options, ghostEl) { var rect = {}; Array.from(container.children).forEach(function (child) { var _rect$left, _rect$top, _rect$right, _rect$bottom; if (!closest(child, options.draggable, container, false) || child.animated || child === ghostEl) return; var childRect = getRect(child); rect.left = Math.min((_rect$left = rect.left) !== null && _rect$left !== void 0 ? _rect$left : Infinity, childRect.left); rect.top = Math.min((_rect$top = rect.top) !== null && _rect$top !== void 0 ? _rect$top : Infinity, childRect.top); rect.right = Math.max((_rect$right = rect.right) !== null && _rect$right !== void 0 ? _rect$right : -Infinity, childRect.right); rect.bottom = Math.max((_rect$bottom = rect.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : -Infinity, childRect.bottom); }); rect.width = rect.right - rect.left; rect.height = rect.bottom - rect.top; rect.x = rect.left; rect.y = rect.top; return rect; } var expando = 'Sortable' + new Date().getTime(); function AnimationStateManager() { var animationStates = [], animationCallbackId; return { captureAnimationState: function captureAnimationState() { animationStates = []; if (!this.options.animation) return; var children = [].slice.call(this.el.children); children.forEach(function (child) { if (css(child, 'display') === 'none' || child === Sortable.ghost) return; animationStates.push({ target: child, rect: getRect(child) }); var fromRect = _objectSpread2({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation if (child.thisAnimationDuration) { var childMatrix = matrix(child, true); if (childMatrix) { fromRect.top -= childMatrix.f; fromRect.left -= childMatrix.e; } } child.fromRect = fromRect; }); }, addAnimationState: function addAnimationState(state) { animationStates.push(state); }, removeAnimationState: function removeAnimationState(target) { animationStates.splice(indexOfObject(animationStates, { target: target }), 1); }, animateAll: function animateAll(callback) { var _this = this; if (!this.options.animation) { clearTimeout(animationCallbackId); if (typeof callback === 'function') callback(); return; } var animating = false, animationTime = 0; animationStates.forEach(function (state) { var time = 0, target = state.target, fromRect = target.fromRect, toRect = getRect(target), prevFromRect = target.prevFromRect, prevToRect = target.prevToRect, animatingRect = state.rect, targetMatrix = matrix(target, true); if (targetMatrix) { // Compensate for current animation toRect.top -= targetMatrix.f; toRect.left -= targetMatrix.e; } target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect if (isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) && // Make sure animatingRect is on line between toRect & fromRect (animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left)) { // If returning to same place as started from animation and on same axis time = calculateRealTime(animatingRect, prevFromRect, prevToRect, _this.options); } } // if fromRect != toRect: animate if (!isRectEqual(toRect, fromRect)) { target.prevFromRect = fromRect; target.prevToRect = toRect; if (!time) { time = _this.options.animation; } _this.animate(target, animatingRect, toRect, time); } if (time) { animating = true; animationTime = Math.max(animationTime, time); clearTimeout(target.animationResetTimer); target.animationResetTimer = setTimeout(function () { target.animationTime = 0; target.prevFromRect = null; target.fromRect = null; target.prevToRect = null; target.thisAnimationDuration = null; }, time); target.thisAnimationDuration = time; } }); clearTimeout(animationCallbackId); if (!animating) { if (typeof callback === 'function') callback(); } else { animationCallbackId = setTimeout(function () { if (typeof callback === 'function') callback(); }, animationTime); } animationStates = []; }, animate: function animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); var elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, translateX = (currentRect.left - toRect.left) / (scaleX || 1), translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); this.forRepaintDummy = repaint(target); // repaint css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : '')); css(target, 'transform', 'translate3d(0,0,0)'); typeof target.animated === 'number' && clearTimeout(target.animated); target.animated = setTimeout(function () { css(target, 'transition', ''); css(target, 'transform', ''); target.animated = false; target.animatingX = false; target.animatingY = false; }, duration); } } }; } function repaint(target) { return target.offsetWidth; } function calculateRealTime(animatingRect, fromRect, toRect, options) { return Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) * options.animation; } var plugins = []; var defaults = { initializeByDefault: true }; var PluginManager = { mount: function mount(plugin) { // Set default static properties for (var option in defaults) { if (defaults.hasOwnProperty(option) && !(option in plugin)) { plugin[option] = defaults[option]; } } plugins.forEach(function (p) { if (p.pluginName === plugin.pluginName) { throw "Sortable: Cannot mount plugin ".concat(plugin.pluginName, " more than once"); } }); plugins.push(plugin); }, pluginEvent: function pluginEvent(eventName, sortable, evt) { var _this = this; this.eventCanceled = false; evt.cancel = function () { _this.eventCanceled = true; }; var eventNameGlobal = eventName + 'Global'; plugins.forEach(function (plugin) { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if (sortable[plugin.pluginName][eventNameGlobal]) { sortable[plugin.pluginName][eventNameGlobal](_objectSpread2({ sortable: sortable }, evt)); } // Only fire plugin event if plugin is enabled in this sortable, // and plugin has event defined if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { sortable[plugin.pluginName][eventName](_objectSpread2({ sortable: sortable }, evt)); } }); }, initializePlugins: function initializePlugins(sortable, el, defaults, options) { plugins.forEach(function (plugin) { var pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; var initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin _extends(defaults, initialized.defaults); }); for (var option in sortable.options) { if (!sortable.options.hasOwnProperty(option)) continue; var modified = this.modifyOption(sortable, option, sortable.options[option]); if (typeof modified !== 'undefined') { sortable.options[option] = modified; } } }, getEventProperties: function getEventProperties(name, sortable) { var eventProperties = {}; plugins.forEach(function (plugin) { if (typeof plugin.eventProperties !== 'function') return; _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); return eventProperties; }, modifyOption: function modifyOption(sortable, name, value) { var modifiedValue; plugins.forEach(function (plugin) { // Plugin must exist on the Sortable if (!sortable[plugin.pluginName]) return; // If static option listener exists for this option, call in the context of the Sortable's instance of this plugin if (plugin.optionListeners && typeof plugin.optionListeners[name] === 'function') { modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value); } }); return modifiedValue; } }; function dispatchEvent(_ref) { var sortable = _ref.sortable, rootEl = _ref.rootEl, name = _ref.name, targetEl = _ref.targetEl, cloneEl = _ref.cloneEl, toEl = _ref.toEl, fromEl = _ref.fromEl, oldIndex = _ref.oldIndex, newIndex = _ref.newIndex, oldDraggableIndex = _ref.oldDraggableIndex, newDraggableIndex = _ref.newDraggableIndex, originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, extraEventProperties = _ref.extraEventProperties; sortable = sortable || rootEl && rootEl[expando]; if (!sortable) return; var evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent(name, { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent(name, true, true); } evt.to = toEl || rootEl; evt.from = fromEl || rootEl; evt.item = targetEl || rootEl; evt.clone = cloneEl; evt.oldIndex = oldIndex; evt.newIndex = newIndex; evt.oldDraggableIndex = oldDraggableIndex; evt.newDraggableIndex = newDraggableIndex; evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; var allEventProperties = _objectSpread2(_objectSpread2({}, extraEventProperties), PluginManager.getEventProperties(name, sortable)); for (var option in allEventProperties) { evt[option] = allEventProperties[option]; } if (rootEl) { rootEl.dispatchEvent(evt); } if (options[onName]) { options[onName].call(sortable, evt); } } var _excluded = ["evt"]; var pluginEvent = function pluginEvent(eventName, sortable) { var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, originalEvent = _ref.evt, data = _objectWithoutProperties(_ref, _excluded); PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread2({ dragEl: dragEl, parentEl: parentEl, ghostEl: ghostEl, rootEl: rootEl, nextEl: nextEl, lastDownEl: lastDownEl, cloneEl: cloneEl, cloneHidden: cloneHidden, dragStarted: moved, putSortable: putSortable, activeSortable: Sortable.active, originalEvent: originalEvent, oldIndex: oldIndex, oldDraggableIndex: oldDraggableIndex, newIndex: newIndex, newDraggableIndex: newDraggableIndex, hideGhostForTarget: _hideGhostForTarget, unhideGhostForTarget: _unhideGhostForTarget, cloneNowHidden: function cloneNowHidden() { cloneHidden = true; }, cloneNowShown: function cloneNowShown() { cloneHidden = false; }, dispatchSortableEvent: function dispatchSortableEvent(name) { _dispatchEvent({ sortable: sortable, name: name, originalEvent: originalEvent }); } }, data)); }; function _dispatchEvent(info) { dispatchEvent(_objectSpread2({ putSortable: putSortable, cloneEl: cloneEl, targetEl: dragEl, rootEl: rootEl, oldIndex: oldIndex, oldDraggableIndex: oldDraggableIndex, newIndex: newIndex, newDraggableIndex: newDraggableIndex }, info)); } var dragEl, parentEl, ghostEl, rootEl, nextEl, lastDownEl, cloneEl, cloneHidden, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, activeGroup, putSortable, awaitingDragStarted = false, ignoreNextClick = false, sortables = [], tapEvt, touchEvt, lastDx, lastDy, tapDistanceLeft, tapDistanceTop, moved, lastTarget, lastDirection, pastFirstInvertThresh = false, isCircumstantialInvert = false, targetMoveDistance, // For positioning ghost absolutely ghostRelativeParent, ghostRelativeParentInitialScroll = [], // (left, top) _silent = false, savedInputChecked = []; /** @const */ var documentExists = typeof document !== 'undefined', PositionGhostAbsolutely = IOS, CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float', // This will not pass for IE9, because IE9 DnD only works on anchors supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'), supportCssPointerEvents = function () { if (!documentExists) return; // false when <= IE11 if (IE11OrLess) { return false; } var el = document.createElement('x'); el.style.cssText = 'pointer-events:auto'; return el.style.pointerEvents === 'auto'; }(), _detectDirection = function _detectDirection(el, options) { var elCSS = css(el), elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth), child1 = getChild(el, 0, options), child2 = getChild(el, 1, options), firstChildCSS = child1 && css(child1), secondChildCSS = child2 && css(child2), firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width, secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width; if (elCSS.display === 'flex') { return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal'; } if (elCSS.display === 'grid') { return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } return child1 && (firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth) ? 'vertical' : 'horizontal'; }, _dragElInRowColumn = function _dragElInRowColumn(dragRect, targetRect, vertical) { var dragElS1Opp = vertical ? dragRect.left : dragRect.top, dragElS2Opp = vertical ? dragRect.right : dragRect.bottom, dragElOppLength = vertical ? dragRect.width : dragRect.height, targetS1Opp = vertical ? targetRect.left : targetRect.top, targetS2Opp = vertical ? targetRect.right : targetRect.bottom, targetOppLength = vertical ? targetRect.width : targetRect.height; return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2; }, /** * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold. * @param {Number} x X position * @param {Number} y Y position * @return {HTMLElement} Element of the first found nearest Sortable */ _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { var ret; sortables.some(function (sortable) { var threshold = sortable[expando].options.emptyInsertThreshold; if (!threshold || lastChild(sortable)) return; var rect = getRect(sortable), insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold, insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold; if (insideHorizontally && insideVertically) { return ret = sortable; } }); return ret; }, _prepareGroup = function _prepareGroup(options) { function toFn(value, pull) { return function (to, from, dragEl, evt) { var sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name; if (value == null && (pull || sameGroup)) { // Default pull value // Default pull and put value if same group return true; } else if (value == null || value === false) { return false; } else if (pull && value === 'clone') { return value; } else if (typeof value === 'function') { return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt); } else { var otherGroup = (pull ? to : from).options.group.name; return value === true || typeof value === 'string' && value === otherGroup || value.join && value.indexOf(otherGroup) > -1; } }; } var group = {}; var originalGroup = options.group; if (!originalGroup || _typeof(originalGroup) != 'object') { originalGroup = { name: originalGroup }; } group.name = originalGroup.name; group.checkPull = toFn(originalGroup.pull, true); group.checkPut = toFn(originalGroup.put); group.revertClone = originalGroup.revertClone; options.group = group; }, _hideGhostForTarget = function _hideGhostForTarget() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', 'none'); } }, _unhideGhostForTarget = function _unhideGhostForTarget() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', ''); } }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position if (documentExists && !ChromeForAndroid) { document.addEventListener('click', function (evt) { if (ignoreNextClick) { evt.preventDefault(); evt.stopPropagation && evt.stopPropagation(); evt.stopImmediatePropagation && evt.stopImmediatePropagation(); ignoreNextClick = false; return false; } }, true); } var nearestEmptyInsertDetectEvent = function nearestEmptyInsertDetectEvent(evt) { if (dragEl) { evt = evt.touches ? evt.touches[0] : evt; var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY); if (nearest) { // Create imitation event var event = {}; for (var i in evt) { if (evt.hasOwnProperty(i)) { event[i] = evt[i]; } } event.target = event.rootEl = nearest; event.preventDefault = void 0; event.stopPropagation = void 0; nearest[expando]._onDragOver(event); } } }; var _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) { if (dragEl) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); } }; /** * @class Sortable * @param {HTMLElement} el * @param {Object} [options] */ function Sortable(el, options) { if (!(el && el.nodeType && el.nodeType === 1)) { throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(el)); } this.el = el; // root element this.options = options = _extends({}, options); // Export instance el[expando] = this; var defaults = { group: null, sort: true, disabled: false, store: null, handle: null, draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*', swapThreshold: 1, // percentage; 0 <= x <= 1 invertSwap: false, // invert always invertedSwapThreshold: null, // will be set to same as swapThreshold if default removeCloneOnHide: true, direction: function direction() { return _detectDirection(el, this.options); }, ghostClass: 'sortable-ghost', chosenClass: 'sortable-chosen', dragClass: 'sortable-drag', ignore: 'a, img', filter: null, preventOnFilter: true, animation: 0, easing: null, setData: function setData(dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent); }, dropBubble: false, dragoverBubble: false, dataIdAttr: 'data-id', delay: 0, delayOnTouchOnly: false, touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1, forceFallback: false, fallbackClass: 'sortable-fallback', fallbackOnBody: false, fallbackTolerance: 0, fallbackOffset: { x: 0, y: 0 }, // Disabled on Safari: #1571; Enabled on Safari IOS: #2244 supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && (!Safari || IOS), emptyInsertThreshold: 5 }; PluginManager.initializePlugins(this, el, defaults); // Set default options for (var name in defaults) { !(name in options) && (options[name] = defaults[name]); } _prepareGroup(options); // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } // Setup drag mode this.nativeDraggable = options.forceFallback ? false : supportDraggable; if (this.nativeDraggable) { // Touch start threshold cannot be greater than the native dragstart threshold this.options.touchStartThreshold = 1; } // Bind events if (options.supportPointer) { on(el, 'pointerdown', this._onTapStart); } else { on(el, 'mousedown', this._onTapStart); on(el, 'touchstart', this._onTapStart); } if (this.nativeDraggable) { on(el, 'dragover', this); on(el, 'dragenter', this); } sortables.push(this.el); // Restore sorting options.store && options.store.get && this.sort(options.store.get(this) || []); // Add animation state manager _extends(this, AnimationStateManager()); } Sortable.prototype = /** @lends Sortable.prototype */{ constructor: Sortable, _isOutsideThisEl: function _isOutsideThisEl(target) { if (!this.el.contains(target) && target !== this.el) { lastTarget = null; } }, _getDirection: function _getDirection(evt, target) { return typeof this.options.direction === 'function' ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction; }, _onTapStart: function _onTapStart( /** Event|TouchEvent */evt) { if (!evt.cancelable) return; var _this = this, el = this.el, options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, target = (touch || evt).target, originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, filter = options.filter; _saveInputCheckedState(el); // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group. if (dragEl) { return; } if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) { return; // only left button and enabled } // cancel dnd if original target is content editable if (originalTarget.isContentEditable) { return; } // Safari ignores further event handling after mousedown if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') { return; } target = closest(target, options.draggable, el, false); if (target && target.animated) { return; } if (lastDownEl === target) { // Ignoring duplicate `down` return; } // Get the index of the dragged element within its parent oldIndex = index(target); oldDraggableIndex = index(target, options.draggable); // Check filter if (typeof filter === 'function') { if (filter.call(this, evt, target, this)) { _dispatchEvent({ sortable: _this, rootEl: originalTarget, name: 'filter', targetEl: target, toEl: el, fromEl: el }); pluginEvent('filter', _this, { evt: evt }); preventOnFilter && evt.preventDefault(); return; // cancel dnd } } else if (filter) { filter = filter.split(',').some(function (criteria) { criteria = closest(originalTarget, criteria.trim(), el, false); if (criteria) { _dispatchEvent({ sortable: _this, rootEl: criteria, name: 'filter', targetEl: target, fromEl: el, toEl: el }); pluginEvent('filter', _this, { evt: evt }); return true; } }); if (filter) { preventOnFilter && evt.preventDefault(); return; // cancel dnd } } if (options.handle && !closest(originalTarget, options.handle, el, false)) { return; } // Prepare `dragstart` this._prepareDragStart(evt, touch, target); }, _prepareDragStart: function _prepareDragStart( /** Event */evt, /** Touch */touch, /** HTMLElement */target) { var _this = this, el = _this.el, options = _this.options, ownerDocument = el.ownerDocument, dragStartFn; if (target && !dragEl && target.parentNode === el) { var dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; nextEl = dragEl.nextSibling; lastDownEl = target; activeGroup = options.group; Sortable.dragged = dragEl; tapEvt = { target: dragEl, clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; tapDistanceLeft = tapEvt.clientX - dragRect.left; tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; dragStartFn = function dragStartFn() { pluginEvent('delayEnded', _this, { evt: evt }); if (Sortable.eventCanceled) { _this._onDrop(); return; } // Delayed drag has been triggered // we can re-enable the events: touchmove/mousemove _this._disableDelayedDragEvents(); if (!FireFox && _this.nativeDraggable) { dragEl.draggable = true; } // Bind the events: dragstart/dragend _this._triggerDragStart(evt, touch); // Drag start event _dispatchEvent({ sortable: _this, name: 'choose', originalEvent: evt }); // Chosen item toggleClass(dragEl, options.chosenClass, true); }; // Disable "draggable" options.ignore.split(',').forEach(function (criteria) { find(dragEl, criteria.trim(), _disableDraggable); }); on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent); on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent); on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent); if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._onDrop); // Native D&D triggers pointercancel !this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop); } else { on(ownerDocument, 'mouseup', _this._onDrop); on(ownerDocument, 'touchend', _this._onDrop); on(ownerDocument, 'touchcancel', _this._onDrop); } // Make dragEl draggable (must be before delay for FireFox) if (FireFox && this.nativeDraggable) { this.options.touchStartThreshold = 4; dragEl.draggable = true; } pluginEvent('delayStart', this, { evt: evt }); // Delay is impossible for native DnD in Edge or IE if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) { if (Sortable.eventCanceled) { this._onDrop(); return; } // If the user moves the pointer or let go the click or touch // before the delay has been reached: // disable the delayed drag if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._disableDelayedDrag); on(ownerDocument, 'pointercancel', _this._disableDelayedDrag); } else { on(ownerDocument, 'mouseup', _this._disableDelayedDrag); on(ownerDocument, 'touchend', _this._disableDelayedDrag); on(ownerDocument, 'touchcancel', _this._disableDelayedDrag); } on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler); on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler); options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler); _this._dragStartTimer = setTimeout(dragStartFn, options.delay); } else { dragStartFn(); } } }, _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler( /** TouchEvent|PointerEvent **/e) { var touch = e.touches ? e.touches[0] : e; if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) { this._disableDelayedDrag(); } }, _disableDelayedDrag: function _disableDelayedDrag() { dragEl && _disableDraggable(dragEl); clearTimeout(this._dragStartTimer); this._disableDelayedDragEvents(); }, _disableDelayedDragEvents: function _disableDelayedDragEvents() { var ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._disableDelayedDrag); off(ownerDocument, 'touchend', this._disableDelayedDrag); off(ownerDocument, 'touchcancel', this._disableDelayedDrag); off(ownerDocument, 'pointerup', this._disableDelayedDrag); off(ownerDocument, 'pointercancel', this._disableDelayedDrag); off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler); }, _triggerDragStart: function _triggerDragStart( /** Event */evt, /** Touch */touch) { touch = touch || evt.pointerType == 'touch' && evt; if (!this.nativeDraggable || touch) { if (this.options.supportPointer) { on(document, 'pointermove', this._onTouchMove); } else if (touch) { on(document, 'touchmove', this._onTouchMove); } else { on(document, 'mousemove', this._onTouchMove); } } else { on(dragEl, 'dragend', this); on(rootEl, 'dragstart', this._onDragStart); } try { if (document.selection) { _nextTick(function () { document.selection.empty(); }); } else { window.getSelection().removeAllRanges(); } } catch (err) {} }, _dragStarted: function _dragStarted(fallback, evt) { awaitingDragStarted = false; if (rootEl && dragEl) { pluginEvent('dragStarted', this, { evt: evt }); if (this.nativeDraggable) { on(document, 'dragover', _checkOutsideTargetEl); } var options = this.options; // Apply effect !fallback && toggleClass(dragEl, options.dragClass, false); toggleClass(dragEl, options.ghostClass, true); Sortable.active = this; fallback && this._appendGhost(); // Drag start event _dispatchEvent({ sortable: this, name: 'start', originalEvent: evt }); } else { this._nulling(); } }, _emulateDragOver: function _emulateDragOver() { if (touchEvt) { this._lastX = touchEvt.clientX; this._lastY = touchEvt.clientY; _hideGhostForTarget(); var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY); var parent = target; while (target && target.shadowRoot) { target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY); if (target === parent) break; parent = target; } dragEl.parentNode[expando]._isOutsideThisEl(target); if (parent) { do { if (parent[expando]) { var inserted = void 0; inserted = parent[expando]._onDragOver({ clientX: touchEvt.clientX, clientY: touchEvt.clientY, target: target, rootEl: parent }); if (inserted && !this.options.dragoverBubble) { break; } } target = parent; // store last element } /* jshint boss:true */ while (parent = getParentOrHost(parent)); } _unhideGhostForTarget(); } }, _onTouchMove: function _onTouchMove( /**TouchEvent*/evt) { if (tapEvt) { var options = this.options, fallbackTolerance = options.fallbackTolerance, fallbackOffset = options.fallbackOffset, touch = evt.touches ? evt.touches[0] : evt, ghostMatrix = ghostEl && matrix(ghostEl, true), scaleX = ghostEl && ghostMatrix && ghostMatrix.a, scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { return; } this._onDragStart(evt, true); } if (ghostEl) { if (ghostMatrix) { ghostMatrix.e += dx - (lastDx || 0); ghostMatrix.f += dy - (lastDy || 0); } else { ghostMatrix = { a: 1, b: 0, c: 0, d: 1, e: dx, f: dy }; } var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); css(ghostEl, 'webkitTransform', cssMatrix); css(ghostEl, 'mozTransform', cssMatrix); css(ghostEl, 'msTransform', cssMatrix); css(ghostEl, 'transform', cssMatrix); lastDx = dx; lastDy = dy; touchEvt = touch; } evt.cancelable && evt.preventDefault(); } }, _appendGhost: function _appendGhost() { // Bug if using scale(): https://stackoverflow.com/questions/2637058 // Not being adjusted for if (!ghostEl) { var container = this.options.fallbackOnBody ? document.body : rootEl, rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container), options = this.options; // Position absolutely if (PositionGhostAbsolutely) { // Get relatively positioned parent ghostRelativeParent = container; while (css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) { ghostRelativeParent = ghostRelativeParent.parentNode; } if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) { if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement(); rect.top += ghostRelativeParent.scrollTop; rect.left += ghostRelativeParent.scrollLeft; } else { ghostRelativeParent = getWindowScrollingElement(); } ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent); } ghostEl = dragEl.cloneNode(true); toggleClass(ghostEl, options.ghostClass, false); toggleClass(ghostEl, options.fallbackClass, true); toggleClass(ghostEl, options.dragClass, true); css(ghostEl, 'transition', ''); css(ghostEl, 'transform', ''); css(ghostEl, 'box-sizing', 'border-box'); css(ghostEl, 'margin', 0); css(ghostEl, 'top', rect.top); css(ghostEl, 'left', rect.left); css(ghostEl, 'width', rect.width); css(ghostEl, 'height', rect.height); css(ghostEl, 'opacity', '0.8'); css(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed'); css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; container.appendChild(ghostEl); // Set transform-origin css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); } }, _onDragStart: function _onDragStart( /**Event*/evt, /**boolean*/fallback) { var _this = this; var dataTransfer = evt.dataTransfer; var options = _this.options; pluginEvent('dragStart', this, { evt: evt }); if (Sortable.eventCanceled) { this._onDrop(); return; } pluginEvent('setupClone', this); if (!Sortable.eventCanceled) { cloneEl = clone(dragEl); cloneEl.removeAttribute("id"); cloneEl.draggable = false; cloneEl.style['will-change'] = ''; this._hideClone(); toggleClass(cloneEl, this.options.chosenClass, false); Sortable.clone = cloneEl; } // #1143: IFrame support workaround _this.cloneId = _nextTick(function () { pluginEvent('clone', _this); if (Sortable.eventCanceled) return; if (!_this.options.removeCloneOnHide) { rootEl.insertBefore(cloneEl, dragEl); } _this._hideClone(); _dispatchEvent({ sortable: _this, name: 'clone' }); }); !fallback && toggleClass(dragEl, options.dragClass, true); // Set proper drop events if (fallback) { ignoreNextClick = true; _this._loopId = setInterval(_this._emulateDragOver, 50); } else { // Undo what was set in _prepareDragStart before drag started off(document, 'mouseup', _this._onDrop); off(document, 'touchend', _this._onDrop); off(document, 'touchcancel', _this._onDrop); if (dataTransfer) { dataTransfer.effectAllowed = 'move'; options.setData && options.setData.call(_this, dataTransfer, dragEl); } on(document, 'drop', _this); // #1276 fix: css(dragEl, 'transform', 'translateZ(0)'); } awaitingDragStarted = true; _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt)); on(document, 'selectstart', _this); moved = true; window.getSelection().removeAllRanges(); if (Safari) { css(document.body, 'user-select', 'none'); } }, // Returns true - if no further action is needed (either inserted or another condition) _onDragOver: function _onDragOver( /**Event*/evt) { var el = this.el, target = evt.target, dragRect, targetRect, revert, options = this.options, group = options.group, activeSortable = Sortable.active, isOwner = activeGroup === group, canSort = options.sort, fromSortable = putSortable || activeSortable, vertical, _this = this, completedFired = false; if (_silent) return; function dragOverEvent(name, extra) { pluginEvent(name, _this, _objectSpread2({ evt: evt, isOwner: isOwner, axis: vertical ? 'vertical' : 'horizontal', revert: revert, dragRect: dragRect, targetRect: targetRect, canSort: canSort, fromSortable: fromSortable, target: target, completed: completed, onMove: function onMove(target, after) { return _onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after); }, changed: changed }, extra)); } // Capture animation state function capture() { dragOverEvent('dragOverAnimationCapture'); _this.captureAnimationState(); if (_this !== fromSortable) { fromSortable.captureAnimationState(); } } // Return invocation when dragEl is inserted (or completed) function completed(insertion) { dragOverEvent('dragOverCompleted', { insertion: insertion }); if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } else { activeSortable._showClone(_this); } if (_this !== fromSortable) { // Set ghost class to new sortable's ghost class toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false); toggleClass(dragEl, options.ghostClass, true); } if (putSortable !== _this && _this !== Sortable.active) { putSortable = _this; } else if (_this === Sortable.active && putSortable) { putSortable = null; } // Animation if (fromSortable === _this) { _this._ignoreWhileAnimating = target; } _this.animateAll(function () { dragOverEvent('dragOverAnimationComplete'); _this._ignoreWhileAnimating = null; }); if (_this !== fromSortable) { fromSortable.animateAll(); fromSortable._ignoreWhileAnimating = null; } } // Null lastTarget if it is not inside a previously swapped element if (target === dragEl && !dragEl.animated || target === el && !target.animated) { lastTarget = null; } // no bubbling and not fallback if (!options.dragoverBubble && !evt.rootEl && target !== document) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); // Do not detect for empty insert if already inserted !insertion && nearestEmptyInsertDetectEvent(evt); } !options.dragoverBubble && evt.stopPropagation && evt.stopPropagation(); return completedFired = true; } // Call when dragEl has been inserted function changed() { newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); _dispatchEvent({ sortable: _this, name: 'change', toEl: el, newIndex: newIndex, newDraggableIndex: newDraggableIndex, originalEvent: evt }); } if (evt.preventDefault !== void 0) { evt.cancelable && evt.preventDefault(); } target = closest(target, options.draggable, el, true); dragOverEvent('dragOver'); if (Sortable.eventCanceled) return completedFired; if (dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target) { return completed(false); } ignoreNextClick = false; if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = parentEl !== rootEl) // Reverting item into the original list : putSortable === this || (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt))) { vertical = this._getDirection(evt, target) === 'vertical'; dragRect = getRect(dragEl); dragOverEvent('dragOverValid'); if (Sortable.eventCanceled) return completedFired; if (revert) { parentEl = rootEl; // actualization capture(); this._hideClone(); dragOverEvent('revert'); if (!Sortable.eventCanceled) { if (nextEl) { rootEl.insertBefore(dragEl, nextEl); } else { rootEl.appendChild(dragEl); } } return completed(true); } var elLastChild = lastChild(el, options.draggable); if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) { // Insert to end of list // If already at end of list: Do not insert if (elLastChild === dragEl) { return completed(false); } // if there is a last element, it is the target if (elLastChild && el === evt.target) { target = elLastChild; } if (target) { targetRect = getRect(target); } if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) { capture(); if (elLastChild && elLastChild.nextSibling) { // the last draggable element is not the last node el.insertBefore(dragEl, elLastChild.nextSibling); } else { el.appendChild(dragEl); } parentEl = el; // actualization changed(); return completed(true); } } else if (elLastChild && _ghostIsFirst(evt, vertical, this)) { // Insert to start of list var firstChild = getChild(el, 0, options, true); if (firstChild === dragEl) { return completed(false); } target = firstChild; targetRect = getRect(target); if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) { capture(); el.insertBefore(dragEl, firstChild); parentEl = el; // actualization changed(); return completed(true); } } else if (target.parentNode === el) { targetRect = getRect(target); var direction = 0, targetBeforeFirstSwap, differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { targetBeforeFirstSwap = targetRect[side1]; pastFirstInvertThresh = false; isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel; } direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target); var sibling; if (direction !== 0) { // Check if target is beside dragEl in respective direction (ignoring hidden elements) var dragIndex = index(dragEl); do { dragIndex -= direction; sibling = parentEl.children[dragIndex]; } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl)); } // If dragEl is already beside target: Do not insert if (direction === 0 || sibling === target) { return completed(false); } lastTarget = target; lastDirection = direction; var nextSibling = target.nextElementSibling, after = false; after = direction === 1; var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after); if (moveVector !== false) { if (moveVector === 1 || moveVector === -1) { after = moveVector === 1; } _silent = true; setTimeout(_unsilent, 30); capture(); if (after && !nextSibling) { el.appendChild(dragEl); } else { target.parentNode.insertBefore(dragEl, after ? nextSibling : target); } // Undo chrome's scroll adjustment (has no effect on other browsers) if (scrolledPastTop) { scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop); } parentEl = dragEl.parentNode; // actualization // must be done before animation if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) { targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]); } changed(); return completed(true); } } if (el.contains(dragEl)) { return completed(false); } } return false; }, _ignoreWhileAnimating: null, _offMoveEvents: function _offMoveEvents() { off(document, 'mousemove', this._onTouchMove); off(document, 'touchmove', this._onTouchMove); off(document, 'pointermove', this._onTouchMove); off(document, 'dragover', nearestEmptyInsertDetectEvent); off(document, 'mousemove', nearestEmptyInsertDetectEvent); off(document, 'touchmove', nearestEmptyInsertDetectEvent); }, _offUpEvents: function _offUpEvents() { var ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._onDrop); off(ownerDocument, 'touchend', this._onDrop); off(ownerDocument, 'pointerup', this._onDrop); off(ownerDocument, 'pointercancel', this._onDrop); off(ownerDocument, 'touchcancel', this._onDrop); off(document, 'selectstart', this); }, _onDrop: function _onDrop( /**Event*/evt) { var el = this.el, options = this.options; // Get the index of the dragged element within its parent newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt: evt }); parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); if (Sortable.eventCanceled) { this._nulling(); return; } awaitingDragStarted = false; isCircumstantialInvert = false; pastFirstInvertThresh = false; clearInterval(this._loopId); clearTimeout(this._dragStartTimer); _cancelNextTick(this.cloneId); _cancelNextTick(this._dragStartId); // Unbind events if (this.nativeDraggable) { off(document, 'drop', this); off(el, 'dragstart', this._onDragStart); } this._offMoveEvents(); this._offUpEvents(); if (Safari) { css(document.body, 'user-select', ''); } css(dragEl, 'transform', ''); if (evt) { if (moved) { evt.cancelable && evt.preventDefault(); !options.dropBubble && evt.stopPropagation(); } ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl); if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { // Remove clone(s) cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl); } if (dragEl) { if (this.nativeDraggable) { off(dragEl, 'dragend', this); } _disableDraggable(dragEl); dragEl.style['will-change'] = ''; // Remove classes // ghostClass is added in dragStarted if (moved && !awaitingDragStarted) { toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false); } toggleClass(dragEl, this.options.chosenClass, false); // Drag stop event _dispatchEvent({ sortable: this, name: 'unchoose', toEl: parentEl, newIndex: null, newDraggableIndex: null, originalEvent: evt }); if (rootEl !== parentEl) { if (newIndex >= 0) { // Add event _dispatchEvent({ rootEl: parentEl, name: 'add', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); // Remove event _dispatchEvent({ sortable: this, name: 'remove', toEl: parentEl, originalEvent: evt }); // drag from one list and drop into another _dispatchEvent({ rootEl: parentEl, name: 'sort', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } putSortable && putSortable.save(); } else { if (newIndex !== oldIndex) { if (newIndex >= 0) { // drag & drop within the same list _dispatchEvent({ sortable: this, name: 'update', toEl: parentEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } } } if (Sortable.active) { /* jshint eqnull:true */ if (newIndex == null || newIndex === -1) { newIndex = oldIndex; newDraggableIndex = oldDraggableIndex; } _dispatchEvent({ sortable: this, name: 'end', toEl: parentEl, originalEvent: evt }); // Save sorting this.save(); } } } this._nulling(); }, _nulling: function _nulling() { pluginEvent('nulling', this); rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null; var el = this.el; savedInputChecked.forEach(function (checkEl) { if (el.contains(checkEl)) { checkEl.checked = true; } }); savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function handleEvent( /**Event*/evt) { switch (evt.type) { case 'drop': case 'dragend': this._onDrop(evt); break; case 'dragenter': case 'dragover': if (dragEl) { this._onDragOver(evt); _globalDragOver(evt); } break; case 'selectstart': evt.preventDefault(); break; } }, /** * Serializes the item into an array of string. * @returns {String[]} */ toArray: function toArray() { var order = [], el, children = this.el.children, i = 0, n = children.length, options = this.options; for (; i < n; i++) { el = children[i]; if (closest(el, options.draggable, this.el, false)) { order.push(el.getAttribute(options.dataIdAttr) || _generateId(el)); } } return order; }, /** * Sorts the elements according to the array. * @param {String[]} order order of the items */ sort: function sort(order, useAnimation) { var items = {}, rootEl = this.el; this.toArray().forEach(function (id, i) { var el = rootEl.children[i]; if (closest(el, this.options.draggable, rootEl, false)) { items[id] = el; } }, this); useAnimation && this.captureAnimationState(); order.forEach(function (id) { if (items[id]) { rootEl.removeChild(items[id]); rootEl.appendChild(items[id]); } }); useAnimation && this.animateAll(); }, /** * Save the current sorting */ save: function save() { var store = this.options.store; store && store.set && store.set(this); }, /** * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. * @param {HTMLElement} el * @param {String} [selector] default: `options.draggable` * @returns {HTMLElement|null} */ closest: function closest$1(el, selector) { return closest(el, selector || this.options.draggable, this.el, false); }, /** * Set/get option * @param {string} name * @param {*} [value] * @returns {*} */ option: function option(name, value) { var options = this.options; if (value === void 0) { return options[name]; } else { var modifiedValue = PluginManager.modifyOption(this, name, value); if (typeof modifiedValue !== 'undefined') { options[name] = modifiedValue; } else { options[name] = value; } if (name === 'group') { _prepareGroup(options); } } }, /** * Destroy */ destroy: function destroy() { pluginEvent('destroy', this); var el = this.el; el[expando] = null; off(el, 'mousedown', this._onTapStart); off(el, 'touchstart', this._onTapStart); off(el, 'pointerdown', this._onTapStart); if (this.nativeDraggable) { off(el, 'dragover', this); off(el, 'dragenter', this); } // Remove draggable attributes Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) { el.removeAttribute('draggable'); }); this._onDrop(); this._disableDelayedDragEvents(); sortables.splice(sortables.indexOf(this.el), 1); this.el = el = null; }, _hideClone: function _hideClone() { if (!cloneHidden) { pluginEvent('hideClone', this); if (Sortable.eventCanceled) return; css(cloneEl, 'display', 'none'); if (this.options.removeCloneOnHide && cloneEl.parentNode) { cloneEl.parentNode.removeChild(cloneEl); } cloneHidden = true; } }, _showClone: function _showClone(putSortable) { if (putSortable.lastPutMode !== 'clone') { this._hideClone(); return; } if (cloneHidden) { pluginEvent('showClone', this); if (Sortable.eventCanceled) return; // show clone at dragEl or original position if (dragEl.parentNode == rootEl && !this.options.group.revertClone) { rootEl.insertBefore(cloneEl, dragEl); } else if (nextEl) { rootEl.insertBefore(cloneEl, nextEl); } else { rootEl.appendChild(cloneEl); } if (this.options.group.revertClone) { this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); cloneHidden = false; } } }; function _globalDragOver( /**Event*/evt) { if (evt.dataTransfer) { evt.dataTransfer.dropEffect = 'move'; } evt.cancelable && evt.preventDefault(); } function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) { var evt, sortable = fromEl[expando], onMoveFn = sortable.options.onMove, retVal; // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent('move', { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent('move', true, true); } evt.to = toEl; evt.from = fromEl; evt.dragged = dragEl; evt.draggedRect = dragRect; evt.related = targetEl || toEl; evt.relatedRect = targetRect || getRect(toEl); evt.willInsertAfter = willInsertAfter; evt.originalEvent = originalEvent; fromEl.dispatchEvent(evt); if (onMoveFn) { retVal = onMoveFn.call(sortable, evt, originalEvent); } return retVal; } function _disableDraggable(el) { el.draggable = false; } function _unsilent() { _silent = false; } function _ghostIsFirst(evt, vertical, sortable) { var firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true)); var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); var spacer = 10; return vertical ? evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left; } function _ghostIsLast(evt, vertical, sortable) { var lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable)); var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); var spacer = 10; return vertical ? evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top; } function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) { var mouseOnAxis = vertical ? evt.clientY : evt.clientX, targetLength = vertical ? targetRect.height : targetRect.width, targetS1 = vertical ? targetRect.top : targetRect.left, targetS2 = vertical ? targetRect.bottom : targetRect.right, invert = false; if (!invertSwap) { // Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) { // multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2 // check if past first invert threshold on side opposite of lastDirection if (!pastFirstInvertThresh && (lastDirection === 1 ? mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 : mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2)) { // past first invert threshold, do not restrict inverted threshold to dragEl shadow pastFirstInvertThresh = true; } if (!pastFirstInvertThresh) { // dragEl shadow (target move distance shadow) if (lastDirection === 1 ? mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow : mouseOnAxis > targetS2 - targetMoveDistance) { return -lastDirection; } } else { invert = true; } } else { // Regular if (mouseOnAxis > targetS1 + targetLength * (1 - swapThreshold) / 2 && mouseOnAxis < targetS2 - targetLength * (1 - swapThreshold) / 2) { return _getInsertDirection(target); } } } invert = invert || invertSwap; if (invert) { // Invert of regular if (mouseOnAxis < targetS1 + targetLength * invertedSwapThreshold / 2 || mouseOnAxis > targetS2 - targetLength * invertedSwapThreshold / 2) { return mouseOnAxis > targetS1 + targetLength / 2 ? 1 : -1; } } return 0; } /** * Gets the direction dragEl must be swapped relative to target in order to make it * seem that dragEl has been "inserted" into that element's position * @param {HTMLElement} target The target whose position dragEl is being inserted at * @return {Number} Direction dragEl must be swapped */ function _getInsertDirection(target) { if (index(dragEl) < index(target)) { return 1; } else { return -1; } } /** * Generate id * @param {HTMLElement} el * @returns {String} * @private */ function _generateId(el) { var str = el.tagName + el.className + el.src + el.href + el.textContent, i = str.length, sum = 0; while (i--) { sum += str.charCodeAt(i); } return sum.toString(36); } function _saveInputCheckedState(root) { savedInputChecked.length = 0; var inputs = root.getElementsByTagName('input'); var idx = inputs.length; while (idx--) { var el = inputs[idx]; el.checked && savedInputChecked.push(el); } } function _nextTick(fn) { return setTimeout(fn, 0); } function _cancelNextTick(id) { return clearTimeout(id); } // Fixed #973: if (documentExists) { on(document, 'touchmove', function (evt) { if ((Sortable.active || awaitingDragStarted) && evt.cancelable) { evt.preventDefault(); } }); } // Export utils Sortable.utils = { on: on, off: off, css: css, find: find, is: function is(el, selector) { return !!closest(el, selector, el, false); }, extend: extend, throttle: throttle, closest: closest, toggleClass: toggleClass, clone: clone, index: index, nextTick: _nextTick, cancelNextTick: _cancelNextTick, detectDirection: _detectDirection, getChild: getChild, expando: expando }; /** * Get the Sortable instance of an element * @param {HTMLElement} element The element * @return {Sortable|undefined} The instance of Sortable */ Sortable.get = function (element) { return element[expando]; }; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ Sortable.mount = function () { for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { plugins[_key] = arguments[_key]; } if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach(function (plugin) { if (!plugin.prototype || !plugin.prototype.constructor) { throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); } if (plugin.utils) Sortable.utils = _objectSpread2(_objectSpread2({}, Sortable.utils), plugin.utils); PluginManager.mount(plugin); }); }; /** * Create sortable instance * @param {HTMLElement} el * @param {Object} [options] */ Sortable.create = function (el, options) { return new Sortable(el, options); }; // Export Sortable.version = version; var autoScrolls = [], scrollEl, scrollRootEl, scrolling = false, lastAutoScrollX, lastAutoScrollY, touchEvt$1, pointerElemChangedInterval; function AutoScrollPlugin() { function AutoScroll() { this.defaults = { scroll: true, forceAutoScrollFallback: false, scrollSensitivity: 30, scrollSpeed: 10, bubbleScroll: true }; // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } } AutoScroll.prototype = { dragStarted: function dragStarted(_ref) { var originalEvent = _ref.originalEvent; if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); } else { on(document, 'mousemove', this._handleFallbackAutoScroll); } } }, dragOverCompleted: function dragOverCompleted(_ref2) { var originalEvent = _ref2.originalEvent; // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, drop: function drop() { if (this.sortable.nativeDraggable) { off(document, 'dragover', this._handleAutoScroll); } else { off(document, 'pointermove', this._handleFallbackAutoScroll); off(document, 'touchmove', this._handleFallbackAutoScroll); off(document, 'mousemove', this._handleFallbackAutoScroll); } clearPointerElemChangedInterval(); clearAutoScrolls(); cancelThrottle(); }, nulling: function nulling() { touchEvt$1 = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null; autoScrolls.length = 0; }, _handleFallbackAutoScroll: function _handleFallbackAutoScroll(evt) { this._handleAutoScroll(evt, true); }, _handleAutoScroll: function _handleAutoScroll(evt, fallback) { var _this = this; var x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt$1 = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, // MACOS Safari does not have autoscroll, // Firefox and Chrome are good if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) { autoScroll(evt, this.options, elem, fallback); // Listener for pointer element change var ogElemScroller = getParentAutoScrollElement(elem, true); if (scrolling && (!pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY)) { pointerElemChangedInterval && clearPointerElemChangedInterval(); // Detect for pointer elem change, emulating native DnD behaviour pointerElemChangedInterval = setInterval(function () { var newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true); if (newElem !== ogElemScroller) { ogElemScroller = newElem; clearAutoScrolls(); } autoScroll(evt, _this.options, newElem, fallback); }, 10); lastAutoScrollX = x; lastAutoScrollY = y; } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false); } } }; return _extends(AutoScroll, { pluginName: 'scroll', initializeByDefault: true }); } function clearAutoScrolls() { autoScrolls.forEach(function (autoScroll) { clearInterval(autoScroll.pid); }); autoScrolls = []; } function clearPointerElemChangedInterval() { clearInterval(pointerElemChangedInterval); } var autoScroll = throttle(function (evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; var x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); var scrollThisInstance = false, scrollCustomFn; // New scroll root, set scrollEl if (scrollRootEl !== rootEl) { scrollRootEl = rootEl; clearAutoScrolls(); scrollEl = options.scroll; scrollCustomFn = options.scrollFn; if (scrollEl === true) { scrollEl = getParentAutoScrollElement(rootEl, true); } } var layersOut = 0; var currentParent = scrollEl; do { var el = currentParent, rect = getRect(el), top = rect.top, bottom = rect.bottom, left = rect.left, right = rect.right, width = rect.width, height = rect.height, canScrollX = void 0, canScrollY = void 0, scrollWidth = el.scrollWidth, scrollHeight = el.scrollHeight, elCSS = css(el), scrollPosX = el.scrollLeft, scrollPosY = el.scrollTop; if (el === winScroller) { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible'); } else { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (var i = 0; i <= layersOut; i++) { if (!autoScrolls[i]) { autoScrolls[i] = {}; } } } if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) { autoScrolls[layersOut].el = el; autoScrolls[layersOut].vx = vx; autoScrolls[layersOut].vy = vy; clearInterval(autoScrolls[layersOut].pid); if (vx != 0 || vy != 0) { scrollThisInstance = true; /* jshint loopfunc:true */ autoScrolls[layersOut].pid = setInterval(function () { // emulate drag over during autoscroll (fallback), emulating native DnD behaviour if (isFallback && this.layer === 0) { Sortable.active._onTouchMove(touchEvt$1); // To move ghost if it is positioned absolutely } var scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0; var scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0; if (typeof scrollCustomFn === 'function') { if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt$1, autoScrolls[this.layer].el) !== 'continue') { return; } } scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY); }.bind({ layer: layersOut }), 24); } } layersOut++; } while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false))); scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not }, 30); var drop = function drop(_ref) { var originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, dragEl = _ref.dragEl, activeSortable = _ref.activeSortable, dispatchSortableEvent = _ref.dispatchSortableEvent, hideGhostForTarget = _ref.hideGhostForTarget, unhideGhostForTarget = _ref.unhideGhostForTarget; if (!originalEvent) return; var toSortable = putSortable || activeSortable; hideGhostForTarget(); var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; var target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); this.onSpill({ dragEl: dragEl, putSortable: putSortable }); } }; function Revert() {} Revert.prototype = { startIndex: null, dragStart: function dragStart(_ref2) { var oldDraggableIndex = _ref2.oldDraggableIndex; this.startIndex = oldDraggableIndex; }, onSpill: function onSpill(_ref3) { var dragEl = _ref3.dragEl, putSortable = _ref3.putSortable; this.sortable.captureAnimationState(); if (putSortable) { putSortable.captureAnimationState(); } var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); } else { this.sortable.el.appendChild(dragEl); } this.sortable.animateAll(); if (putSortable) { putSortable.animateAll(); } }, drop: drop }; _extends(Revert, { pluginName: 'revertOnSpill' }); function Remove() {} Remove.prototype = { onSpill: function onSpill(_ref4) { var dragEl = _ref4.dragEl, putSortable = _ref4.putSortable; var parentSortable = putSortable || this.sortable; parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); parentSortable.animateAll(); }, drop: drop }; _extends(Remove, { pluginName: 'removeOnSpill' }); var OnSpill = [Remove, Revert]; var lastSwapEl; function SwapPlugin() { function Swap() { this.defaults = { swapClass: 'sortable-swap-highlight' }; } Swap.prototype = { dragStart: function dragStart(_ref) { var dragEl = _ref.dragEl; lastSwapEl = dragEl; }, dragOverValid: function dragOverValid(_ref2) { var completed = _ref2.completed, target = _ref2.target, onMove = _ref2.onMove, activeSortable = _ref2.activeSortable, changed = _ref2.changed, cancel = _ref2.cancel; if (!activeSortable.options.swap) return; var el = this.sortable.el, options = this.options; if (target && target !== el) { var prevSwapEl = lastSwapEl; if (onMove(target) !== false) { toggleClass(target, options.swapClass, true); lastSwapEl = target; } else { lastSwapEl = null; } if (prevSwapEl && prevSwapEl !== lastSwapEl) { toggleClass(prevSwapEl, options.swapClass, false); } } changed(); completed(true); cancel(); }, drop: function drop(_ref3) { var activeSortable = _ref3.activeSortable, putSortable = _ref3.putSortable, dragEl = _ref3.dragEl; var toSortable = putSortable || this.sortable; var options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { if (dragEl !== lastSwapEl) { toSortable.captureAnimationState(); if (toSortable !== activeSortable) activeSortable.captureAnimationState(); swapNodes(dragEl, lastSwapEl); toSortable.animateAll(); if (toSortable !== activeSortable) activeSortable.animateAll(); } } }, nulling: function nulling() { lastSwapEl = null; } }; return _extends(Swap, { pluginName: 'swap', eventProperties: function eventProperties() { return { swapItem: lastSwapEl }; } }); } function swapNodes(n1, n2) { var p1 = n1.parentNode, p2 = n2.parentNode, i1, i2; if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; i1 = index(n1); i2 = index(n2); if (p1.isEqualNode(p2) && i1 < i2) { i2++; } p1.insertBefore(n2, p1.children[i1]); p2.insertBefore(n1, p2.children[i2]); } var multiDragElements = [], multiDragClones = [], lastMultiDragSelect, // for selection with modifier key down (SHIFT) multiDragSortable, initialFolding = false, // Initial multi-drag fold when drag started folding = false, // Folding any other time dragStarted = false, dragEl$1, clonesFromRect, clonesHidden; function MultiDragPlugin() { function MultiDrag(sortable) { // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } if (!sortable.options.avoidImplicitDeselect) { if (sortable.options.supportPointer) { on(document, 'pointerup', this._deselectMultiDrag); } else { on(document, 'mouseup', this._deselectMultiDrag); on(document, 'touchend', this._deselectMultiDrag); } } on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, avoidImplicitDeselect: false, setData: function setData(dataTransfer, dragEl) { var data = ''; if (multiDragElements.length && multiDragSortable === sortable) { multiDragElements.forEach(function (multiDragElement, i) { data += (!i ? '' : ', ') + multiDragElement.textContent; }); } else { data = dragEl.textContent; } dataTransfer.setData('Text', data); } }; } MultiDrag.prototype = { multiDragKeyDown: false, isMultiDrag: false, delayStartGlobal: function delayStartGlobal(_ref) { var dragged = _ref.dragEl; dragEl$1 = dragged; }, delayEnded: function delayEnded() { this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); }, setupClone: function setupClone(_ref2) { var sortable = _ref2.sortable, cancel = _ref2.cancel; if (!this.isMultiDrag) return; for (var i = 0; i < multiDragElements.length; i++) { multiDragClones.push(clone(multiDragElements[i])); multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; multiDragClones[i].draggable = false; multiDragClones[i].style['will-change'] = ''; toggleClass(multiDragClones[i], this.options.selectedClass, false); multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); cancel(); }, clone: function clone(_ref3) { var sortable = _ref3.sortable, rootEl = _ref3.rootEl, dispatchSortableEvent = _ref3.dispatchSortableEvent, cancel = _ref3.cancel; if (!this.isMultiDrag) return; if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); cancel(); } } }, showClone: function showClone(_ref4) { var cloneNowShown = _ref4.cloneNowShown, rootEl = _ref4.rootEl, cancel = _ref4.cancel; if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(function (clone) { css(clone, 'display', ''); }); cloneNowShown(); clonesHidden = false; cancel(); }, hideClone: function hideClone(_ref5) { var _this = this; var sortable = _ref5.sortable, cloneNowHidden = _ref5.cloneNowHidden, cancel = _ref5.cancel; if (!this.isMultiDrag) return; multiDragClones.forEach(function (clone) { css(clone, 'display', 'none'); if (_this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; cancel(); }, dragStartGlobal: function dragStartGlobal(_ref6) { var sortable = _ref6.sortable; if (!this.isMultiDrag && multiDragSortable) { multiDragSortable.multiDrag._deselectMultiDrag(); } multiDragElements.forEach(function (multiDragElement) { multiDragElement.sortableIndex = index(multiDragElement); }); // Sort multi-drag elements multiDragElements = multiDragElements.sort(function (a, b) { return a.sortableIndex - b.sortableIndex; }); dragStarted = true; }, dragStarted: function dragStarted(_ref7) { var _this2 = this; var sortable = _ref7.sortable; if (!this.isMultiDrag) return; if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, // show multi drag elements, // animate to rects, // unset rects & remove from DOM sortable.captureAnimationState(); if (this.options.animation) { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; css(multiDragElement, 'position', 'absolute'); }); var dragRect = getRect(dragEl$1, false, true, true); multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; setRect(multiDragElement, dragRect); }); folding = true; initialFolding = true; } } sortable.animateAll(function () { folding = false; initialFolding = false; if (_this2.options.animation) { multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled if (_this2.options.sort) { removeMultiDragElements(); } }); }, dragOver: function dragOver(_ref8) { var target = _ref8.target, completed = _ref8.completed, cancel = _ref8.cancel; if (folding && ~multiDragElements.indexOf(target)) { completed(false); cancel(); } }, revert: function revert(_ref9) { var fromSortable = _ref9.fromSortable, rootEl = _ref9.rootEl, sortable = _ref9.sortable, dragRect = _ref9.dragRect; if (multiDragElements.length > 1) { // Setup unfold animation multiDragElements.forEach(function (multiDragElement) { sortable.addAnimationState({ target: multiDragElement, rect: folding ? getRect(multiDragElement) : dragRect }); unsetRect(multiDragElement); multiDragElement.fromRect = dragRect; fromSortable.removeAnimationState(multiDragElement); }); folding = false; insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted: function dragOverCompleted(_ref10) { var sortable = _ref10.sortable, isOwner = _ref10.isOwner, insertion = _ref10.insertion, activeSortable = _ref10.activeSortable, parentEl = _ref10.parentEl, putSortable = _ref10.putSortable; var options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } initialFolding = false; // If leaving sort:false root, or already folding - Fold to new location if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) { // Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible var dragRectAbsolute = getRect(dragEl$1, false, true, true); multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; setRect(multiDragElement, dragRectAbsolute); // Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted // while folding, and so that we can capture them again because old sortable will no longer be fromSortable parentEl.appendChild(multiDragElement); }); folding = true; } // Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out if (!isOwner) { // Only remove if not folding (folding will remove them anyways) if (!folding) { removeMultiDragElements(); } if (multiDragElements.length > 1) { var clonesHiddenBefore = clonesHidden; activeSortable._showClone(sortable); // Unfold animation for clones if showing from hidden if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) { multiDragClones.forEach(function (clone) { activeSortable.addAnimationState({ target: clone, rect: clonesFromRect }); clone.fromRect = clonesFromRect; clone.thisAnimationDuration = null; }); } } else { activeSortable._showClone(sortable); } } } }, dragOverAnimationCapture: function dragOverAnimationCapture(_ref11) { var dragRect = _ref11.dragRect, isOwner = _ref11.isOwner, activeSortable = _ref11.activeSortable; multiDragElements.forEach(function (multiDragElement) { multiDragElement.thisAnimationDuration = null; }); if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) { clonesFromRect = _extends({}, dragRect); var dragMatrix = matrix(dragEl$1, true); clonesFromRect.top -= dragMatrix.f; clonesFromRect.left -= dragMatrix.e; } }, dragOverAnimationComplete: function dragOverAnimationComplete() { if (folding) { folding = false; removeMultiDragElements(); } }, drop: function drop(_ref12) { var evt = _ref12.originalEvent, rootEl = _ref12.rootEl, parentEl = _ref12.parentEl, sortable = _ref12.sortable, dispatchSortableEvent = _ref12.dispatchSortableEvent, oldIndex = _ref12.oldIndex, putSortable = _ref12.putSortable; var toSortable = putSortable || this.sortable; if (!evt) return; var options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { if (options.multiDragKey && !this.multiDragKeyDown) { this._deselectMultiDrag(); } toggleClass(dragEl$1, options.selectedClass, !~multiDragElements.indexOf(dragEl$1)); if (!~multiDragElements.indexOf(dragEl$1)) { multiDragElements.push(dragEl$1); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', targetEl: dragEl$1, originalEvent: evt }); // Modifier activated, select from last to dragEl if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { var lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl$1); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { (function () { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) var n, i; if (currentIndex > lastIndex) { i = lastIndex; n = currentIndex; } else { i = currentIndex; n = lastIndex + 1; } var filter = options.filter; for (; i < n; i++) { if (~multiDragElements.indexOf(children[i])) continue; // Check if element is draggable if (!closest(children[i], options.draggable, parentEl, false)) continue; // Check if element is filtered var filtered = filter && (typeof filter === 'function' ? filter.call(sortable, evt, children[i], sortable) : filter.split(',').some(function (criteria) { return closest(children[i], criteria.trim(), parentEl, false); })); if (filtered) continue; toggleClass(children[i], options.selectedClass, true); multiDragElements.push(children[i]); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', targetEl: children[i], originalEvent: evt }); } })(); } } else { lastMultiDragSelect = dragEl$1; } multiDragSortable = toSortable; } else { multiDragElements.splice(multiDragElements.indexOf(dragEl$1), 1); lastMultiDragSelect = null; dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'deselect', targetEl: dragEl$1, originalEvent: evt }); } } // Multi-drag drop if (dragStarted && this.isMultiDrag) { folding = false; // Do not "unfold" after around dragEl if reverted if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) { var dragRect = getRect(dragEl$1), multiDragIndex = index(dragEl$1, ':not(.' + this.options.selectedClass + ')'); if (!initialFolding && options.animation) dragEl$1.thisAnimationDuration = null; toSortable.captureAnimationState(); if (!initialFolding) { if (options.animation) { dragEl$1.fromRect = dragRect; multiDragElements.forEach(function (multiDragElement) { multiDragElement.thisAnimationDuration = null; if (multiDragElement !== dragEl$1) { var rect = folding ? getRect(multiDragElement) : dragRect; multiDragElement.fromRect = rect; // Prepare unfold animation toSortable.addAnimationState({ target: multiDragElement, rect: rect }); } }); } // Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert // properly they must all be removed removeMultiDragElements(); multiDragElements.forEach(function (multiDragElement) { if (children[multiDragIndex]) { parentEl.insertBefore(multiDragElement, children[multiDragIndex]); } else { parentEl.appendChild(multiDragElement); } multiDragIndex++; }); // If initial folding is done, the elements may have changed position because they are now // unfolding around dragEl, even though dragEl may not have his index changed, so update event // must be fired here as Sortable will not. if (oldIndex === index(dragEl$1)) { var update = false; multiDragElements.forEach(function (multiDragElement) { if (multiDragElement.sortableIndex !== index(multiDragElement)) { update = true; return; } }); if (update) { dispatchSortableEvent('update'); dispatchSortableEvent('sort'); } } } // Must be done after capturing individual rects (scroll bar) multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); toSortable.animateAll(); } multiDragSortable = toSortable; } // Remove clones if necessary if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { multiDragClones.forEach(function (clone) { clone.parentNode && clone.parentNode.removeChild(clone); }); } }, nullingGlobal: function nullingGlobal() { this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, destroyGlobal: function destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); off(document, 'mouseup', this._deselectMultiDrag); off(document, 'touchend', this._deselectMultiDrag); off(document, 'keydown', this._checkKeyDown); off(document, 'keyup', this._checkKeyUp); }, _deselectMultiDrag: function _deselectMultiDrag(evt) { if (typeof dragStarted !== "undefined" && dragStarted) return; // Only deselect if selection is in this sortable if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { var el = multiDragElements[0]; toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, rootEl: this.sortable.el, name: 'deselect', targetEl: el, originalEvent: evt }); } }, _checkKeyDown: function _checkKeyDown(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp: function _checkKeyUp(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } }; return _extends(MultiDrag, { // Static methods & properties pluginName: 'multiDrag', utils: { /** * Selects the provided multi-drag item * @param {HTMLElement} el The element to be selected */ select: function select(el) { var sortable = el.parentNode[expando]; if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return; if (multiDragSortable && multiDragSortable !== sortable) { multiDragSortable.multiDrag._deselectMultiDrag(); multiDragSortable = sortable; } toggleClass(el, sortable.options.selectedClass, true); multiDragElements.push(el); }, /** * Deselects the provided multi-drag item * @param {HTMLElement} el The element to be deselected */ deselect: function deselect(el) { var sortable = el.parentNode[expando], index = multiDragElements.indexOf(el); if (!sortable || !sortable.options.multiDrag || !~index) return; toggleClass(el, sortable.options.selectedClass, false); multiDragElements.splice(index, 1); } }, eventProperties: function eventProperties() { var _this3 = this; var oldIndicies = [], newIndicies = []; multiDragElements.forEach(function (multiDragElement) { oldIndicies.push({ multiDragElement: multiDragElement, index: multiDragElement.sortableIndex }); // multiDragElements will already be sorted if folding var newIndex; if (folding && multiDragElement !== dragEl$1) { newIndex = -1; } else if (folding) { newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } newIndicies.push({ multiDragElement: multiDragElement, index: newIndex }); }); return { items: _toConsumableArray(multiDragElements), clones: [].concat(multiDragClones), oldIndicies: oldIndicies, newIndicies: newIndicies }; }, optionListeners: { multiDragKey: function multiDragKey(key) { key = key.toLowerCase(); if (key === 'ctrl') { key = 'Control'; } else if (key.length > 1) { key = key.charAt(0).toUpperCase() + key.substr(1); } return key; } } }); } function insertMultiDragElements(clonesInserted, rootEl) { multiDragElements.forEach(function (multiDragElement, i) { var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(multiDragElement, target); } else { rootEl.appendChild(multiDragElement); } }); } /** * Insert multi-drag clones * @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted * @param {HTMLElement} rootEl */ function insertMultiDragClones(elementsInserted, rootEl) { multiDragClones.forEach(function (clone, i) { var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(clone, target); } else { rootEl.appendChild(clone); } }); } function removeMultiDragElements() { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement); }); } export default Sortable; export { AutoScrollPlugin as AutoScroll, MultiDragPlugin as MultiDrag, OnSpill, Sortable, SwapPlugin as Swap }; ================================================ FILE: modular/sortable.esm.js ================================================ /**! * Sortable 1.15.7 * @author RubaXa * @author owenm * @license MIT */ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); } function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } var version = "1.15.7"; function userAgent(pattern) { if (typeof window !== 'undefined' && window.navigator) { return !! /*@__PURE__*/navigator.userAgent.match(pattern); } } var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i); var Edge = userAgent(/Edge/i); var FireFox = userAgent(/firefox/i); var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i); var IOS = userAgent(/iP(ad|od|hone)/i); var ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i); var captureMode = { capture: false, passive: false }; function on(el, event, fn) { el.addEventListener(event, fn, !IE11OrLess && captureMode); } function off(el, event, fn) { el.removeEventListener(event, fn, !IE11OrLess && captureMode); } function matches( /**HTMLElement*/el, /**String*/selector) { if (!selector) return; selector[0] === '>' && (selector = selector.substring(1)); if (el) { try { if (el.matches) { return el.matches(selector); } else if (el.msMatchesSelector) { return el.msMatchesSelector(selector); } else if (el.webkitMatchesSelector) { return el.webkitMatchesSelector(selector); } } catch (_) { return false; } } return false; } function getParentOrHost(el) { return el.host && el !== document && el.host.nodeType && el.host !== el ? el.host : el.parentNode; } function closest( /**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) { if (el) { ctx = ctx || document; do { if (selector != null && (selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) { return el; } if (el === ctx) break; /* jshint boss:true */ } while (el = getParentOrHost(el)); } return null; } var R_SPACE = /\s+/g; function toggleClass(el, name, state) { if (el && name) { if (el.classList) { el.classList[state ? 'add' : 'remove'](name); } else { var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' '); el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' '); } } } function css(el, prop, val) { var style = el && el.style; if (style) { if (val === void 0) { if (document.defaultView && document.defaultView.getComputedStyle) { val = document.defaultView.getComputedStyle(el, ''); } else if (el.currentStyle) { val = el.currentStyle; } return prop === void 0 ? val : val[prop]; } else { if (!(prop in style) && prop.indexOf('webkit') === -1) { prop = '-webkit-' + prop; } style[prop] = val + (typeof val === 'string' ? '' : 'px'); } } } function matrix(el, selfOnly) { var appliedTransforms = ''; if (typeof el === 'string') { appliedTransforms = el; } else { do { var transform = css(el, 'transform'); if (transform && transform !== 'none') { appliedTransforms = transform + ' ' + appliedTransforms; } /* jshint boss:true */ } while (!selfOnly && (el = el.parentNode)); } var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix; /*jshint -W056 */ return matrixFn && new matrixFn(appliedTransforms); } function find(ctx, tagName, iterator) { if (ctx) { var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length; if (iterator) { for (; i < n; i++) { iterator(list[i], i); } } return list; } return []; } function getWindowScrollingElement() { var scrollingElement = document.scrollingElement; if (scrollingElement) { return scrollingElement; } else { return document.documentElement; } } /** * Returns the "bounding client rect" of given element * @param {HTMLElement} el The element whose boundingClientRect is wanted * @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container * @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr * @param {[Boolean]} undoScale Whether the container's scale() should be undone * @param {[HTMLElement]} container The parent the element will be placed in * @return {Object} The boundingClientRect of el, with specified adjustments */ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) { if (!el.getBoundingClientRect && el !== window) return; var elRect, top, left, bottom, right, height, width; if (el !== window && el.parentNode && el !== getWindowScrollingElement()) { elRect = el.getBoundingClientRect(); top = elRect.top; left = elRect.left; bottom = elRect.bottom; right = elRect.right; height = elRect.height; width = elRect.width; } else { top = 0; left = 0; bottom = window.innerHeight; right = window.innerWidth; height = window.innerHeight; width = window.innerWidth; } if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) { // Adjust for translate() container = container || el.parentNode; // solves #1123 (see: https://stackoverflow.com/a/37953806/6088312) // Not needed on <= IE11 if (!IE11OrLess) { do { if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static')) { var containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container top -= containerRect.top + parseInt(css(container, 'border-top-width')); left -= containerRect.left + parseInt(css(container, 'border-left-width')); bottom = top + elRect.height; right = left + elRect.width; break; } /* jshint boss:true */ } while (container = container.parentNode); } } if (undoScale && el !== window) { // Adjust for scale() var elMatrix = matrix(container || el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d; if (elMatrix) { top /= scaleY; left /= scaleX; width /= scaleX; height /= scaleY; bottom = top + height; right = left + width; } } return { top: top, left: left, bottom: bottom, right: right, width: width, height: height }; } /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ function isScrolledPast(el, elSide, parentSide) { var parent = getParentAutoScrollElement(el, true), elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { var parentSideVal = getRect(parent)[parentSide], visible = void 0; if (parentSide === 'top' || parentSide === 'left') { visible = elSideVal >= parentSideVal; } else { visible = elSideVal <= parentSideVal; } if (!visible) return parent; if (parent === getWindowScrollingElement()) break; parent = getParentAutoScrollElement(parent, false); } return false; } /** * Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible) * and non-draggable elements * @param {HTMLElement} el The parent element * @param {Number} childNum The index of the child * @param {Object} options Parent Sortable's options * @return {HTMLElement} The child at index childNum, or null if not found */ function getChild(el, childNum, options, includeDragEl) { var currentChild = 0, i = 0, children = el.children; while (i < children.length) { if (children[i].style.display !== 'none' && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false)) { if (currentChild === childNum) { return children[i]; } currentChild++; } i++; } return null; } /** * Gets the last child in the el, ignoring ghostEl or invisible elements (clones) * @param {HTMLElement} el Parent element * @param {selector} selector Any other elements that should be ignored * @return {HTMLElement} The last child, ignoring ghostEl */ function lastChild(el, selector) { var last = el.lastElementChild; while (last && (last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector))) { last = last.previousElementSibling; } return last || null; } /** * Returns the index of an element within its parent for a selected set of * elements * @param {HTMLElement} el * @param {selector} selector * @return {number} */ function index(el, selector) { var index = 0; if (!el || !el.parentNode) { return -1; } /* jshint boss:true */ while (el = el.previousElementSibling) { if (el.nodeName.toUpperCase() !== 'TEMPLATE' && el !== Sortable.clone && (!selector || matches(el, selector))) { index++; } } return index; } /** * Returns the scroll offset of the given element, added with all the scroll offsets of parent elements. * The value is returned in real pixels. * @param {HTMLElement} el * @return {Array} Offsets in the format of [left, top] */ function getRelativeScrollOffset(el) { var offsetLeft = 0, offsetTop = 0, winScroller = getWindowScrollingElement(); if (el) { do { var elMatrix = matrix(el), scaleX = elMatrix.a, scaleY = elMatrix.d; offsetLeft += el.scrollLeft * scaleX; offsetTop += el.scrollTop * scaleY; } while (el !== winScroller && (el = el.parentNode)); } return [offsetLeft, offsetTop]; } /** * Returns the index of the object within the given array * @param {Array} arr Array that may or may not hold the object * @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find * @return {Number} The index of the object in the array, or -1 */ function indexOfObject(arr, obj) { for (var i in arr) { if (!arr.hasOwnProperty(i)) continue; for (var key in obj) { if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i); } } return -1; } function getParentAutoScrollElement(el, includeSelf) { // skip to window if (!el || !el.getBoundingClientRect) return getWindowScrollingElement(); var elem = el; var gotSelf = false; do { // we don't need to get elem css if it isn't even overflowing in the first place (performance) if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) { var elemCSS = css(elem); if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) { if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement(); if (gotSelf || includeSelf) return elem; gotSelf = true; } } /* jshint boss:true */ } while (elem = elem.parentNode); return getWindowScrollingElement(); } function extend(dst, src) { if (dst && src) { for (var key in src) { if (src.hasOwnProperty(key)) { dst[key] = src[key]; } } } return dst; } function isRectEqual(rect1, rect2) { return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width); } var _throttleTimeout; function throttle(callback, ms) { return function () { if (!_throttleTimeout) { var args = arguments, _this = this; if (args.length === 1) { callback.call(_this, args[0]); } else { callback.apply(_this, args); } _throttleTimeout = setTimeout(function () { _throttleTimeout = void 0; }, ms); } }; } function cancelThrottle() { clearTimeout(_throttleTimeout); _throttleTimeout = void 0; } function scrollBy(el, x, y) { el.scrollLeft += x; el.scrollTop += y; } function clone(el) { var Polymer = window.Polymer; var $ = window.jQuery || window.Zepto; if (Polymer && Polymer.dom) { return Polymer.dom(el).cloneNode(true); } else if ($) { return $(el).clone(true)[0]; } else { return el.cloneNode(true); } } function setRect(el, rect) { css(el, 'position', 'absolute'); css(el, 'top', rect.top); css(el, 'left', rect.left); css(el, 'width', rect.width); css(el, 'height', rect.height); } function unsetRect(el) { css(el, 'position', ''); css(el, 'top', ''); css(el, 'left', ''); css(el, 'width', ''); css(el, 'height', ''); } function getChildContainingRectFromElement(container, options, ghostEl) { var rect = {}; Array.from(container.children).forEach(function (child) { var _rect$left, _rect$top, _rect$right, _rect$bottom; if (!closest(child, options.draggable, container, false) || child.animated || child === ghostEl) return; var childRect = getRect(child); rect.left = Math.min((_rect$left = rect.left) !== null && _rect$left !== void 0 ? _rect$left : Infinity, childRect.left); rect.top = Math.min((_rect$top = rect.top) !== null && _rect$top !== void 0 ? _rect$top : Infinity, childRect.top); rect.right = Math.max((_rect$right = rect.right) !== null && _rect$right !== void 0 ? _rect$right : -Infinity, childRect.right); rect.bottom = Math.max((_rect$bottom = rect.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : -Infinity, childRect.bottom); }); rect.width = rect.right - rect.left; rect.height = rect.bottom - rect.top; rect.x = rect.left; rect.y = rect.top; return rect; } var expando = 'Sortable' + new Date().getTime(); function AnimationStateManager() { var animationStates = [], animationCallbackId; return { captureAnimationState: function captureAnimationState() { animationStates = []; if (!this.options.animation) return; var children = [].slice.call(this.el.children); children.forEach(function (child) { if (css(child, 'display') === 'none' || child === Sortable.ghost) return; animationStates.push({ target: child, rect: getRect(child) }); var fromRect = _objectSpread2({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation if (child.thisAnimationDuration) { var childMatrix = matrix(child, true); if (childMatrix) { fromRect.top -= childMatrix.f; fromRect.left -= childMatrix.e; } } child.fromRect = fromRect; }); }, addAnimationState: function addAnimationState(state) { animationStates.push(state); }, removeAnimationState: function removeAnimationState(target) { animationStates.splice(indexOfObject(animationStates, { target: target }), 1); }, animateAll: function animateAll(callback) { var _this = this; if (!this.options.animation) { clearTimeout(animationCallbackId); if (typeof callback === 'function') callback(); return; } var animating = false, animationTime = 0; animationStates.forEach(function (state) { var time = 0, target = state.target, fromRect = target.fromRect, toRect = getRect(target), prevFromRect = target.prevFromRect, prevToRect = target.prevToRect, animatingRect = state.rect, targetMatrix = matrix(target, true); if (targetMatrix) { // Compensate for current animation toRect.top -= targetMatrix.f; toRect.left -= targetMatrix.e; } target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect if (isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) && // Make sure animatingRect is on line between toRect & fromRect (animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left)) { // If returning to same place as started from animation and on same axis time = calculateRealTime(animatingRect, prevFromRect, prevToRect, _this.options); } } // if fromRect != toRect: animate if (!isRectEqual(toRect, fromRect)) { target.prevFromRect = fromRect; target.prevToRect = toRect; if (!time) { time = _this.options.animation; } _this.animate(target, animatingRect, toRect, time); } if (time) { animating = true; animationTime = Math.max(animationTime, time); clearTimeout(target.animationResetTimer); target.animationResetTimer = setTimeout(function () { target.animationTime = 0; target.prevFromRect = null; target.fromRect = null; target.prevToRect = null; target.thisAnimationDuration = null; }, time); target.thisAnimationDuration = time; } }); clearTimeout(animationCallbackId); if (!animating) { if (typeof callback === 'function') callback(); } else { animationCallbackId = setTimeout(function () { if (typeof callback === 'function') callback(); }, animationTime); } animationStates = []; }, animate: function animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); var elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, translateX = (currentRect.left - toRect.left) / (scaleX || 1), translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); this.forRepaintDummy = repaint(target); // repaint css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : '')); css(target, 'transform', 'translate3d(0,0,0)'); typeof target.animated === 'number' && clearTimeout(target.animated); target.animated = setTimeout(function () { css(target, 'transition', ''); css(target, 'transform', ''); target.animated = false; target.animatingX = false; target.animatingY = false; }, duration); } } }; } function repaint(target) { return target.offsetWidth; } function calculateRealTime(animatingRect, fromRect, toRect, options) { return Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) * options.animation; } var plugins = []; var defaults = { initializeByDefault: true }; var PluginManager = { mount: function mount(plugin) { // Set default static properties for (var option in defaults) { if (defaults.hasOwnProperty(option) && !(option in plugin)) { plugin[option] = defaults[option]; } } plugins.forEach(function (p) { if (p.pluginName === plugin.pluginName) { throw "Sortable: Cannot mount plugin ".concat(plugin.pluginName, " more than once"); } }); plugins.push(plugin); }, pluginEvent: function pluginEvent(eventName, sortable, evt) { var _this = this; this.eventCanceled = false; evt.cancel = function () { _this.eventCanceled = true; }; var eventNameGlobal = eventName + 'Global'; plugins.forEach(function (plugin) { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if (sortable[plugin.pluginName][eventNameGlobal]) { sortable[plugin.pluginName][eventNameGlobal](_objectSpread2({ sortable: sortable }, evt)); } // Only fire plugin event if plugin is enabled in this sortable, // and plugin has event defined if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { sortable[plugin.pluginName][eventName](_objectSpread2({ sortable: sortable }, evt)); } }); }, initializePlugins: function initializePlugins(sortable, el, defaults, options) { plugins.forEach(function (plugin) { var pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; var initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin _extends(defaults, initialized.defaults); }); for (var option in sortable.options) { if (!sortable.options.hasOwnProperty(option)) continue; var modified = this.modifyOption(sortable, option, sortable.options[option]); if (typeof modified !== 'undefined') { sortable.options[option] = modified; } } }, getEventProperties: function getEventProperties(name, sortable) { var eventProperties = {}; plugins.forEach(function (plugin) { if (typeof plugin.eventProperties !== 'function') return; _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); return eventProperties; }, modifyOption: function modifyOption(sortable, name, value) { var modifiedValue; plugins.forEach(function (plugin) { // Plugin must exist on the Sortable if (!sortable[plugin.pluginName]) return; // If static option listener exists for this option, call in the context of the Sortable's instance of this plugin if (plugin.optionListeners && typeof plugin.optionListeners[name] === 'function') { modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value); } }); return modifiedValue; } }; function dispatchEvent(_ref) { var sortable = _ref.sortable, rootEl = _ref.rootEl, name = _ref.name, targetEl = _ref.targetEl, cloneEl = _ref.cloneEl, toEl = _ref.toEl, fromEl = _ref.fromEl, oldIndex = _ref.oldIndex, newIndex = _ref.newIndex, oldDraggableIndex = _ref.oldDraggableIndex, newDraggableIndex = _ref.newDraggableIndex, originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, extraEventProperties = _ref.extraEventProperties; sortable = sortable || rootEl && rootEl[expando]; if (!sortable) return; var evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent(name, { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent(name, true, true); } evt.to = toEl || rootEl; evt.from = fromEl || rootEl; evt.item = targetEl || rootEl; evt.clone = cloneEl; evt.oldIndex = oldIndex; evt.newIndex = newIndex; evt.oldDraggableIndex = oldDraggableIndex; evt.newDraggableIndex = newDraggableIndex; evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; var allEventProperties = _objectSpread2(_objectSpread2({}, extraEventProperties), PluginManager.getEventProperties(name, sortable)); for (var option in allEventProperties) { evt[option] = allEventProperties[option]; } if (rootEl) { rootEl.dispatchEvent(evt); } if (options[onName]) { options[onName].call(sortable, evt); } } var _excluded = ["evt"]; var pluginEvent = function pluginEvent(eventName, sortable) { var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, originalEvent = _ref.evt, data = _objectWithoutProperties(_ref, _excluded); PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread2({ dragEl: dragEl, parentEl: parentEl, ghostEl: ghostEl, rootEl: rootEl, nextEl: nextEl, lastDownEl: lastDownEl, cloneEl: cloneEl, cloneHidden: cloneHidden, dragStarted: moved, putSortable: putSortable, activeSortable: Sortable.active, originalEvent: originalEvent, oldIndex: oldIndex, oldDraggableIndex: oldDraggableIndex, newIndex: newIndex, newDraggableIndex: newDraggableIndex, hideGhostForTarget: _hideGhostForTarget, unhideGhostForTarget: _unhideGhostForTarget, cloneNowHidden: function cloneNowHidden() { cloneHidden = true; }, cloneNowShown: function cloneNowShown() { cloneHidden = false; }, dispatchSortableEvent: function dispatchSortableEvent(name) { _dispatchEvent({ sortable: sortable, name: name, originalEvent: originalEvent }); } }, data)); }; function _dispatchEvent(info) { dispatchEvent(_objectSpread2({ putSortable: putSortable, cloneEl: cloneEl, targetEl: dragEl, rootEl: rootEl, oldIndex: oldIndex, oldDraggableIndex: oldDraggableIndex, newIndex: newIndex, newDraggableIndex: newDraggableIndex }, info)); } var dragEl, parentEl, ghostEl, rootEl, nextEl, lastDownEl, cloneEl, cloneHidden, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, activeGroup, putSortable, awaitingDragStarted = false, ignoreNextClick = false, sortables = [], tapEvt, touchEvt, lastDx, lastDy, tapDistanceLeft, tapDistanceTop, moved, lastTarget, lastDirection, pastFirstInvertThresh = false, isCircumstantialInvert = false, targetMoveDistance, // For positioning ghost absolutely ghostRelativeParent, ghostRelativeParentInitialScroll = [], // (left, top) _silent = false, savedInputChecked = []; /** @const */ var documentExists = typeof document !== 'undefined', PositionGhostAbsolutely = IOS, CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float', // This will not pass for IE9, because IE9 DnD only works on anchors supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'), supportCssPointerEvents = function () { if (!documentExists) return; // false when <= IE11 if (IE11OrLess) { return false; } var el = document.createElement('x'); el.style.cssText = 'pointer-events:auto'; return el.style.pointerEvents === 'auto'; }(), _detectDirection = function _detectDirection(el, options) { var elCSS = css(el), elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth), child1 = getChild(el, 0, options), child2 = getChild(el, 1, options), firstChildCSS = child1 && css(child1), secondChildCSS = child2 && css(child2), firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width, secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width; if (elCSS.display === 'flex') { return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal'; } if (elCSS.display === 'grid') { return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } return child1 && (firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth) ? 'vertical' : 'horizontal'; }, _dragElInRowColumn = function _dragElInRowColumn(dragRect, targetRect, vertical) { var dragElS1Opp = vertical ? dragRect.left : dragRect.top, dragElS2Opp = vertical ? dragRect.right : dragRect.bottom, dragElOppLength = vertical ? dragRect.width : dragRect.height, targetS1Opp = vertical ? targetRect.left : targetRect.top, targetS2Opp = vertical ? targetRect.right : targetRect.bottom, targetOppLength = vertical ? targetRect.width : targetRect.height; return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2; }, /** * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold. * @param {Number} x X position * @param {Number} y Y position * @return {HTMLElement} Element of the first found nearest Sortable */ _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { var ret; sortables.some(function (sortable) { var threshold = sortable[expando].options.emptyInsertThreshold; if (!threshold || lastChild(sortable)) return; var rect = getRect(sortable), insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold, insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold; if (insideHorizontally && insideVertically) { return ret = sortable; } }); return ret; }, _prepareGroup = function _prepareGroup(options) { function toFn(value, pull) { return function (to, from, dragEl, evt) { var sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name; if (value == null && (pull || sameGroup)) { // Default pull value // Default pull and put value if same group return true; } else if (value == null || value === false) { return false; } else if (pull && value === 'clone') { return value; } else if (typeof value === 'function') { return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt); } else { var otherGroup = (pull ? to : from).options.group.name; return value === true || typeof value === 'string' && value === otherGroup || value.join && value.indexOf(otherGroup) > -1; } }; } var group = {}; var originalGroup = options.group; if (!originalGroup || _typeof(originalGroup) != 'object') { originalGroup = { name: originalGroup }; } group.name = originalGroup.name; group.checkPull = toFn(originalGroup.pull, true); group.checkPut = toFn(originalGroup.put); group.revertClone = originalGroup.revertClone; options.group = group; }, _hideGhostForTarget = function _hideGhostForTarget() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', 'none'); } }, _unhideGhostForTarget = function _unhideGhostForTarget() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', ''); } }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position if (documentExists && !ChromeForAndroid) { document.addEventListener('click', function (evt) { if (ignoreNextClick) { evt.preventDefault(); evt.stopPropagation && evt.stopPropagation(); evt.stopImmediatePropagation && evt.stopImmediatePropagation(); ignoreNextClick = false; return false; } }, true); } var nearestEmptyInsertDetectEvent = function nearestEmptyInsertDetectEvent(evt) { if (dragEl) { evt = evt.touches ? evt.touches[0] : evt; var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY); if (nearest) { // Create imitation event var event = {}; for (var i in evt) { if (evt.hasOwnProperty(i)) { event[i] = evt[i]; } } event.target = event.rootEl = nearest; event.preventDefault = void 0; event.stopPropagation = void 0; nearest[expando]._onDragOver(event); } } }; var _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) { if (dragEl) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); } }; /** * @class Sortable * @param {HTMLElement} el * @param {Object} [options] */ function Sortable(el, options) { if (!(el && el.nodeType && el.nodeType === 1)) { throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(el)); } this.el = el; // root element this.options = options = _extends({}, options); // Export instance el[expando] = this; var defaults = { group: null, sort: true, disabled: false, store: null, handle: null, draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*', swapThreshold: 1, // percentage; 0 <= x <= 1 invertSwap: false, // invert always invertedSwapThreshold: null, // will be set to same as swapThreshold if default removeCloneOnHide: true, direction: function direction() { return _detectDirection(el, this.options); }, ghostClass: 'sortable-ghost', chosenClass: 'sortable-chosen', dragClass: 'sortable-drag', ignore: 'a, img', filter: null, preventOnFilter: true, animation: 0, easing: null, setData: function setData(dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent); }, dropBubble: false, dragoverBubble: false, dataIdAttr: 'data-id', delay: 0, delayOnTouchOnly: false, touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1, forceFallback: false, fallbackClass: 'sortable-fallback', fallbackOnBody: false, fallbackTolerance: 0, fallbackOffset: { x: 0, y: 0 }, // Disabled on Safari: #1571; Enabled on Safari IOS: #2244 supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && (!Safari || IOS), emptyInsertThreshold: 5 }; PluginManager.initializePlugins(this, el, defaults); // Set default options for (var name in defaults) { !(name in options) && (options[name] = defaults[name]); } _prepareGroup(options); // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } // Setup drag mode this.nativeDraggable = options.forceFallback ? false : supportDraggable; if (this.nativeDraggable) { // Touch start threshold cannot be greater than the native dragstart threshold this.options.touchStartThreshold = 1; } // Bind events if (options.supportPointer) { on(el, 'pointerdown', this._onTapStart); } else { on(el, 'mousedown', this._onTapStart); on(el, 'touchstart', this._onTapStart); } if (this.nativeDraggable) { on(el, 'dragover', this); on(el, 'dragenter', this); } sortables.push(this.el); // Restore sorting options.store && options.store.get && this.sort(options.store.get(this) || []); // Add animation state manager _extends(this, AnimationStateManager()); } Sortable.prototype = /** @lends Sortable.prototype */{ constructor: Sortable, _isOutsideThisEl: function _isOutsideThisEl(target) { if (!this.el.contains(target) && target !== this.el) { lastTarget = null; } }, _getDirection: function _getDirection(evt, target) { return typeof this.options.direction === 'function' ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction; }, _onTapStart: function _onTapStart( /** Event|TouchEvent */evt) { if (!evt.cancelable) return; var _this = this, el = this.el, options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, target = (touch || evt).target, originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, filter = options.filter; _saveInputCheckedState(el); // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group. if (dragEl) { return; } if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) { return; // only left button and enabled } // cancel dnd if original target is content editable if (originalTarget.isContentEditable) { return; } // Safari ignores further event handling after mousedown if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') { return; } target = closest(target, options.draggable, el, false); if (target && target.animated) { return; } if (lastDownEl === target) { // Ignoring duplicate `down` return; } // Get the index of the dragged element within its parent oldIndex = index(target); oldDraggableIndex = index(target, options.draggable); // Check filter if (typeof filter === 'function') { if (filter.call(this, evt, target, this)) { _dispatchEvent({ sortable: _this, rootEl: originalTarget, name: 'filter', targetEl: target, toEl: el, fromEl: el }); pluginEvent('filter', _this, { evt: evt }); preventOnFilter && evt.preventDefault(); return; // cancel dnd } } else if (filter) { filter = filter.split(',').some(function (criteria) { criteria = closest(originalTarget, criteria.trim(), el, false); if (criteria) { _dispatchEvent({ sortable: _this, rootEl: criteria, name: 'filter', targetEl: target, fromEl: el, toEl: el }); pluginEvent('filter', _this, { evt: evt }); return true; } }); if (filter) { preventOnFilter && evt.preventDefault(); return; // cancel dnd } } if (options.handle && !closest(originalTarget, options.handle, el, false)) { return; } // Prepare `dragstart` this._prepareDragStart(evt, touch, target); }, _prepareDragStart: function _prepareDragStart( /** Event */evt, /** Touch */touch, /** HTMLElement */target) { var _this = this, el = _this.el, options = _this.options, ownerDocument = el.ownerDocument, dragStartFn; if (target && !dragEl && target.parentNode === el) { var dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; nextEl = dragEl.nextSibling; lastDownEl = target; activeGroup = options.group; Sortable.dragged = dragEl; tapEvt = { target: dragEl, clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; tapDistanceLeft = tapEvt.clientX - dragRect.left; tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; dragStartFn = function dragStartFn() { pluginEvent('delayEnded', _this, { evt: evt }); if (Sortable.eventCanceled) { _this._onDrop(); return; } // Delayed drag has been triggered // we can re-enable the events: touchmove/mousemove _this._disableDelayedDragEvents(); if (!FireFox && _this.nativeDraggable) { dragEl.draggable = true; } // Bind the events: dragstart/dragend _this._triggerDragStart(evt, touch); // Drag start event _dispatchEvent({ sortable: _this, name: 'choose', originalEvent: evt }); // Chosen item toggleClass(dragEl, options.chosenClass, true); }; // Disable "draggable" options.ignore.split(',').forEach(function (criteria) { find(dragEl, criteria.trim(), _disableDraggable); }); on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent); on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent); on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent); if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._onDrop); // Native D&D triggers pointercancel !this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop); } else { on(ownerDocument, 'mouseup', _this._onDrop); on(ownerDocument, 'touchend', _this._onDrop); on(ownerDocument, 'touchcancel', _this._onDrop); } // Make dragEl draggable (must be before delay for FireFox) if (FireFox && this.nativeDraggable) { this.options.touchStartThreshold = 4; dragEl.draggable = true; } pluginEvent('delayStart', this, { evt: evt }); // Delay is impossible for native DnD in Edge or IE if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) { if (Sortable.eventCanceled) { this._onDrop(); return; } // If the user moves the pointer or let go the click or touch // before the delay has been reached: // disable the delayed drag if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._disableDelayedDrag); on(ownerDocument, 'pointercancel', _this._disableDelayedDrag); } else { on(ownerDocument, 'mouseup', _this._disableDelayedDrag); on(ownerDocument, 'touchend', _this._disableDelayedDrag); on(ownerDocument, 'touchcancel', _this._disableDelayedDrag); } on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler); on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler); options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler); _this._dragStartTimer = setTimeout(dragStartFn, options.delay); } else { dragStartFn(); } } }, _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler( /** TouchEvent|PointerEvent **/e) { var touch = e.touches ? e.touches[0] : e; if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) { this._disableDelayedDrag(); } }, _disableDelayedDrag: function _disableDelayedDrag() { dragEl && _disableDraggable(dragEl); clearTimeout(this._dragStartTimer); this._disableDelayedDragEvents(); }, _disableDelayedDragEvents: function _disableDelayedDragEvents() { var ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._disableDelayedDrag); off(ownerDocument, 'touchend', this._disableDelayedDrag); off(ownerDocument, 'touchcancel', this._disableDelayedDrag); off(ownerDocument, 'pointerup', this._disableDelayedDrag); off(ownerDocument, 'pointercancel', this._disableDelayedDrag); off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler); }, _triggerDragStart: function _triggerDragStart( /** Event */evt, /** Touch */touch) { touch = touch || evt.pointerType == 'touch' && evt; if (!this.nativeDraggable || touch) { if (this.options.supportPointer) { on(document, 'pointermove', this._onTouchMove); } else if (touch) { on(document, 'touchmove', this._onTouchMove); } else { on(document, 'mousemove', this._onTouchMove); } } else { on(dragEl, 'dragend', this); on(rootEl, 'dragstart', this._onDragStart); } try { if (document.selection) { _nextTick(function () { document.selection.empty(); }); } else { window.getSelection().removeAllRanges(); } } catch (err) {} }, _dragStarted: function _dragStarted(fallback, evt) { awaitingDragStarted = false; if (rootEl && dragEl) { pluginEvent('dragStarted', this, { evt: evt }); if (this.nativeDraggable) { on(document, 'dragover', _checkOutsideTargetEl); } var options = this.options; // Apply effect !fallback && toggleClass(dragEl, options.dragClass, false); toggleClass(dragEl, options.ghostClass, true); Sortable.active = this; fallback && this._appendGhost(); // Drag start event _dispatchEvent({ sortable: this, name: 'start', originalEvent: evt }); } else { this._nulling(); } }, _emulateDragOver: function _emulateDragOver() { if (touchEvt) { this._lastX = touchEvt.clientX; this._lastY = touchEvt.clientY; _hideGhostForTarget(); var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY); var parent = target; while (target && target.shadowRoot) { target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY); if (target === parent) break; parent = target; } dragEl.parentNode[expando]._isOutsideThisEl(target); if (parent) { do { if (parent[expando]) { var inserted = void 0; inserted = parent[expando]._onDragOver({ clientX: touchEvt.clientX, clientY: touchEvt.clientY, target: target, rootEl: parent }); if (inserted && !this.options.dragoverBubble) { break; } } target = parent; // store last element } /* jshint boss:true */ while (parent = getParentOrHost(parent)); } _unhideGhostForTarget(); } }, _onTouchMove: function _onTouchMove( /**TouchEvent*/evt) { if (tapEvt) { var options = this.options, fallbackTolerance = options.fallbackTolerance, fallbackOffset = options.fallbackOffset, touch = evt.touches ? evt.touches[0] : evt, ghostMatrix = ghostEl && matrix(ghostEl, true), scaleX = ghostEl && ghostMatrix && ghostMatrix.a, scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { return; } this._onDragStart(evt, true); } if (ghostEl) { if (ghostMatrix) { ghostMatrix.e += dx - (lastDx || 0); ghostMatrix.f += dy - (lastDy || 0); } else { ghostMatrix = { a: 1, b: 0, c: 0, d: 1, e: dx, f: dy }; } var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); css(ghostEl, 'webkitTransform', cssMatrix); css(ghostEl, 'mozTransform', cssMatrix); css(ghostEl, 'msTransform', cssMatrix); css(ghostEl, 'transform', cssMatrix); lastDx = dx; lastDy = dy; touchEvt = touch; } evt.cancelable && evt.preventDefault(); } }, _appendGhost: function _appendGhost() { // Bug if using scale(): https://stackoverflow.com/questions/2637058 // Not being adjusted for if (!ghostEl) { var container = this.options.fallbackOnBody ? document.body : rootEl, rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container), options = this.options; // Position absolutely if (PositionGhostAbsolutely) { // Get relatively positioned parent ghostRelativeParent = container; while (css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) { ghostRelativeParent = ghostRelativeParent.parentNode; } if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) { if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement(); rect.top += ghostRelativeParent.scrollTop; rect.left += ghostRelativeParent.scrollLeft; } else { ghostRelativeParent = getWindowScrollingElement(); } ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent); } ghostEl = dragEl.cloneNode(true); toggleClass(ghostEl, options.ghostClass, false); toggleClass(ghostEl, options.fallbackClass, true); toggleClass(ghostEl, options.dragClass, true); css(ghostEl, 'transition', ''); css(ghostEl, 'transform', ''); css(ghostEl, 'box-sizing', 'border-box'); css(ghostEl, 'margin', 0); css(ghostEl, 'top', rect.top); css(ghostEl, 'left', rect.left); css(ghostEl, 'width', rect.width); css(ghostEl, 'height', rect.height); css(ghostEl, 'opacity', '0.8'); css(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed'); css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; container.appendChild(ghostEl); // Set transform-origin css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); } }, _onDragStart: function _onDragStart( /**Event*/evt, /**boolean*/fallback) { var _this = this; var dataTransfer = evt.dataTransfer; var options = _this.options; pluginEvent('dragStart', this, { evt: evt }); if (Sortable.eventCanceled) { this._onDrop(); return; } pluginEvent('setupClone', this); if (!Sortable.eventCanceled) { cloneEl = clone(dragEl); cloneEl.removeAttribute("id"); cloneEl.draggable = false; cloneEl.style['will-change'] = ''; this._hideClone(); toggleClass(cloneEl, this.options.chosenClass, false); Sortable.clone = cloneEl; } // #1143: IFrame support workaround _this.cloneId = _nextTick(function () { pluginEvent('clone', _this); if (Sortable.eventCanceled) return; if (!_this.options.removeCloneOnHide) { rootEl.insertBefore(cloneEl, dragEl); } _this._hideClone(); _dispatchEvent({ sortable: _this, name: 'clone' }); }); !fallback && toggleClass(dragEl, options.dragClass, true); // Set proper drop events if (fallback) { ignoreNextClick = true; _this._loopId = setInterval(_this._emulateDragOver, 50); } else { // Undo what was set in _prepareDragStart before drag started off(document, 'mouseup', _this._onDrop); off(document, 'touchend', _this._onDrop); off(document, 'touchcancel', _this._onDrop); if (dataTransfer) { dataTransfer.effectAllowed = 'move'; options.setData && options.setData.call(_this, dataTransfer, dragEl); } on(document, 'drop', _this); // #1276 fix: css(dragEl, 'transform', 'translateZ(0)'); } awaitingDragStarted = true; _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt)); on(document, 'selectstart', _this); moved = true; window.getSelection().removeAllRanges(); if (Safari) { css(document.body, 'user-select', 'none'); } }, // Returns true - if no further action is needed (either inserted or another condition) _onDragOver: function _onDragOver( /**Event*/evt) { var el = this.el, target = evt.target, dragRect, targetRect, revert, options = this.options, group = options.group, activeSortable = Sortable.active, isOwner = activeGroup === group, canSort = options.sort, fromSortable = putSortable || activeSortable, vertical, _this = this, completedFired = false; if (_silent) return; function dragOverEvent(name, extra) { pluginEvent(name, _this, _objectSpread2({ evt: evt, isOwner: isOwner, axis: vertical ? 'vertical' : 'horizontal', revert: revert, dragRect: dragRect, targetRect: targetRect, canSort: canSort, fromSortable: fromSortable, target: target, completed: completed, onMove: function onMove(target, after) { return _onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after); }, changed: changed }, extra)); } // Capture animation state function capture() { dragOverEvent('dragOverAnimationCapture'); _this.captureAnimationState(); if (_this !== fromSortable) { fromSortable.captureAnimationState(); } } // Return invocation when dragEl is inserted (or completed) function completed(insertion) { dragOverEvent('dragOverCompleted', { insertion: insertion }); if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } else { activeSortable._showClone(_this); } if (_this !== fromSortable) { // Set ghost class to new sortable's ghost class toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false); toggleClass(dragEl, options.ghostClass, true); } if (putSortable !== _this && _this !== Sortable.active) { putSortable = _this; } else if (_this === Sortable.active && putSortable) { putSortable = null; } // Animation if (fromSortable === _this) { _this._ignoreWhileAnimating = target; } _this.animateAll(function () { dragOverEvent('dragOverAnimationComplete'); _this._ignoreWhileAnimating = null; }); if (_this !== fromSortable) { fromSortable.animateAll(); fromSortable._ignoreWhileAnimating = null; } } // Null lastTarget if it is not inside a previously swapped element if (target === dragEl && !dragEl.animated || target === el && !target.animated) { lastTarget = null; } // no bubbling and not fallback if (!options.dragoverBubble && !evt.rootEl && target !== document) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); // Do not detect for empty insert if already inserted !insertion && nearestEmptyInsertDetectEvent(evt); } !options.dragoverBubble && evt.stopPropagation && evt.stopPropagation(); return completedFired = true; } // Call when dragEl has been inserted function changed() { newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); _dispatchEvent({ sortable: _this, name: 'change', toEl: el, newIndex: newIndex, newDraggableIndex: newDraggableIndex, originalEvent: evt }); } if (evt.preventDefault !== void 0) { evt.cancelable && evt.preventDefault(); } target = closest(target, options.draggable, el, true); dragOverEvent('dragOver'); if (Sortable.eventCanceled) return completedFired; if (dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target) { return completed(false); } ignoreNextClick = false; if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = parentEl !== rootEl) // Reverting item into the original list : putSortable === this || (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt))) { vertical = this._getDirection(evt, target) === 'vertical'; dragRect = getRect(dragEl); dragOverEvent('dragOverValid'); if (Sortable.eventCanceled) return completedFired; if (revert) { parentEl = rootEl; // actualization capture(); this._hideClone(); dragOverEvent('revert'); if (!Sortable.eventCanceled) { if (nextEl) { rootEl.insertBefore(dragEl, nextEl); } else { rootEl.appendChild(dragEl); } } return completed(true); } var elLastChild = lastChild(el, options.draggable); if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) { // Insert to end of list // If already at end of list: Do not insert if (elLastChild === dragEl) { return completed(false); } // if there is a last element, it is the target if (elLastChild && el === evt.target) { target = elLastChild; } if (target) { targetRect = getRect(target); } if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) { capture(); if (elLastChild && elLastChild.nextSibling) { // the last draggable element is not the last node el.insertBefore(dragEl, elLastChild.nextSibling); } else { el.appendChild(dragEl); } parentEl = el; // actualization changed(); return completed(true); } } else if (elLastChild && _ghostIsFirst(evt, vertical, this)) { // Insert to start of list var firstChild = getChild(el, 0, options, true); if (firstChild === dragEl) { return completed(false); } target = firstChild; targetRect = getRect(target); if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) { capture(); el.insertBefore(dragEl, firstChild); parentEl = el; // actualization changed(); return completed(true); } } else if (target.parentNode === el) { targetRect = getRect(target); var direction = 0, targetBeforeFirstSwap, differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { targetBeforeFirstSwap = targetRect[side1]; pastFirstInvertThresh = false; isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel; } direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target); var sibling; if (direction !== 0) { // Check if target is beside dragEl in respective direction (ignoring hidden elements) var dragIndex = index(dragEl); do { dragIndex -= direction; sibling = parentEl.children[dragIndex]; } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl)); } // If dragEl is already beside target: Do not insert if (direction === 0 || sibling === target) { return completed(false); } lastTarget = target; lastDirection = direction; var nextSibling = target.nextElementSibling, after = false; after = direction === 1; var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after); if (moveVector !== false) { if (moveVector === 1 || moveVector === -1) { after = moveVector === 1; } _silent = true; setTimeout(_unsilent, 30); capture(); if (after && !nextSibling) { el.appendChild(dragEl); } else { target.parentNode.insertBefore(dragEl, after ? nextSibling : target); } // Undo chrome's scroll adjustment (has no effect on other browsers) if (scrolledPastTop) { scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop); } parentEl = dragEl.parentNode; // actualization // must be done before animation if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) { targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]); } changed(); return completed(true); } } if (el.contains(dragEl)) { return completed(false); } } return false; }, _ignoreWhileAnimating: null, _offMoveEvents: function _offMoveEvents() { off(document, 'mousemove', this._onTouchMove); off(document, 'touchmove', this._onTouchMove); off(document, 'pointermove', this._onTouchMove); off(document, 'dragover', nearestEmptyInsertDetectEvent); off(document, 'mousemove', nearestEmptyInsertDetectEvent); off(document, 'touchmove', nearestEmptyInsertDetectEvent); }, _offUpEvents: function _offUpEvents() { var ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._onDrop); off(ownerDocument, 'touchend', this._onDrop); off(ownerDocument, 'pointerup', this._onDrop); off(ownerDocument, 'pointercancel', this._onDrop); off(ownerDocument, 'touchcancel', this._onDrop); off(document, 'selectstart', this); }, _onDrop: function _onDrop( /**Event*/evt) { var el = this.el, options = this.options; // Get the index of the dragged element within its parent newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt: evt }); parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); if (Sortable.eventCanceled) { this._nulling(); return; } awaitingDragStarted = false; isCircumstantialInvert = false; pastFirstInvertThresh = false; clearInterval(this._loopId); clearTimeout(this._dragStartTimer); _cancelNextTick(this.cloneId); _cancelNextTick(this._dragStartId); // Unbind events if (this.nativeDraggable) { off(document, 'drop', this); off(el, 'dragstart', this._onDragStart); } this._offMoveEvents(); this._offUpEvents(); if (Safari) { css(document.body, 'user-select', ''); } css(dragEl, 'transform', ''); if (evt) { if (moved) { evt.cancelable && evt.preventDefault(); !options.dropBubble && evt.stopPropagation(); } ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl); if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { // Remove clone(s) cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl); } if (dragEl) { if (this.nativeDraggable) { off(dragEl, 'dragend', this); } _disableDraggable(dragEl); dragEl.style['will-change'] = ''; // Remove classes // ghostClass is added in dragStarted if (moved && !awaitingDragStarted) { toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false); } toggleClass(dragEl, this.options.chosenClass, false); // Drag stop event _dispatchEvent({ sortable: this, name: 'unchoose', toEl: parentEl, newIndex: null, newDraggableIndex: null, originalEvent: evt }); if (rootEl !== parentEl) { if (newIndex >= 0) { // Add event _dispatchEvent({ rootEl: parentEl, name: 'add', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); // Remove event _dispatchEvent({ sortable: this, name: 'remove', toEl: parentEl, originalEvent: evt }); // drag from one list and drop into another _dispatchEvent({ rootEl: parentEl, name: 'sort', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } putSortable && putSortable.save(); } else { if (newIndex !== oldIndex) { if (newIndex >= 0) { // drag & drop within the same list _dispatchEvent({ sortable: this, name: 'update', toEl: parentEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } } } if (Sortable.active) { /* jshint eqnull:true */ if (newIndex == null || newIndex === -1) { newIndex = oldIndex; newDraggableIndex = oldDraggableIndex; } _dispatchEvent({ sortable: this, name: 'end', toEl: parentEl, originalEvent: evt }); // Save sorting this.save(); } } } this._nulling(); }, _nulling: function _nulling() { pluginEvent('nulling', this); rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null; var el = this.el; savedInputChecked.forEach(function (checkEl) { if (el.contains(checkEl)) { checkEl.checked = true; } }); savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function handleEvent( /**Event*/evt) { switch (evt.type) { case 'drop': case 'dragend': this._onDrop(evt); break; case 'dragenter': case 'dragover': if (dragEl) { this._onDragOver(evt); _globalDragOver(evt); } break; case 'selectstart': evt.preventDefault(); break; } }, /** * Serializes the item into an array of string. * @returns {String[]} */ toArray: function toArray() { var order = [], el, children = this.el.children, i = 0, n = children.length, options = this.options; for (; i < n; i++) { el = children[i]; if (closest(el, options.draggable, this.el, false)) { order.push(el.getAttribute(options.dataIdAttr) || _generateId(el)); } } return order; }, /** * Sorts the elements according to the array. * @param {String[]} order order of the items */ sort: function sort(order, useAnimation) { var items = {}, rootEl = this.el; this.toArray().forEach(function (id, i) { var el = rootEl.children[i]; if (closest(el, this.options.draggable, rootEl, false)) { items[id] = el; } }, this); useAnimation && this.captureAnimationState(); order.forEach(function (id) { if (items[id]) { rootEl.removeChild(items[id]); rootEl.appendChild(items[id]); } }); useAnimation && this.animateAll(); }, /** * Save the current sorting */ save: function save() { var store = this.options.store; store && store.set && store.set(this); }, /** * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. * @param {HTMLElement} el * @param {String} [selector] default: `options.draggable` * @returns {HTMLElement|null} */ closest: function closest$1(el, selector) { return closest(el, selector || this.options.draggable, this.el, false); }, /** * Set/get option * @param {string} name * @param {*} [value] * @returns {*} */ option: function option(name, value) { var options = this.options; if (value === void 0) { return options[name]; } else { var modifiedValue = PluginManager.modifyOption(this, name, value); if (typeof modifiedValue !== 'undefined') { options[name] = modifiedValue; } else { options[name] = value; } if (name === 'group') { _prepareGroup(options); } } }, /** * Destroy */ destroy: function destroy() { pluginEvent('destroy', this); var el = this.el; el[expando] = null; off(el, 'mousedown', this._onTapStart); off(el, 'touchstart', this._onTapStart); off(el, 'pointerdown', this._onTapStart); if (this.nativeDraggable) { off(el, 'dragover', this); off(el, 'dragenter', this); } // Remove draggable attributes Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) { el.removeAttribute('draggable'); }); this._onDrop(); this._disableDelayedDragEvents(); sortables.splice(sortables.indexOf(this.el), 1); this.el = el = null; }, _hideClone: function _hideClone() { if (!cloneHidden) { pluginEvent('hideClone', this); if (Sortable.eventCanceled) return; css(cloneEl, 'display', 'none'); if (this.options.removeCloneOnHide && cloneEl.parentNode) { cloneEl.parentNode.removeChild(cloneEl); } cloneHidden = true; } }, _showClone: function _showClone(putSortable) { if (putSortable.lastPutMode !== 'clone') { this._hideClone(); return; } if (cloneHidden) { pluginEvent('showClone', this); if (Sortable.eventCanceled) return; // show clone at dragEl or original position if (dragEl.parentNode == rootEl && !this.options.group.revertClone) { rootEl.insertBefore(cloneEl, dragEl); } else if (nextEl) { rootEl.insertBefore(cloneEl, nextEl); } else { rootEl.appendChild(cloneEl); } if (this.options.group.revertClone) { this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); cloneHidden = false; } } }; function _globalDragOver( /**Event*/evt) { if (evt.dataTransfer) { evt.dataTransfer.dropEffect = 'move'; } evt.cancelable && evt.preventDefault(); } function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) { var evt, sortable = fromEl[expando], onMoveFn = sortable.options.onMove, retVal; // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent('move', { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent('move', true, true); } evt.to = toEl; evt.from = fromEl; evt.dragged = dragEl; evt.draggedRect = dragRect; evt.related = targetEl || toEl; evt.relatedRect = targetRect || getRect(toEl); evt.willInsertAfter = willInsertAfter; evt.originalEvent = originalEvent; fromEl.dispatchEvent(evt); if (onMoveFn) { retVal = onMoveFn.call(sortable, evt, originalEvent); } return retVal; } function _disableDraggable(el) { el.draggable = false; } function _unsilent() { _silent = false; } function _ghostIsFirst(evt, vertical, sortable) { var firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true)); var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); var spacer = 10; return vertical ? evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left; } function _ghostIsLast(evt, vertical, sortable) { var lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable)); var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); var spacer = 10; return vertical ? evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top; } function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) { var mouseOnAxis = vertical ? evt.clientY : evt.clientX, targetLength = vertical ? targetRect.height : targetRect.width, targetS1 = vertical ? targetRect.top : targetRect.left, targetS2 = vertical ? targetRect.bottom : targetRect.right, invert = false; if (!invertSwap) { // Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) { // multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2 // check if past first invert threshold on side opposite of lastDirection if (!pastFirstInvertThresh && (lastDirection === 1 ? mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 : mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2)) { // past first invert threshold, do not restrict inverted threshold to dragEl shadow pastFirstInvertThresh = true; } if (!pastFirstInvertThresh) { // dragEl shadow (target move distance shadow) if (lastDirection === 1 ? mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow : mouseOnAxis > targetS2 - targetMoveDistance) { return -lastDirection; } } else { invert = true; } } else { // Regular if (mouseOnAxis > targetS1 + targetLength * (1 - swapThreshold) / 2 && mouseOnAxis < targetS2 - targetLength * (1 - swapThreshold) / 2) { return _getInsertDirection(target); } } } invert = invert || invertSwap; if (invert) { // Invert of regular if (mouseOnAxis < targetS1 + targetLength * invertedSwapThreshold / 2 || mouseOnAxis > targetS2 - targetLength * invertedSwapThreshold / 2) { return mouseOnAxis > targetS1 + targetLength / 2 ? 1 : -1; } } return 0; } /** * Gets the direction dragEl must be swapped relative to target in order to make it * seem that dragEl has been "inserted" into that element's position * @param {HTMLElement} target The target whose position dragEl is being inserted at * @return {Number} Direction dragEl must be swapped */ function _getInsertDirection(target) { if (index(dragEl) < index(target)) { return 1; } else { return -1; } } /** * Generate id * @param {HTMLElement} el * @returns {String} * @private */ function _generateId(el) { var str = el.tagName + el.className + el.src + el.href + el.textContent, i = str.length, sum = 0; while (i--) { sum += str.charCodeAt(i); } return sum.toString(36); } function _saveInputCheckedState(root) { savedInputChecked.length = 0; var inputs = root.getElementsByTagName('input'); var idx = inputs.length; while (idx--) { var el = inputs[idx]; el.checked && savedInputChecked.push(el); } } function _nextTick(fn) { return setTimeout(fn, 0); } function _cancelNextTick(id) { return clearTimeout(id); } // Fixed #973: if (documentExists) { on(document, 'touchmove', function (evt) { if ((Sortable.active || awaitingDragStarted) && evt.cancelable) { evt.preventDefault(); } }); } // Export utils Sortable.utils = { on: on, off: off, css: css, find: find, is: function is(el, selector) { return !!closest(el, selector, el, false); }, extend: extend, throttle: throttle, closest: closest, toggleClass: toggleClass, clone: clone, index: index, nextTick: _nextTick, cancelNextTick: _cancelNextTick, detectDirection: _detectDirection, getChild: getChild, expando: expando }; /** * Get the Sortable instance of an element * @param {HTMLElement} element The element * @return {Sortable|undefined} The instance of Sortable */ Sortable.get = function (element) { return element[expando]; }; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ Sortable.mount = function () { for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { plugins[_key] = arguments[_key]; } if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach(function (plugin) { if (!plugin.prototype || !plugin.prototype.constructor) { throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); } if (plugin.utils) Sortable.utils = _objectSpread2(_objectSpread2({}, Sortable.utils), plugin.utils); PluginManager.mount(plugin); }); }; /** * Create sortable instance * @param {HTMLElement} el * @param {Object} [options] */ Sortable.create = function (el, options) { return new Sortable(el, options); }; // Export Sortable.version = version; var autoScrolls = [], scrollEl, scrollRootEl, scrolling = false, lastAutoScrollX, lastAutoScrollY, touchEvt$1, pointerElemChangedInterval; function AutoScrollPlugin() { function AutoScroll() { this.defaults = { scroll: true, forceAutoScrollFallback: false, scrollSensitivity: 30, scrollSpeed: 10, bubbleScroll: true }; // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } } AutoScroll.prototype = { dragStarted: function dragStarted(_ref) { var originalEvent = _ref.originalEvent; if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); } else { on(document, 'mousemove', this._handleFallbackAutoScroll); } } }, dragOverCompleted: function dragOverCompleted(_ref2) { var originalEvent = _ref2.originalEvent; // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, drop: function drop() { if (this.sortable.nativeDraggable) { off(document, 'dragover', this._handleAutoScroll); } else { off(document, 'pointermove', this._handleFallbackAutoScroll); off(document, 'touchmove', this._handleFallbackAutoScroll); off(document, 'mousemove', this._handleFallbackAutoScroll); } clearPointerElemChangedInterval(); clearAutoScrolls(); cancelThrottle(); }, nulling: function nulling() { touchEvt$1 = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null; autoScrolls.length = 0; }, _handleFallbackAutoScroll: function _handleFallbackAutoScroll(evt) { this._handleAutoScroll(evt, true); }, _handleAutoScroll: function _handleAutoScroll(evt, fallback) { var _this = this; var x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt$1 = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, // MACOS Safari does not have autoscroll, // Firefox and Chrome are good if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) { autoScroll(evt, this.options, elem, fallback); // Listener for pointer element change var ogElemScroller = getParentAutoScrollElement(elem, true); if (scrolling && (!pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY)) { pointerElemChangedInterval && clearPointerElemChangedInterval(); // Detect for pointer elem change, emulating native DnD behaviour pointerElemChangedInterval = setInterval(function () { var newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true); if (newElem !== ogElemScroller) { ogElemScroller = newElem; clearAutoScrolls(); } autoScroll(evt, _this.options, newElem, fallback); }, 10); lastAutoScrollX = x; lastAutoScrollY = y; } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false); } } }; return _extends(AutoScroll, { pluginName: 'scroll', initializeByDefault: true }); } function clearAutoScrolls() { autoScrolls.forEach(function (autoScroll) { clearInterval(autoScroll.pid); }); autoScrolls = []; } function clearPointerElemChangedInterval() { clearInterval(pointerElemChangedInterval); } var autoScroll = throttle(function (evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; var x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); var scrollThisInstance = false, scrollCustomFn; // New scroll root, set scrollEl if (scrollRootEl !== rootEl) { scrollRootEl = rootEl; clearAutoScrolls(); scrollEl = options.scroll; scrollCustomFn = options.scrollFn; if (scrollEl === true) { scrollEl = getParentAutoScrollElement(rootEl, true); } } var layersOut = 0; var currentParent = scrollEl; do { var el = currentParent, rect = getRect(el), top = rect.top, bottom = rect.bottom, left = rect.left, right = rect.right, width = rect.width, height = rect.height, canScrollX = void 0, canScrollY = void 0, scrollWidth = el.scrollWidth, scrollHeight = el.scrollHeight, elCSS = css(el), scrollPosX = el.scrollLeft, scrollPosY = el.scrollTop; if (el === winScroller) { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible'); } else { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (var i = 0; i <= layersOut; i++) { if (!autoScrolls[i]) { autoScrolls[i] = {}; } } } if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) { autoScrolls[layersOut].el = el; autoScrolls[layersOut].vx = vx; autoScrolls[layersOut].vy = vy; clearInterval(autoScrolls[layersOut].pid); if (vx != 0 || vy != 0) { scrollThisInstance = true; /* jshint loopfunc:true */ autoScrolls[layersOut].pid = setInterval(function () { // emulate drag over during autoscroll (fallback), emulating native DnD behaviour if (isFallback && this.layer === 0) { Sortable.active._onTouchMove(touchEvt$1); // To move ghost if it is positioned absolutely } var scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0; var scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0; if (typeof scrollCustomFn === 'function') { if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt$1, autoScrolls[this.layer].el) !== 'continue') { return; } } scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY); }.bind({ layer: layersOut }), 24); } } layersOut++; } while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false))); scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not }, 30); var drop = function drop(_ref) { var originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, dragEl = _ref.dragEl, activeSortable = _ref.activeSortable, dispatchSortableEvent = _ref.dispatchSortableEvent, hideGhostForTarget = _ref.hideGhostForTarget, unhideGhostForTarget = _ref.unhideGhostForTarget; if (!originalEvent) return; var toSortable = putSortable || activeSortable; hideGhostForTarget(); var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; var target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); this.onSpill({ dragEl: dragEl, putSortable: putSortable }); } }; function Revert() {} Revert.prototype = { startIndex: null, dragStart: function dragStart(_ref2) { var oldDraggableIndex = _ref2.oldDraggableIndex; this.startIndex = oldDraggableIndex; }, onSpill: function onSpill(_ref3) { var dragEl = _ref3.dragEl, putSortable = _ref3.putSortable; this.sortable.captureAnimationState(); if (putSortable) { putSortable.captureAnimationState(); } var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); } else { this.sortable.el.appendChild(dragEl); } this.sortable.animateAll(); if (putSortable) { putSortable.animateAll(); } }, drop: drop }; _extends(Revert, { pluginName: 'revertOnSpill' }); function Remove() {} Remove.prototype = { onSpill: function onSpill(_ref4) { var dragEl = _ref4.dragEl, putSortable = _ref4.putSortable; var parentSortable = putSortable || this.sortable; parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); parentSortable.animateAll(); }, drop: drop }; _extends(Remove, { pluginName: 'removeOnSpill' }); var lastSwapEl; function SwapPlugin() { function Swap() { this.defaults = { swapClass: 'sortable-swap-highlight' }; } Swap.prototype = { dragStart: function dragStart(_ref) { var dragEl = _ref.dragEl; lastSwapEl = dragEl; }, dragOverValid: function dragOverValid(_ref2) { var completed = _ref2.completed, target = _ref2.target, onMove = _ref2.onMove, activeSortable = _ref2.activeSortable, changed = _ref2.changed, cancel = _ref2.cancel; if (!activeSortable.options.swap) return; var el = this.sortable.el, options = this.options; if (target && target !== el) { var prevSwapEl = lastSwapEl; if (onMove(target) !== false) { toggleClass(target, options.swapClass, true); lastSwapEl = target; } else { lastSwapEl = null; } if (prevSwapEl && prevSwapEl !== lastSwapEl) { toggleClass(prevSwapEl, options.swapClass, false); } } changed(); completed(true); cancel(); }, drop: function drop(_ref3) { var activeSortable = _ref3.activeSortable, putSortable = _ref3.putSortable, dragEl = _ref3.dragEl; var toSortable = putSortable || this.sortable; var options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { if (dragEl !== lastSwapEl) { toSortable.captureAnimationState(); if (toSortable !== activeSortable) activeSortable.captureAnimationState(); swapNodes(dragEl, lastSwapEl); toSortable.animateAll(); if (toSortable !== activeSortable) activeSortable.animateAll(); } } }, nulling: function nulling() { lastSwapEl = null; } }; return _extends(Swap, { pluginName: 'swap', eventProperties: function eventProperties() { return { swapItem: lastSwapEl }; } }); } function swapNodes(n1, n2) { var p1 = n1.parentNode, p2 = n2.parentNode, i1, i2; if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; i1 = index(n1); i2 = index(n2); if (p1.isEqualNode(p2) && i1 < i2) { i2++; } p1.insertBefore(n2, p1.children[i1]); p2.insertBefore(n1, p2.children[i2]); } var multiDragElements = [], multiDragClones = [], lastMultiDragSelect, // for selection with modifier key down (SHIFT) multiDragSortable, initialFolding = false, // Initial multi-drag fold when drag started folding = false, // Folding any other time dragStarted = false, dragEl$1, clonesFromRect, clonesHidden; function MultiDragPlugin() { function MultiDrag(sortable) { // Bind all private methods for (var fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } if (!sortable.options.avoidImplicitDeselect) { if (sortable.options.supportPointer) { on(document, 'pointerup', this._deselectMultiDrag); } else { on(document, 'mouseup', this._deselectMultiDrag); on(document, 'touchend', this._deselectMultiDrag); } } on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, avoidImplicitDeselect: false, setData: function setData(dataTransfer, dragEl) { var data = ''; if (multiDragElements.length && multiDragSortable === sortable) { multiDragElements.forEach(function (multiDragElement, i) { data += (!i ? '' : ', ') + multiDragElement.textContent; }); } else { data = dragEl.textContent; } dataTransfer.setData('Text', data); } }; } MultiDrag.prototype = { multiDragKeyDown: false, isMultiDrag: false, delayStartGlobal: function delayStartGlobal(_ref) { var dragged = _ref.dragEl; dragEl$1 = dragged; }, delayEnded: function delayEnded() { this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); }, setupClone: function setupClone(_ref2) { var sortable = _ref2.sortable, cancel = _ref2.cancel; if (!this.isMultiDrag) return; for (var i = 0; i < multiDragElements.length; i++) { multiDragClones.push(clone(multiDragElements[i])); multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; multiDragClones[i].draggable = false; multiDragClones[i].style['will-change'] = ''; toggleClass(multiDragClones[i], this.options.selectedClass, false); multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); cancel(); }, clone: function clone(_ref3) { var sortable = _ref3.sortable, rootEl = _ref3.rootEl, dispatchSortableEvent = _ref3.dispatchSortableEvent, cancel = _ref3.cancel; if (!this.isMultiDrag) return; if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); cancel(); } } }, showClone: function showClone(_ref4) { var cloneNowShown = _ref4.cloneNowShown, rootEl = _ref4.rootEl, cancel = _ref4.cancel; if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(function (clone) { css(clone, 'display', ''); }); cloneNowShown(); clonesHidden = false; cancel(); }, hideClone: function hideClone(_ref5) { var _this = this; var sortable = _ref5.sortable, cloneNowHidden = _ref5.cloneNowHidden, cancel = _ref5.cancel; if (!this.isMultiDrag) return; multiDragClones.forEach(function (clone) { css(clone, 'display', 'none'); if (_this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; cancel(); }, dragStartGlobal: function dragStartGlobal(_ref6) { var sortable = _ref6.sortable; if (!this.isMultiDrag && multiDragSortable) { multiDragSortable.multiDrag._deselectMultiDrag(); } multiDragElements.forEach(function (multiDragElement) { multiDragElement.sortableIndex = index(multiDragElement); }); // Sort multi-drag elements multiDragElements = multiDragElements.sort(function (a, b) { return a.sortableIndex - b.sortableIndex; }); dragStarted = true; }, dragStarted: function dragStarted(_ref7) { var _this2 = this; var sortable = _ref7.sortable; if (!this.isMultiDrag) return; if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, // show multi drag elements, // animate to rects, // unset rects & remove from DOM sortable.captureAnimationState(); if (this.options.animation) { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; css(multiDragElement, 'position', 'absolute'); }); var dragRect = getRect(dragEl$1, false, true, true); multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; setRect(multiDragElement, dragRect); }); folding = true; initialFolding = true; } } sortable.animateAll(function () { folding = false; initialFolding = false; if (_this2.options.animation) { multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled if (_this2.options.sort) { removeMultiDragElements(); } }); }, dragOver: function dragOver(_ref8) { var target = _ref8.target, completed = _ref8.completed, cancel = _ref8.cancel; if (folding && ~multiDragElements.indexOf(target)) { completed(false); cancel(); } }, revert: function revert(_ref9) { var fromSortable = _ref9.fromSortable, rootEl = _ref9.rootEl, sortable = _ref9.sortable, dragRect = _ref9.dragRect; if (multiDragElements.length > 1) { // Setup unfold animation multiDragElements.forEach(function (multiDragElement) { sortable.addAnimationState({ target: multiDragElement, rect: folding ? getRect(multiDragElement) : dragRect }); unsetRect(multiDragElement); multiDragElement.fromRect = dragRect; fromSortable.removeAnimationState(multiDragElement); }); folding = false; insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted: function dragOverCompleted(_ref10) { var sortable = _ref10.sortable, isOwner = _ref10.isOwner, insertion = _ref10.insertion, activeSortable = _ref10.activeSortable, parentEl = _ref10.parentEl, putSortable = _ref10.putSortable; var options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } initialFolding = false; // If leaving sort:false root, or already folding - Fold to new location if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) { // Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible var dragRectAbsolute = getRect(dragEl$1, false, true, true); multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; setRect(multiDragElement, dragRectAbsolute); // Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted // while folding, and so that we can capture them again because old sortable will no longer be fromSortable parentEl.appendChild(multiDragElement); }); folding = true; } // Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out if (!isOwner) { // Only remove if not folding (folding will remove them anyways) if (!folding) { removeMultiDragElements(); } if (multiDragElements.length > 1) { var clonesHiddenBefore = clonesHidden; activeSortable._showClone(sortable); // Unfold animation for clones if showing from hidden if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) { multiDragClones.forEach(function (clone) { activeSortable.addAnimationState({ target: clone, rect: clonesFromRect }); clone.fromRect = clonesFromRect; clone.thisAnimationDuration = null; }); } } else { activeSortable._showClone(sortable); } } } }, dragOverAnimationCapture: function dragOverAnimationCapture(_ref11) { var dragRect = _ref11.dragRect, isOwner = _ref11.isOwner, activeSortable = _ref11.activeSortable; multiDragElements.forEach(function (multiDragElement) { multiDragElement.thisAnimationDuration = null; }); if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) { clonesFromRect = _extends({}, dragRect); var dragMatrix = matrix(dragEl$1, true); clonesFromRect.top -= dragMatrix.f; clonesFromRect.left -= dragMatrix.e; } }, dragOverAnimationComplete: function dragOverAnimationComplete() { if (folding) { folding = false; removeMultiDragElements(); } }, drop: function drop(_ref12) { var evt = _ref12.originalEvent, rootEl = _ref12.rootEl, parentEl = _ref12.parentEl, sortable = _ref12.sortable, dispatchSortableEvent = _ref12.dispatchSortableEvent, oldIndex = _ref12.oldIndex, putSortable = _ref12.putSortable; var toSortable = putSortable || this.sortable; if (!evt) return; var options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { if (options.multiDragKey && !this.multiDragKeyDown) { this._deselectMultiDrag(); } toggleClass(dragEl$1, options.selectedClass, !~multiDragElements.indexOf(dragEl$1)); if (!~multiDragElements.indexOf(dragEl$1)) { multiDragElements.push(dragEl$1); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', targetEl: dragEl$1, originalEvent: evt }); // Modifier activated, select from last to dragEl if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { var lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl$1); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { (function () { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) var n, i; if (currentIndex > lastIndex) { i = lastIndex; n = currentIndex; } else { i = currentIndex; n = lastIndex + 1; } var filter = options.filter; for (; i < n; i++) { if (~multiDragElements.indexOf(children[i])) continue; // Check if element is draggable if (!closest(children[i], options.draggable, parentEl, false)) continue; // Check if element is filtered var filtered = filter && (typeof filter === 'function' ? filter.call(sortable, evt, children[i], sortable) : filter.split(',').some(function (criteria) { return closest(children[i], criteria.trim(), parentEl, false); })); if (filtered) continue; toggleClass(children[i], options.selectedClass, true); multiDragElements.push(children[i]); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', targetEl: children[i], originalEvent: evt }); } })(); } } else { lastMultiDragSelect = dragEl$1; } multiDragSortable = toSortable; } else { multiDragElements.splice(multiDragElements.indexOf(dragEl$1), 1); lastMultiDragSelect = null; dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'deselect', targetEl: dragEl$1, originalEvent: evt }); } } // Multi-drag drop if (dragStarted && this.isMultiDrag) { folding = false; // Do not "unfold" after around dragEl if reverted if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) { var dragRect = getRect(dragEl$1), multiDragIndex = index(dragEl$1, ':not(.' + this.options.selectedClass + ')'); if (!initialFolding && options.animation) dragEl$1.thisAnimationDuration = null; toSortable.captureAnimationState(); if (!initialFolding) { if (options.animation) { dragEl$1.fromRect = dragRect; multiDragElements.forEach(function (multiDragElement) { multiDragElement.thisAnimationDuration = null; if (multiDragElement !== dragEl$1) { var rect = folding ? getRect(multiDragElement) : dragRect; multiDragElement.fromRect = rect; // Prepare unfold animation toSortable.addAnimationState({ target: multiDragElement, rect: rect }); } }); } // Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert // properly they must all be removed removeMultiDragElements(); multiDragElements.forEach(function (multiDragElement) { if (children[multiDragIndex]) { parentEl.insertBefore(multiDragElement, children[multiDragIndex]); } else { parentEl.appendChild(multiDragElement); } multiDragIndex++; }); // If initial folding is done, the elements may have changed position because they are now // unfolding around dragEl, even though dragEl may not have his index changed, so update event // must be fired here as Sortable will not. if (oldIndex === index(dragEl$1)) { var update = false; multiDragElements.forEach(function (multiDragElement) { if (multiDragElement.sortableIndex !== index(multiDragElement)) { update = true; return; } }); if (update) { dispatchSortableEvent('update'); dispatchSortableEvent('sort'); } } } // Must be done after capturing individual rects (scroll bar) multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); toSortable.animateAll(); } multiDragSortable = toSortable; } // Remove clones if necessary if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { multiDragClones.forEach(function (clone) { clone.parentNode && clone.parentNode.removeChild(clone); }); } }, nullingGlobal: function nullingGlobal() { this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, destroyGlobal: function destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); off(document, 'mouseup', this._deselectMultiDrag); off(document, 'touchend', this._deselectMultiDrag); off(document, 'keydown', this._checkKeyDown); off(document, 'keyup', this._checkKeyUp); }, _deselectMultiDrag: function _deselectMultiDrag(evt) { if (typeof dragStarted !== "undefined" && dragStarted) return; // Only deselect if selection is in this sortable if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { var el = multiDragElements[0]; toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, rootEl: this.sortable.el, name: 'deselect', targetEl: el, originalEvent: evt }); } }, _checkKeyDown: function _checkKeyDown(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp: function _checkKeyUp(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } }; return _extends(MultiDrag, { // Static methods & properties pluginName: 'multiDrag', utils: { /** * Selects the provided multi-drag item * @param {HTMLElement} el The element to be selected */ select: function select(el) { var sortable = el.parentNode[expando]; if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return; if (multiDragSortable && multiDragSortable !== sortable) { multiDragSortable.multiDrag._deselectMultiDrag(); multiDragSortable = sortable; } toggleClass(el, sortable.options.selectedClass, true); multiDragElements.push(el); }, /** * Deselects the provided multi-drag item * @param {HTMLElement} el The element to be deselected */ deselect: function deselect(el) { var sortable = el.parentNode[expando], index = multiDragElements.indexOf(el); if (!sortable || !sortable.options.multiDrag || !~index) return; toggleClass(el, sortable.options.selectedClass, false); multiDragElements.splice(index, 1); } }, eventProperties: function eventProperties() { var _this3 = this; var oldIndicies = [], newIndicies = []; multiDragElements.forEach(function (multiDragElement) { oldIndicies.push({ multiDragElement: multiDragElement, index: multiDragElement.sortableIndex }); // multiDragElements will already be sorted if folding var newIndex; if (folding && multiDragElement !== dragEl$1) { newIndex = -1; } else if (folding) { newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } newIndicies.push({ multiDragElement: multiDragElement, index: newIndex }); }); return { items: _toConsumableArray(multiDragElements), clones: [].concat(multiDragClones), oldIndicies: oldIndicies, newIndicies: newIndicies }; }, optionListeners: { multiDragKey: function multiDragKey(key) { key = key.toLowerCase(); if (key === 'ctrl') { key = 'Control'; } else if (key.length > 1) { key = key.charAt(0).toUpperCase() + key.substr(1); } return key; } } }); } function insertMultiDragElements(clonesInserted, rootEl) { multiDragElements.forEach(function (multiDragElement, i) { var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(multiDragElement, target); } else { rootEl.appendChild(multiDragElement); } }); } /** * Insert multi-drag clones * @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted * @param {HTMLElement} rootEl */ function insertMultiDragClones(elementsInserted, rootEl) { multiDragClones.forEach(function (clone, i) { var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(clone, target); } else { rootEl.appendChild(clone); } }); } function removeMultiDragElements() { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement); }); } Sortable.mount(new AutoScrollPlugin()); Sortable.mount(Remove, Revert); export default Sortable; export { MultiDragPlugin as MultiDrag, Sortable, SwapPlugin as Swap }; ================================================ FILE: package.json ================================================ { "name": "sortablejs", "exportName": "Sortable", "version": "1.15.7", "devDependencies": { "@babel/core": "^7.4.4", "@babel/plugin-transform-object-assign": "^7.2.0", "@babel/preset-env": "^7.4.4", "rollup": "^1.11.3", "rollup-plugin-babel": "^4.3.2", "rollup-plugin-json": "^4.0.0", "rollup-plugin-node-resolve": "^5.0.0", "testcafe": "^1.3.1", "testcafe-browser-provider-saucelabs": "^1.7.0", "testcafe-reporter-xunit": "^2.1.0", "uglify-js": "^3.5.12" }, "description": "JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.", "main": "./Sortable.min.js", "module": "modular/sortable.esm.js", "scripts": { "build:umd": "set NODE_ENV=umd&& rollup -c ./scripts/umd-build.js", "build:umd:watch": "set NODE_ENV=umd&& rollup -w -c ./scripts/umd-build.js", "build:es": "set NODE_ENV=es&& rollup -c ./scripts/esm-build.js", "build:es:watch": "set NODE_ENV=es&& rollup -w -c ./scripts/esm-build.js", "minify": "node ./scripts/minify.js", "build": "npm run build:es && npm run build:umd && npm run minify", "test:compat": "node ./scripts/test-compat.js", "test": "node ./scripts/test.js" }, "maintainers": [ "Konstantin Lebedev ", "Owen Mills " ], "repository": { "type": "git", "url": "git://github.com/SortableJS/Sortable.git" }, "files": [ "Sortable.js", "Sortable.min.js", "modular/", "src/" ], "keywords": [ "sortable", "reorder", "drag", "meteor", "angular", "ng-sortable", "react", "vue", "mixin" ], "license": "MIT" } ================================================ FILE: plugins/AutoScroll/AutoScroll.js ================================================ import { on, off, css, throttle, cancelThrottle, scrollBy, getParentAutoScrollElement, expando, getRect, getWindowScrollingElement } from '../../src/utils.js'; import Sortable from '../../src/Sortable.js'; import { Edge, IE11OrLess, Safari } from '../../src/BrowserInfo.js'; let autoScrolls = [], scrollEl, scrollRootEl, scrolling = false, lastAutoScrollX, lastAutoScrollY, touchEvt, pointerElemChangedInterval; function AutoScrollPlugin() { function AutoScroll() { this.defaults = { scroll: true, forceAutoScrollFallback: false, scrollSensitivity: 30, scrollSpeed: 10, bubbleScroll: true }; // Bind all private methods for (let fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } } AutoScroll.prototype = { dragStarted({ originalEvent }) { if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); } else { on(document, 'mousemove', this._handleFallbackAutoScroll); } } }, dragOverCompleted({ originalEvent }) { // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, drop() { if (this.sortable.nativeDraggable) { off(document, 'dragover', this._handleAutoScroll); } else { off(document, 'pointermove', this._handleFallbackAutoScroll); off(document, 'touchmove', this._handleFallbackAutoScroll); off(document, 'mousemove', this._handleFallbackAutoScroll); } clearPointerElemChangedInterval(); clearAutoScrolls(); cancelThrottle(); }, nulling() { touchEvt = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null; autoScrolls.length = 0; }, _handleFallbackAutoScroll(evt) { this._handleAutoScroll(evt, true); }, _handleAutoScroll(evt, fallback) { const x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, // MACOS Safari does not have autoscroll, // Firefox and Chrome are good if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) { autoScroll(evt, this.options, elem, fallback); // Listener for pointer element change let ogElemScroller = getParentAutoScrollElement(elem, true); if ( scrolling && ( !pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY ) ) { pointerElemChangedInterval && clearPointerElemChangedInterval(); // Detect for pointer elem change, emulating native DnD behaviour pointerElemChangedInterval = setInterval(() => { let newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true); if (newElem !== ogElemScroller) { ogElemScroller = newElem; clearAutoScrolls(); } autoScroll(evt, this.options, newElem, fallback); }, 10); lastAutoScrollX = x; lastAutoScrollY = y; } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false); } } }; return Object.assign(AutoScroll, { pluginName: 'scroll', initializeByDefault: true }); } function clearAutoScrolls() { autoScrolls.forEach(function(autoScroll) { clearInterval(autoScroll.pid); }); autoScrolls = []; } function clearPointerElemChangedInterval() { clearInterval(pointerElemChangedInterval); } const autoScroll = throttle(function(evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; const x = (evt.touches ? evt.touches[0] : evt).clientX, y = (evt.touches ? evt.touches[0] : evt).clientY, sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); let scrollThisInstance = false, scrollCustomFn; // New scroll root, set scrollEl if (scrollRootEl !== rootEl) { scrollRootEl = rootEl; clearAutoScrolls(); scrollEl = options.scroll; scrollCustomFn = options.scrollFn; if (scrollEl === true) { scrollEl = getParentAutoScrollElement(rootEl, true); } } let layersOut = 0; let currentParent = scrollEl; do { let el = currentParent, rect = getRect(el), top = rect.top, bottom = rect.bottom, left = rect.left, right = rect.right, width = rect.width, height = rect.height, canScrollX, canScrollY, scrollWidth = el.scrollWidth, scrollHeight = el.scrollHeight, elCSS = css(el), scrollPosX = el.scrollLeft, scrollPosY = el.scrollTop; if (el === winScroller) { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible'); } else { canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll'); canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } let vx = canScrollX && (Math.abs(right - x) <= sens && (scrollPosX + width) < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); let vy = canScrollY && (Math.abs(bottom - y) <= sens && (scrollPosY + height) < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (let i = 0; i <= layersOut; i++) { if (!autoScrolls[i]) { autoScrolls[i] = {}; } } } if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) { autoScrolls[layersOut].el = el; autoScrolls[layersOut].vx = vx; autoScrolls[layersOut].vy = vy; clearInterval(autoScrolls[layersOut].pid); if (vx != 0 || vy != 0) { scrollThisInstance = true; /* jshint loopfunc:true */ autoScrolls[layersOut].pid = setInterval((function () { // emulate drag over during autoscroll (fallback), emulating native DnD behaviour if (isFallback && this.layer === 0) { Sortable.active._onTouchMove(touchEvt); // To move ghost if it is positioned absolutely } let scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0; let scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0; if (typeof(scrollCustomFn) === 'function') { if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt, autoScrolls[this.layer].el) !== 'continue') { return; } } scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY); }).bind({layer: layersOut}), 24); } } layersOut++; } while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false))); scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not }, 30); export default AutoScrollPlugin; ================================================ FILE: plugins/AutoScroll/README.md ================================================ ## AutoScroll This plugin allows for the page to automatically scroll during dragging near a scrollable element's edge on mobile devices and IE9 (or whenever fallback is enabled), and also enhances most browser's native drag-and-drop autoscrolling. Demo: - `window`: https://jsbin.com/dosilir/edit?js,output - `overflow: hidden`: https://jsbin.com/xecihez/edit?html,js,output **This plugin is a default plugin, and is included in the default UMD and ESM builds of Sortable** --- ### Mounting ```js import { Sortable, AutoScroll } from 'sortablejs'; Sortable.mount(new AutoScroll()); ``` --- ### Options ```js new Sortable(el, { scroll: true, // Enable the plugin. Can be HTMLElement. forceAutoScrollFallback: false, // force autoscroll plugin to enable even when native browser autoscroll is available scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling. scrollSpeed: 10, // px, speed of the scrolling bubbleScroll: true // apply autoscroll to all parent elements, allowing for easier movement }); ``` --- #### `scroll` option Enables the plugin. Defaults to `true`. May also be set to an HTMLElement which will be where autoscrolling is rooted. **Note: Just because this plugin is enabled does not mean that it will always be used for autoscrolling. Some browsers have native drag and drop autoscroll, in which case this autoscroll plugin won't be invoked. If you wish to have this always be invoked for autoscrolling, set the option `forceAutoScrollFallback` to `true`.** Demo: - `window`: https://jsbin.com/dosilir/edit?js,output - `overflow: hidden`: https://jsbin.com/xecihez/edit?html,js,output --- #### `forceAutoScrollFallback` option Enables sortable's autoscroll even when the browser can handle it (with native drag and drop). Defaults to `false`. This will not disable the native autoscrolling. Note that setting `forceFallback: true` in the sortable options will also enable this. --- #### `scrollFn` option Useful when you have custom scrollbar with dedicated scroll function. Defines a function that will be used for autoscrolling. Sortable uses el.scrollTop/el.scrollLeft by default. Set this option if you wish to handle it differently. This function should return `'continue'` if it wishes to allow Sortable's native autoscrolling, otherwise Sortable will not scroll anything if this option is set. **Note that this option will only work if Sortable's autoscroll function is invoked.** It is invoked if any of the following are true: - The `forceFallback: true` option is set - It is a mobile device - The browser is either Safari, Internet Explorer, or Edge --- #### `scrollSensitivity` option Defines how near the mouse must be to an edge to start scrolling. **Note that this option will only work if Sortable's autoscroll function is invoked.** It is invoked if any of the following are true: - The `forceFallback: true` option is set - It is a mobile device - The browser is either Safari, Internet Explorer, or Edge --- #### `scrollSpeed` option The speed at which the window should scroll once the mouse pointer gets within the `scrollSensitivity` distance. **Note that this option will only work if Sortable's autoscroll function is invoked.** It is invoked if any of the following are true: - The `forceFallback: true` option is set - It is a mobile device - The browser is either Safari, Internet Explorer, or Edge --- #### `bubbleScroll` option If set to `true`, the normal `autoscroll` function will also be applied to all parent elements of the element the user is dragging over. Demo: https://jsbin.com/kesewor/edit?html,js,output --- ================================================ FILE: plugins/AutoScroll/index.js ================================================ export { default } from './AutoScroll.js'; ================================================ FILE: plugins/MultiDrag/MultiDrag.js ================================================ import { toggleClass, getRect, index, closest, on, off, clone, css, setRect, unsetRect, matrix, expando } from '../../src/utils.js'; import dispatchEvent from '../../src/EventDispatcher.js'; let multiDragElements = [], multiDragClones = [], lastMultiDragSelect, // for selection with modifier key down (SHIFT) multiDragSortable, initialFolding = false, // Initial multi-drag fold when drag started folding = false, // Folding any other time dragStarted = false, dragEl, clonesFromRect, clonesHidden; function MultiDragPlugin() { function MultiDrag(sortable) { // Bind all private methods for (let fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } if (!sortable.options.avoidImplicitDeselect) { if (sortable.options.supportPointer) { on(document, 'pointerup', this._deselectMultiDrag); } else { on(document, 'mouseup', this._deselectMultiDrag); on(document, 'touchend', this._deselectMultiDrag); } } on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, avoidImplicitDeselect: false, setData(dataTransfer, dragEl) { let data = ''; if (multiDragElements.length && multiDragSortable === sortable) { multiDragElements.forEach((multiDragElement, i) => { data += (!i ? '' : ', ') + multiDragElement.textContent; }); } else { data = dragEl.textContent; } dataTransfer.setData('Text', data); } }; } MultiDrag.prototype = { multiDragKeyDown: false, isMultiDrag: false, delayStartGlobal({ dragEl: dragged }) { dragEl = dragged; }, delayEnded() { this.isMultiDrag = ~multiDragElements.indexOf(dragEl); }, setupClone({ sortable, cancel }) { if (!this.isMultiDrag) return; for (let i = 0; i < multiDragElements.length; i++) { multiDragClones.push(clone(multiDragElements[i])); multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; multiDragClones[i].draggable = false; multiDragClones[i].style['will-change'] = ''; toggleClass(multiDragClones[i], this.options.selectedClass, false); multiDragElements[i] === dragEl && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); cancel(); }, clone({ sortable, rootEl, dispatchSortableEvent, cancel }) { if (!this.isMultiDrag) return; if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); cancel(); } } }, showClone({ cloneNowShown, rootEl, cancel }) { if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(clone => { css(clone, 'display', ''); }); cloneNowShown(); clonesHidden = false; cancel(); }, hideClone({ sortable, cloneNowHidden, cancel }) { if (!this.isMultiDrag) return; multiDragClones.forEach(clone => { css(clone, 'display', 'none'); if (this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; cancel(); }, dragStartGlobal({ sortable }) { if (!this.isMultiDrag && multiDragSortable) { multiDragSortable.multiDrag._deselectMultiDrag(); } multiDragElements.forEach(multiDragElement => { multiDragElement.sortableIndex = index(multiDragElement); }); // Sort multi-drag elements multiDragElements = multiDragElements.sort(function(a, b) { return a.sortableIndex - b.sortableIndex; }); dragStarted = true; }, dragStarted({ sortable }) { if (!this.isMultiDrag) return; if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, // show multi drag elements, // animate to rects, // unset rects & remove from DOM sortable.captureAnimationState(); if (this.options.animation) { multiDragElements.forEach(multiDragElement => { if (multiDragElement === dragEl) return; css(multiDragElement, 'position', 'absolute'); }); let dragRect = getRect(dragEl, false, true, true); multiDragElements.forEach(multiDragElement => { if (multiDragElement === dragEl) return; setRect(multiDragElement, dragRect); }); folding = true; initialFolding = true; } } sortable.animateAll(() => { folding = false; initialFolding = false; if (this.options.animation) { multiDragElements.forEach(multiDragElement => { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled if (this.options.sort) { removeMultiDragElements(); } }); }, dragOver({ target, completed, cancel }) { if (folding && ~multiDragElements.indexOf(target)) { completed(false); cancel(); } }, revert({ fromSortable, rootEl, sortable, dragRect }) { if (multiDragElements.length > 1) { // Setup unfold animation multiDragElements.forEach(multiDragElement => { sortable.addAnimationState({ target: multiDragElement, rect: folding ? getRect(multiDragElement) : dragRect }); unsetRect(multiDragElement); multiDragElement.fromRect = dragRect; fromSortable.removeAnimationState(multiDragElement); }); folding = false; insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted({ sortable, isOwner, insertion, activeSortable, parentEl, putSortable }) { let options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } initialFolding = false; // If leaving sort:false root, or already folding - Fold to new location if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) { // Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible let dragRectAbsolute = getRect(dragEl, false, true, true); multiDragElements.forEach(multiDragElement => { if (multiDragElement === dragEl) return; setRect(multiDragElement, dragRectAbsolute); // Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted // while folding, and so that we can capture them again because old sortable will no longer be fromSortable parentEl.appendChild(multiDragElement); }); folding = true; } // Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out if (!isOwner) { // Only remove if not folding (folding will remove them anyways) if (!folding) { removeMultiDragElements(); } if (multiDragElements.length > 1) { let clonesHiddenBefore = clonesHidden; activeSortable._showClone(sortable); // Unfold animation for clones if showing from hidden if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) { multiDragClones.forEach(clone => { activeSortable.addAnimationState({ target: clone, rect: clonesFromRect }); clone.fromRect = clonesFromRect; clone.thisAnimationDuration = null; }); } } else { activeSortable._showClone(sortable); } } } }, dragOverAnimationCapture({ dragRect, isOwner, activeSortable }) { multiDragElements.forEach(multiDragElement => { multiDragElement.thisAnimationDuration = null; }); if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) { clonesFromRect = Object.assign({}, dragRect); let dragMatrix = matrix(dragEl, true); clonesFromRect.top -= dragMatrix.f; clonesFromRect.left -= dragMatrix.e; } }, dragOverAnimationComplete() { if (folding) { folding = false; removeMultiDragElements(); } }, drop({ originalEvent: evt, rootEl, parentEl, sortable, dispatchSortableEvent, oldIndex, putSortable }) { let toSortable = (putSortable || this.sortable); if (!evt) return; let options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { if (options.multiDragKey && !this.multiDragKeyDown) { this._deselectMultiDrag(); } toggleClass(dragEl, options.selectedClass, !~multiDragElements.indexOf(dragEl)); if (!~multiDragElements.indexOf(dragEl)) { multiDragElements.push(dragEl); dispatchEvent({ sortable, rootEl, name: 'select', targetEl: dragEl, originalEvent: evt }); // Modifier activated, select from last to dragEl if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { let lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) let n, i; if (currentIndex > lastIndex) { i = lastIndex; n = currentIndex; } else { i = currentIndex; n = lastIndex + 1; } const filter = options.filter; for (; i < n; i++) { if (~multiDragElements.indexOf(children[i])) continue; // Check if element is draggable if (!closest(children[i], options.draggable, parentEl, false)) continue; // Check if element is filtered const filtered = filter && (typeof filter === 'function' ? filter.call(sortable, evt, children[i], sortable) : filter.split(',').some((criteria) => { return closest(children[i], criteria.trim(), parentEl, false); })); if (filtered) continue; toggleClass(children[i], options.selectedClass, true); multiDragElements.push(children[i]); dispatchEvent({ sortable, rootEl, name: 'select', targetEl: children[i], originalEvent: evt }); } } } else { lastMultiDragSelect = dragEl; } multiDragSortable = toSortable; } else { multiDragElements.splice(multiDragElements.indexOf(dragEl), 1); lastMultiDragSelect = null; dispatchEvent({ sortable, rootEl, name: 'deselect', targetEl: dragEl, originalEvent: evt }); } } // Multi-drag drop if (dragStarted && this.isMultiDrag) { folding = false; // Do not "unfold" after around dragEl if reverted if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) { let dragRect = getRect(dragEl), multiDragIndex = index(dragEl, ':not(.' + this.options.selectedClass + ')'); if (!initialFolding && options.animation) dragEl.thisAnimationDuration = null; toSortable.captureAnimationState(); if (!initialFolding) { if (options.animation) { dragEl.fromRect = dragRect; multiDragElements.forEach(multiDragElement => { multiDragElement.thisAnimationDuration = null; if (multiDragElement !== dragEl) { let rect = folding ? getRect(multiDragElement) : dragRect; multiDragElement.fromRect = rect; // Prepare unfold animation toSortable.addAnimationState({ target: multiDragElement, rect: rect }); } }); } // Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert // properly they must all be removed removeMultiDragElements(); multiDragElements.forEach(multiDragElement => { if (children[multiDragIndex]) { parentEl.insertBefore(multiDragElement, children[multiDragIndex]); } else { parentEl.appendChild(multiDragElement); } multiDragIndex++; }); // If initial folding is done, the elements may have changed position because they are now // unfolding around dragEl, even though dragEl may not have his index changed, so update event // must be fired here as Sortable will not. if (oldIndex === index(dragEl)) { let update = false; multiDragElements.forEach(multiDragElement => { if (multiDragElement.sortableIndex !== index(multiDragElement)) { update = true; return; } }); if (update) { dispatchSortableEvent('update'); dispatchSortableEvent('sort'); } } } // Must be done after capturing individual rects (scroll bar) multiDragElements.forEach(multiDragElement => { unsetRect(multiDragElement); }); toSortable.animateAll(); } multiDragSortable = toSortable; } // Remove clones if necessary if (rootEl === parentEl || (putSortable && putSortable.lastPutMode !== 'clone')) { multiDragClones.forEach(clone => { clone.parentNode && clone.parentNode.removeChild(clone); }); } }, nullingGlobal() { this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); off(document, 'mouseup', this._deselectMultiDrag); off(document, 'touchend', this._deselectMultiDrag); off(document, 'keydown', this._checkKeyDown); off(document, 'keyup', this._checkKeyUp); }, _deselectMultiDrag(evt) { if (typeof dragStarted !== "undefined" && dragStarted) return; // Only deselect if selection is in this sortable if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { let el = multiDragElements[0]; toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, rootEl: this.sortable.el, name: 'deselect', targetEl: el, originalEvent: evt }); } }, _checkKeyDown(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp(evt) { if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } }; return Object.assign(MultiDrag, { // Static methods & properties pluginName: 'multiDrag', utils: { /** * Selects the provided multi-drag item * @param {HTMLElement} el The element to be selected */ select(el) { let sortable = el.parentNode[expando]; if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return; if (multiDragSortable && multiDragSortable !== sortable) { multiDragSortable.multiDrag._deselectMultiDrag(); multiDragSortable = sortable; } toggleClass(el, sortable.options.selectedClass, true); multiDragElements.push(el); }, /** * Deselects the provided multi-drag item * @param {HTMLElement} el The element to be deselected */ deselect(el) { let sortable = el.parentNode[expando], index = multiDragElements.indexOf(el); if (!sortable || !sortable.options.multiDrag || !~index) return; toggleClass(el, sortable.options.selectedClass, false); multiDragElements.splice(index, 1); } }, eventProperties() { const oldIndicies = [], newIndicies = []; multiDragElements.forEach(multiDragElement => { oldIndicies.push({ multiDragElement, index: multiDragElement.sortableIndex }); // multiDragElements will already be sorted if folding let newIndex; if (folding && multiDragElement !== dragEl) { newIndex = -1; } else if (folding) { newIndex = index(multiDragElement, ':not(.' + this.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } newIndicies.push({ multiDragElement, index: newIndex }); }); return { items: [...multiDragElements], clones: [...multiDragClones], oldIndicies, newIndicies }; }, optionListeners: { multiDragKey(key) { key = key.toLowerCase(); if (key === 'ctrl') { key = 'Control'; } else if (key.length > 1) { key = key.charAt(0).toUpperCase() + key.substr(1); } return key; } } }); } function insertMultiDragElements(clonesInserted, rootEl) { multiDragElements.forEach((multiDragElement, i) => { let target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(multiDragElement, target); } else { rootEl.appendChild(multiDragElement); } }); } /** * Insert multi-drag clones * @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted * @param {HTMLElement} rootEl */ function insertMultiDragClones(elementsInserted, rootEl) { multiDragClones.forEach((clone, i) => { let target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { rootEl.insertBefore(clone, target); } else { rootEl.appendChild(clone); } }); } function removeMultiDragElements() { multiDragElements.forEach(multiDragElement => { if (multiDragElement === dragEl) return; multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement); }); } export default MultiDragPlugin; ================================================ FILE: plugins/MultiDrag/README.md ================================================ ## MultiDrag Plugin This plugin allows users to select multiple items within a sortable at once, and drag them as one item. Once placed, the items will unfold into their original order, but all beside each other at the new position. [Read More](https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable) Demo: https://jsbin.com/wopavom/edit?js,output --- ### Mounting ```js import { Sortable, MultiDrag } from 'sortablejs'; Sortable.mount(new MultiDrag()); ``` --- ### Options ```js new Sortable(el, { multiDrag: true, // Enable the plugin selectedClass: "sortable-selected", // Class name for selected item multiDragKey: null, // Key that must be down for items to be selected avoidImplicitDeselect: false, // true - if you don't want to deselect items on outside click // Called when an item is selected onSelect: function(/**Event*/evt) { evt.item // The selected item }, // Called when an item is deselected onDeselect: function(/**Event*/evt) { evt.item // The deselected item } }); ``` --- #### `multiDragKey` option The key that must be down for multiple items to be selected. The default is `null`, meaning no key must be down. For special keys, such as the CTRL key, simply specify the option as `'CTRL'` (casing does not matter). --- #### `selectedClass` option Class name for the selected item(s) if multiDrag is enabled. Defaults to `sortable-selected`. ```css .selected { background-color: #f9c7c8; border: solid red 1px; } ``` ```js Sortable.create(list, { multiDrag: true, selectedClass: "selected" }); ``` --- ### Event Properties - items:`HTMLElement[]` — Array of selected items, or empty - clones:`HTMLElement[]` — Array of clones, or empty - oldIndicies:`Index[]` — Array containing information on the old indicies of the selected elements. - newIndicies:`Index[]` — Array containing information on the new indicies of the selected elements. #### Index Object - element:`HTMLElement` — The element whose index is being given - index:`Number` — The index of the element #### Note on `newIndicies` For any event that is fired during sorting, the index of any selected element that is not the main dragged element is given as `-1`. This is because it has either been removed from the DOM, or because it is in a folding animation (folding to the dragged element) and will be removed after this animation is complete. --- ### Sortable.utils * select(el:`HTMLElement`) — select the given multi-drag item * deselect(el:`HTMLElement`) — deselect the given multi-drag item ================================================ FILE: plugins/MultiDrag/index.js ================================================ export { default } from './MultiDrag.js'; ================================================ FILE: plugins/OnSpill/OnSpill.js ================================================ import { getChild } from '../../src/utils.js'; const drop = function({ originalEvent, putSortable, dragEl, activeSortable, dispatchSortableEvent, hideGhostForTarget, unhideGhostForTarget }) { if (!originalEvent) return; let toSortable = putSortable || activeSortable; hideGhostForTarget(); let touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; let target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); this.onSpill({ dragEl, putSortable }); } }; function Revert() {} Revert.prototype = { startIndex: null, dragStart({ oldDraggableIndex }) { this.startIndex = oldDraggableIndex; }, onSpill({ dragEl, putSortable }) { this.sortable.captureAnimationState(); if (putSortable) { putSortable.captureAnimationState(); } let nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); } else { this.sortable.el.appendChild(dragEl); } this.sortable.animateAll(); if (putSortable) { putSortable.animateAll(); } }, drop }; Object.assign(Revert, { pluginName: 'revertOnSpill' }); function Remove() {} Remove.prototype = { onSpill({ dragEl, putSortable }) { const parentSortable = putSortable || this.sortable; parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); parentSortable.animateAll(); }, drop }; Object.assign(Remove, { pluginName: 'removeOnSpill' }); export default [Remove, Revert]; export { Remove as RemoveOnSpill, Revert as RevertOnSpill }; ================================================ FILE: plugins/OnSpill/README.md ================================================ # OnSpill Plugins This file contains two seperate plugins, RemoveOnSpill and RevertOnSpill. They can be imported individually, or the default export (an array of both plugins) can be passed to `Sortable.mount` as well. **These plugins are default plugins, and are included in the default UMD and ESM builds of Sortable** --- ### Mounting ```js import { Sortable, OnSpill } from 'sortablejs/modular/sortable.core.esm'; Sortable.mount(OnSpill); ``` --- ## RevertOnSpill Plugin This plugin, when enabled, will cause the dragged item to be reverted to it's original position if it is spilled (ie. it is dropped outside of a valid Sortable drop target) ### Options ```js new Sortable(el, { revertOnSpill: true, // Enable plugin // Called when item is spilled onSpill: function(/**Event*/evt) { evt.item // The spilled item } }); ``` --- ## RemoveOnSpill Plugin This plugin, when enabled, will cause the dragged item to be removed from the DOM if it is spilled (ie. it is dropped outside of a valid Sortable drop target) --- ### Options ```js new Sortable(el, { removeOnSpill: true, // Enable plugin // Called when item is spilled onSpill: function(/**Event*/evt) { evt.item // The spilled item } }); ``` ================================================ FILE: plugins/OnSpill/index.js ================================================ export { default, RemoveOnSpill, RevertOnSpill } from './OnSpill.js'; ================================================ FILE: plugins/README.md ================================================ # Creating Sortable Plugins Sortable plugins are plugins that can be directly mounted to the Sortable class. They are a powerful way of modifying the default behaviour of Sortable beyond what simply using events alone allows. To mount your plugin to Sortable, it must pass a constructor function to the `Sortable.mount` function. This constructor function will be called (with the `new` keyword in front of it) whenever a Sortable instance with your plugin enabled is initialized. The constructor function will be called with the parameters `sortable` and `el`, which is the HTMLElement that the Sortable is being initialized on. This means that there will be a new instance of your plugin each time it is enabled in a Sortable. ## Constructor Parameters `sortable: Sortable` — The sortable that the plugin is being initialized on `el: HTMLElement` — The element that the sortable is being initialized on `options: Object` — The options object that the user has passed into Sortable (not merged with defaults yet) ## Static Properties The constructor function passed to `Sortable.mount` may contain several static properties and methods. The following static properties may be defined: `pluginName: String` (Required) The name of the option that the user will use in their sortable's options to enable the plugin. Should start with a lower case and be camel-cased. For example: `'multiDrag'`. This is also the property name that the plugin's instance will be under in a sortable instance (ex. `sortableInstance.multiDrag`). `utils: Object` Object containing functions that will be added to the `Sortable.utils` static object on the Sortable class. `eventOptions(eventName: String): Function` A function that is called whenever Sortable fires an event. This function should return an object to be combined with the event object that Sortable will emit. The function will be called in the context of the instance of the plugin on the Sortable that is firing the event (ie. the `this` keyword will be the plugin instance). `initializeByDefault: Boolean` Determines whether or not the plugin will always be initialized on every new Sortable instance. If this option is enabled, it does not mean that by default the plugin will be enabled on the Sortable - this must still be done in the options via the plugin's `pluginName`, or it can be enabled by default if your plugin specifies it's pluginName as a default option that is truthy. Since the plugin will already be initialized on every Sortable instance, it can also be enabled dynamically via `sortableInstance.option('pluginName', true)`. It is a good idea to have this option set to `false` if the plugin modifies the behaviour of Sortable in such a way that enabling or disabling the plugin dynamically could cause it to break. Likewise, this option should be disabled if the plugin should only be instantiated on Sortables in which that plugin is enabled. This option defaults to `true`. `optionListeners: Object` An object that may contain event listeners that are fired when a specific option is updated. These listeners are useful because the user's provided options are not necessarily unchanging once the plugin is initialized, and could be changed dynamically via the `option()` method. The listener will be fired in the context of the instance of the plugin that it is being changed in (ie. the `this` keyword will be the instance of your plugin). The name of the method should match the name of the option it listens for. The new value of the option will be passed in as an argument, and any returned value will be what the option is stored as. If no value is returned, the option will be stored as the value the user provided. Example: ```js Plugin.name = 'generateTitle'; Plugin.optionListeners = { // Listen for option 'generateTitle' generateTitle: function(title) { // Store the option in all caps return title.toUpperCase(); // OR save it to this instance of your plugin as a private field. // This way it can be accessed in events, but will not modify the user's options. this.titleAllCaps = title.toUpperCase(); } }; ``` ## Plugin Options Plugins may have custom default options or may override the defaults of other options. In order to do this, there must be a `defaults` object on the initialized plugin. This can be set in the plugin's prototype, or during the initialization of the plugin (when the `el` is available). For example: ```js function myPlugin(sortable, el, options) { this.defaults = { color: el.style.backgroundColor }; } Sortable.mount(myPlugin); ``` ## Plugin Events ### Context The events will be fired in the context of their own parent object (ie. context is not changed), however the plugin instance's Sortable instance is available under `this.sortable`. Likewise, the options are available under `this.options`. ### Event List The following table contains details on the events that a plugin may handle in the prototype of the plugin's constructor function. | Event Name | Description | Cancelable? | Cancel Behaviour | Event Type | Custom Event Object Properties | |---------------------------|------------------------------------------------------------------------------------------------------------------|-------------|----------------------------------------------------|------------|-------------------------------------------------------------------------| | filter | Fired when the element is filtered, and dragging is therefore canceled | No | - | Normal | None | | delayStart | Fired when the delay starts, even if there is no delay | Yes | Cancels sorting | Normal | None | | delayEnded | Fired when the delay ends, even if there is no delay | Yes | Cancels sorting | Normal | None | | setupClone | Fired when Sortable clones the dragged element | Yes | Cancels normal clone setup | Normal | None | | dragStart | Fired when the dragging is first started | Yes | Cancels sorting | Normal | None | | clone | Fired when the clone is inserted into the DOM (if `removeCloneOnHide: false`). Tick after dragStart. | Yes | Cancels normal clone insertion & hiding | Normal | None | | dragStarted | Fired tick after dragStart | No | - | Normal | None | | dragOver | Fired when the user drags over a sortable | Yes | Cancels normal dragover behaviour | DragOver | None | | dragOverValid | Fired when the user drags over a sortable that the dragged item can be inserted into | Yes | Cancels normal valid dragover behaviour | DragOver | None | | revert | Fired when the dragged item is reverted to it's original position when entering it's `sort:false` root | Yes | Cancels normal reverting, but is still completed() | DragOver | None | | dragOverCompleted | Fired when dragOver is completed (ie. bubbling is disabled). To check if inserted, use `inserted` even property. | No | - | DragOver | `insertion: Boolean` — Whether or not the dragged element was inserted | | dragOverAnimationCapture | Fired right before the animation state is captured in dragOver | No | - | DragOver | None | | dragOverAnimationComplete | Fired after the animation is completed after a dragOver insertion | No | - | DragOver | None | | drop | Fired on drop | Yes | Cancels normal drop behavior | Normal | None | | nulling | Fired when the plugin should preform cleanups, once all drop events have fired | No | - | Normal | None | | destroy | Fired when Sortable is destroyed | No | - | Normal | None | ### Global Events Normally, an event will only be fired in a plugin if the plugin is enabled on the Sortable from which the event is being fired. However, it sometimes may be desirable for a plugin to listen in on an event from Sortables in which it is not enabled on. This is possible with global events. For an event to be global, simply add the suffix 'Global' to the event's name (casing matters) (eg. `dragStartGlobal`). Please note that your plugin must be initialized on any Sortable from which it expects to recieve events, and that includes global events. In other words, you will want to keep the `initializeByDefault` option as it's default `true` value if your plugin needs to recieve events from Sortables it is not enabled on. Please also note that if both normal and global event handlers are set, the global event handler will always be fired before the regular one. ### Event Object An object with the following properties is passed as an argument to each plugin event when it is fired. #### Properties: `dragEl: HTMLElement` — The element being dragged `parentEl: HTMLElement` — The element that the dragged element is currently in `ghostEl: HTMLElement|undefined` — If using fallback, the element dragged under the cursor (undefined until after `dragStarted` plugin event) `rootEl: HTMLElement` — The element that the dragged element originated from `nextEl: HTMLElement` — The original next sibling of dragEl `cloneEl: HTMLElement|undefined` — The clone element (undefined until after `setupClone` plugin event) `cloneHidden: Boolean` — Whether or not the clone is hidden `dragStarted: Boolean` — Boolean indicating whether or not the dragStart event has fired `putSortable: Sortable|undefined` — The element that dragEl is dragged into from it's root, otherwise undefined `activeSortable: Sortable` — The active Sortable instance `originalEvent: Event` — The original HTML event corresponding to the Sortable event `oldIndex: Number` — The old index of dragEl `oldDraggableIndex: Number` — The old index of dragEl, only counting draggable elements `newIndex: Number` — The new index of dragEl `newDraggableIndex: Number` — The new index of dragEl, only counting draggable elements #### Methods: `cloneNowHidden()` — Function to be called if the plugin has hidden the clone `cloneNowShown()` — Function to be called if the plugin has shown the clone `hideGhostForTarget()` — Hides the fallback ghost element if CSS pointer-events are not available. Call this before using document.elementFromPoint at the mouse position. `unhideGhostForTarget()` — Unhides the ghost element. To be called after `hideGhostForTarget()`. `dispatchSortableEvent(eventName: String)` — Function that can be used to emit an event on the current sortable while sorting, with all usual event properties set (eg. indexes, rootEl, cloneEl, originalEvent, etc.). ### DragOverEvent Object This event is passed to dragover events, and extends the normal event object. #### Properties: `isOwner: Boolean` — Whether or not the dragged over sortable currently contains the dragged element `axis: String` — Direction of the dragged over sortable, `'vertical'` or `'horizontal'` `revert: Boolean` — Whether or not the dragged element is being reverted to it's original position from another position `dragRect: DOMRect` — DOMRect of the dragged element `targetRect: DOMRect` — DOMRect of the target element `canSort: Boolean` — Whether or not sorting is enabled in the dragged over sortable `fromSortable: Sortable` — The sortable that the dragged element is coming from `target: HTMLElement` — The sortable item that is being dragged over #### Methods: `onMove(target: HTMLElement, after: Boolean): Boolean|Number` — Calls the `onMove` function the user specified in the options `changed()` — Fires the `onChange` event with event properties preconfigured `completed(insertion: Boolean)` — Should be called when dragover has "completed", meaning bubbling should be stopped. If `insertion` is `true`, Sortable will treat it as if the dragged element was inserted into the sortable, and hide/show clone, set ghost class, animate, etc. ================================================ FILE: plugins/Swap/README.md ================================================ ## Swap Plugin This plugin modifies the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted. Once dragging starts, the user can drag over other items and there will be no change in the elements. However, the item that the user drops on will be swapped with the originally dragged item. Demo: https://jsbin.com/yejehog/edit?html,js,output --- ### Mounting ```js import { Sortable, Swap } from 'sortablejs/modular/sortable.core.esm'; Sortable.mount(new Swap()); ``` --- ### Options ```js new Sortable(el, { swap: true, // Enable swap mode swapClass: "sortable-swap-highlight" // Class name for swap item (if swap mode is enabled) }); ``` --- #### `swapClass` option Class name for the item to be swapped with, if swap mode is enabled. Defaults to `sortable-swap-highlight`. ```css .highlighted { background-color: #9AB6F1; } ``` ```js Sortable.create(list, { swap: true, swapClass: "highlighted" }); ``` --- ### Event Properties - swapItem:`HTMLElement|undefined` — The element that the dragged element was swapped with ================================================ FILE: plugins/Swap/Swap.js ================================================ import { toggleClass, index } from '../../src/utils.js'; let lastSwapEl; function SwapPlugin() { function Swap() { this.defaults = { swapClass: 'sortable-swap-highlight' }; } Swap.prototype = { dragStart({ dragEl }) { lastSwapEl = dragEl; }, dragOverValid({ completed, target, onMove, activeSortable, changed, cancel }) { if (!activeSortable.options.swap) return; let el = this.sortable.el, options = this.options; if (target && target !== el) { let prevSwapEl = lastSwapEl; if (onMove(target) !== false) { toggleClass(target, options.swapClass, true); lastSwapEl = target; } else { lastSwapEl = null; } if (prevSwapEl && prevSwapEl !== lastSwapEl) { toggleClass(prevSwapEl, options.swapClass, false); } } changed(); completed(true); cancel(); }, drop({ activeSortable, putSortable, dragEl }) { let toSortable = (putSortable || this.sortable); let options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { if (dragEl !== lastSwapEl) { toSortable.captureAnimationState(); if (toSortable !== activeSortable) activeSortable.captureAnimationState(); swapNodes(dragEl, lastSwapEl); toSortable.animateAll(); if (toSortable !== activeSortable) activeSortable.animateAll(); } } }, nulling() { lastSwapEl = null; } }; return Object.assign(Swap, { pluginName: 'swap', eventProperties() { return { swapItem: lastSwapEl }; } }); } function swapNodes(n1, n2) { let p1 = n1.parentNode, p2 = n2.parentNode, i1, i2; if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; i1 = index(n1); i2 = index(n2); if (p1.isEqualNode(p2) && i1 < i2) { i2++; } p1.insertBefore(n2, p1.children[i1]); p2.insertBefore(n1, p2.children[i2]); } export default SwapPlugin; ================================================ FILE: plugins/Swap/index.js ================================================ export { default } from './Swap.js'; ================================================ FILE: scripts/banner.js ================================================ import { version } from '../package.json'; export default `/**! * Sortable ${ version } * @author RubaXa * @author owenm * @license MIT */`; ================================================ FILE: scripts/build.js ================================================ import babel from 'rollup-plugin-babel'; import json from 'rollup-plugin-json'; import resolve from 'rollup-plugin-node-resolve'; import banner from './banner.js'; export default { output: { banner, name: 'Sortable' }, plugins: [ json(), babel(), resolve() ] }; ================================================ FILE: scripts/esm-build.js ================================================ import build from './build.js'; export default ([ { input: 'entry/entry-core.js', output: Object.assign({}, build.output, { file: 'modular/sortable.core.esm.js', format: 'esm' }) }, { input: 'entry/entry-defaults.js', output: Object.assign({}, build.output, { file: 'modular/sortable.esm.js', format: 'esm' }) }, { input: 'entry/entry-complete.js', output: Object.assign({}, build.output, { file: 'modular/sortable.complete.esm.js', format: 'esm' }) } ]).map(config => { let buildCopy = { ...build }; return Object.assign(buildCopy, config); }); ================================================ FILE: scripts/minify.js ================================================ const UglifyJS = require('uglify-js'), fs = require('fs'), package = require('../package.json'); const banner = `/*! Sortable ${ package.version } - ${ package.license } | ${ package.repository.url } */\n`; fs.writeFileSync( `./Sortable.min.js`, banner + UglifyJS.minify(fs.readFileSync(`./Sortable.js`, 'utf8')).code, 'utf8' ); ================================================ FILE: scripts/test-compat.js ================================================ const createTestCafe = require('testcafe'); // Testcafe cannot test on IE < 11 // Testcafe testing on Chrome Android is currently broken (https://github.com/DevExpress/testcafe/issues/3948) const browsers = [ 'saucelabs:Internet Explorer@11.285:Windows 10', 'saucelabs:MicrosoftEdge@16.16299:Windows 10', 'saucelabs:iPhone XS Simulator@12.2', 'saucelabs:Safari@12.0:macOS 10.14', 'chrome:headless', 'firefox:headless' ]; let testcafe; let runner; let failedCount; createTestCafe(null, 8000, 8001).then((tc) => { testcafe = tc; runner = tc.createRunner(); return runner .src('./tests/Sortable.compat.test.js') .browsers(browsers) .run(); }).then((actualFailedCount) => { // https://testcafe-discuss.devexpress.com/t/why-circleci-marked-build-as-green-even-if-this-build-contain-failed-test/726/2 failedCount = actualFailedCount; return testcafe.close(); }).then(() => process.exit(failedCount)); ================================================ FILE: scripts/test.js ================================================ const createTestCafe = require('testcafe'); let testcafe; let runner; let failedCount; createTestCafe().then((tc) => { testcafe = tc; runner = tc.createRunner(); return runner .src('./tests/Sortable.test.js') .browsers('chrome:headless') .concurrency(3) .run(); }).then((actualFailedCount) => { failedCount = actualFailedCount; console.log('FAILED COUNT', actualFailedCount) return testcafe.close(); }).then(() => process.exit(failedCount)); ================================================ FILE: scripts/umd-build.js ================================================ import build from './build.js'; export default ([ { input: 'entry/entry-complete.js', output: Object.assign({}, build.output, { file: './Sortable.js', format: 'umd' }) } ]).map(config => { let buildCopy = { ...build }; return Object.assign(buildCopy, config); }); ================================================ FILE: src/Animation.js ================================================ import { getRect, css, matrix, isRectEqual, indexOfObject } from './utils.js'; import Sortable from './Sortable.js'; export default function AnimationStateManager() { let animationStates = [], animationCallbackId; return { captureAnimationState() { animationStates = []; if (!this.options.animation) return; let children = [].slice.call(this.el.children); children.forEach(child => { if (css(child, 'display') === 'none' || child === Sortable.ghost) return; animationStates.push({ target: child, rect: getRect(child) }); let fromRect = { ...animationStates[animationStates.length - 1].rect }; // If animating: compensate for current animation if (child.thisAnimationDuration) { let childMatrix = matrix(child, true); if (childMatrix) { fromRect.top -= childMatrix.f; fromRect.left -= childMatrix.e; } } child.fromRect = fromRect; }); }, addAnimationState(state) { animationStates.push(state); }, removeAnimationState(target) { animationStates.splice(indexOfObject(animationStates, { target }), 1); }, animateAll(callback) { if (!this.options.animation) { clearTimeout(animationCallbackId); if (typeof(callback) === 'function') callback(); return; } let animating = false, animationTime = 0; animationStates.forEach((state) => { let time = 0, animatingThis = false, target = state.target, fromRect = target.fromRect, toRect = getRect(target), prevFromRect = target.prevFromRect, prevToRect = target.prevToRect, animatingRect = state.rect, targetMatrix = matrix(target, true); if (targetMatrix) { // Compensate for current animation toRect.top -= targetMatrix.f; toRect.left -= targetMatrix.e; } target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect if ( isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) && // Make sure animatingRect is on line between toRect & fromRect (animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left) ) { // If returning to same place as started from animation and on same axis time = calculateRealTime(animatingRect, prevFromRect, prevToRect, this.options); } } // if fromRect != toRect: animate if (!isRectEqual(toRect, fromRect)) { target.prevFromRect = fromRect; target.prevToRect = toRect; if (!time) { time = this.options.animation; } this.animate( target, animatingRect, toRect, time ); } if (time) { animating = true; animationTime = Math.max(animationTime, time); clearTimeout(target.animationResetTimer); target.animationResetTimer = setTimeout(function() { target.animationTime = 0; target.prevFromRect = null; target.fromRect = null; target.prevToRect = null; target.thisAnimationDuration = null; }, time); target.thisAnimationDuration = time; } }); clearTimeout(animationCallbackId); if (!animating) { if (typeof(callback) === 'function') callback(); } else { animationCallbackId = setTimeout(function() { if (typeof(callback) === 'function') callback(); }, animationTime); } animationStates = []; }, animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); let elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, translateX = (currentRect.left - toRect.left) / (scaleX || 1), translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); this.forRepaintDummy = repaint(target); // repaint css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : '')); css(target, 'transform', 'translate3d(0,0,0)'); (typeof target.animated === 'number') && clearTimeout(target.animated); target.animated = setTimeout(function () { css(target, 'transition', ''); css(target, 'transform', ''); target.animated = false; target.animatingX = false; target.animatingY = false; }, duration); } } }; } function repaint(target) { return target.offsetWidth; } function calculateRealTime(animatingRect, fromRect, toRect, options) { return ( Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) ) * options.animation; } ================================================ FILE: src/BrowserInfo.js ================================================ function userAgent(pattern) { if (typeof window !== 'undefined' && window.navigator) { return !!/*@__PURE__*/navigator.userAgent.match(pattern); } } export const IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i); export const Edge = userAgent(/Edge/i); export const FireFox = userAgent(/firefox/i); export const Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i); export const IOS = userAgent(/iP(ad|od|hone)/i); export const ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i); ================================================ FILE: src/EventDispatcher.js ================================================ import { IE11OrLess, Edge } from './BrowserInfo.js'; import { expando } from './utils.js'; import PluginManager from './PluginManager.js'; export default function dispatchEvent( { sortable, rootEl, name, targetEl, cloneEl, toEl, fromEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, originalEvent, putSortable, extraEventProperties } ) { sortable = (sortable || (rootEl && rootEl[expando])); if (!sortable) return; let evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent(name, { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent(name, true, true); } evt.to = toEl || rootEl; evt.from = fromEl || rootEl; evt.item = targetEl || rootEl; evt.clone = cloneEl; evt.oldIndex = oldIndex; evt.newIndex = newIndex; evt.oldDraggableIndex = oldDraggableIndex; evt.newDraggableIndex = newDraggableIndex; evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; let allEventProperties = { ...extraEventProperties, ...PluginManager.getEventProperties(name, sortable) }; for (let option in allEventProperties) { evt[option] = allEventProperties[option]; } if (rootEl) { rootEl.dispatchEvent(evt); } if (options[onName]) { options[onName].call(sortable, evt); } } ================================================ FILE: src/PluginManager.js ================================================ let plugins = []; const defaults = { initializeByDefault: true }; export default { mount(plugin) { // Set default static properties for (let option in defaults) { if (defaults.hasOwnProperty(option) && !(option in plugin)) { plugin[option] = defaults[option]; } } plugins.forEach(p => { if (p.pluginName === plugin.pluginName) { throw (`Sortable: Cannot mount plugin ${ plugin.pluginName } more than once`); } }); plugins.push(plugin); }, pluginEvent(eventName, sortable, evt) { this.eventCanceled = false; evt.cancel = () => { this.eventCanceled = true; }; const eventNameGlobal = eventName + 'Global'; plugins.forEach(plugin => { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if ( sortable[plugin.pluginName][eventNameGlobal] ) { sortable[plugin.pluginName][eventNameGlobal]({ sortable, ...evt }); } // Only fire plugin event if plugin is enabled in this sortable, // and plugin has event defined if ( sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName] ) { sortable[plugin.pluginName][eventName]({ sortable, ...evt }); } }); }, initializePlugins(sortable, el, defaults, options) { plugins.forEach(plugin => { const pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; let initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin Object.assign(defaults, initialized.defaults); }); for (let option in sortable.options) { if (!sortable.options.hasOwnProperty(option)) continue; let modified = this.modifyOption(sortable, option, sortable.options[option]); if (typeof(modified) !== 'undefined') { sortable.options[option] = modified; } } }, getEventProperties(name, sortable) { let eventProperties = {}; plugins.forEach(plugin => { if (typeof(plugin.eventProperties) !== 'function') return; Object.assign(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); return eventProperties; }, modifyOption(sortable, name, value) { let modifiedValue; plugins.forEach(plugin => { // Plugin must exist on the Sortable if (!sortable[plugin.pluginName]) return; // If static option listener exists for this option, call in the context of the Sortable's instance of this plugin if (plugin.optionListeners && typeof(plugin.optionListeners[name]) === 'function') { modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value); } }); return modifiedValue; } }; ================================================ FILE: src/Sortable.js ================================================ /**! * Sortable * @author RubaXa * @author owenm * @license MIT */ import { version } from '../package.json'; import { IE11OrLess, Edge, FireFox, Safari, IOS, ChromeForAndroid } from './BrowserInfo.js'; import AnimationStateManager from './Animation.js'; import PluginManager from './PluginManager.js'; import dispatchEvent from './EventDispatcher.js'; import { on, off, closest, toggleClass, css, matrix, find, getWindowScrollingElement, getRect, isScrolledPast, getChild, lastChild, index, getRelativeScrollOffset, extend, throttle, scrollBy, clone, expando, getChildContainingRectFromElement, getParentOrHost } from './utils.js'; let pluginEvent = function(eventName, sortable, { evt: originalEvent, ...data } = {}) { PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, { dragEl, parentEl, ghostEl, rootEl, nextEl, lastDownEl, cloneEl, cloneHidden, dragStarted: moved, putSortable, activeSortable: Sortable.active, originalEvent, oldIndex, oldDraggableIndex, newIndex, newDraggableIndex, hideGhostForTarget: _hideGhostForTarget, unhideGhostForTarget: _unhideGhostForTarget, cloneNowHidden() { cloneHidden = true; }, cloneNowShown() { cloneHidden = false; }, dispatchSortableEvent(name) { _dispatchEvent({ sortable, name, originalEvent }); }, ...data }); }; function _dispatchEvent(info) { dispatchEvent({ putSortable, cloneEl, targetEl: dragEl, rootEl, oldIndex, oldDraggableIndex, newIndex, newDraggableIndex, ...info }); } let dragEl, parentEl, ghostEl, rootEl, nextEl, lastDownEl, cloneEl, cloneHidden, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, activeGroup, putSortable, awaitingDragStarted = false, ignoreNextClick = false, sortables = [], tapEvt, touchEvt, lastDx, lastDy, tapDistanceLeft, tapDistanceTop, moved, lastTarget, lastDirection, pastFirstInvertThresh = false, isCircumstantialInvert = false, targetMoveDistance, // For positioning ghost absolutely ghostRelativeParent, ghostRelativeParentInitialScroll = [], // (left, top) _silent = false, savedInputChecked = []; /** @const */ const documentExists = typeof document !== 'undefined', PositionGhostAbsolutely = IOS, CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float', // This will not pass for IE9, because IE9 DnD only works on anchors supportDraggable = documentExists && !ChromeForAndroid && !IOS && ('draggable' in document.createElement('div')), supportCssPointerEvents = (function() { if (!documentExists) return; // false when <= IE11 if (IE11OrLess) { return false; } let el = document.createElement('x'); el.style.cssText = 'pointer-events:auto'; return el.style.pointerEvents === 'auto'; })(), _detectDirection = function(el, options) { let elCSS = css(el), elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth), child1 = getChild(el, 0, options), child2 = getChild(el, 1, options), firstChildCSS = child1 && css(child1), secondChildCSS = child2 && css(child2), firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width, secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width; if (elCSS.display === 'flex') { return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal'; } if (elCSS.display === 'grid') { return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } if (child1 && firstChildCSS.float && firstChildCSS.float !== 'none') { let touchingSideChild2 = firstChildCSS.float === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } return (child1 && ( firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth ) ? 'vertical' : 'horizontal' ); }, _dragElInRowColumn = function(dragRect, targetRect, vertical) { let dragElS1Opp = vertical ? dragRect.left : dragRect.top, dragElS2Opp = vertical ? dragRect.right : dragRect.bottom, dragElOppLength = vertical ? dragRect.width : dragRect.height, targetS1Opp = vertical ? targetRect.left : targetRect.top, targetS2Opp = vertical ? targetRect.right : targetRect.bottom, targetOppLength = vertical ? targetRect.width : targetRect.height; return ( dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || (dragElS1Opp + dragElOppLength / 2) === (targetS1Opp + targetOppLength / 2) ); }, /** * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold. * @param {Number} x X position * @param {Number} y Y position * @return {HTMLElement} Element of the first found nearest Sortable */ _detectNearestEmptySortable = function(x, y) { let ret; sortables.some((sortable) => { const threshold = sortable[expando].options.emptyInsertThreshold; if (!threshold || lastChild(sortable)) return; const rect = getRect(sortable), insideHorizontally = x >= (rect.left - threshold) && x <= (rect.right + threshold), insideVertically = y >= (rect.top - threshold) && y <= (rect.bottom + threshold); if (insideHorizontally && insideVertically) { return (ret = sortable); } }); return ret; }, _prepareGroup = function (options) { function toFn(value, pull) { return function(to, from, dragEl, evt) { let sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name; if (value == null && (pull || sameGroup)) { // Default pull value // Default pull and put value if same group return true; } else if (value == null || value === false) { return false; } else if (pull && value === 'clone') { return value; } else if (typeof value === 'function') { return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt); } else { let otherGroup = (pull ? to : from).options.group.name; return (value === true || (typeof value === 'string' && value === otherGroup) || (value.join && value.indexOf(otherGroup) > -1)); } }; } let group = {}; let originalGroup = options.group; if (!originalGroup || typeof originalGroup != 'object') { originalGroup = {name: originalGroup}; } group.name = originalGroup.name; group.checkPull = toFn(originalGroup.pull, true); group.checkPut = toFn(originalGroup.put); group.revertClone = originalGroup.revertClone; options.group = group; }, _hideGhostForTarget = function() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', 'none'); } }, _unhideGhostForTarget = function() { if (!supportCssPointerEvents && ghostEl) { css(ghostEl, 'display', ''); } }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position if (documentExists && !ChromeForAndroid) { document.addEventListener('click', function(evt) { if (ignoreNextClick) { evt.preventDefault(); evt.stopPropagation && evt.stopPropagation(); evt.stopImmediatePropagation && evt.stopImmediatePropagation(); ignoreNextClick = false; return false; } }, true); } let nearestEmptyInsertDetectEvent = function(evt) { if (dragEl) { evt = evt.touches ? evt.touches[0] : evt; let nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY); if (nearest) { // Create imitation event let event = {}; for (let i in evt) { if (evt.hasOwnProperty(i)) { event[i] = evt[i]; } } event.target = event.rootEl = nearest; event.preventDefault = void 0; event.stopPropagation = void 0; nearest[expando]._onDragOver(event); } } }; let _checkOutsideTargetEl = function(evt) { if (dragEl) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); } }; /** * @class Sortable * @param {HTMLElement} el * @param {Object} [options] */ function Sortable(el, options) { if (!(el && el.nodeType && el.nodeType === 1)) { throw `Sortable: \`el\` must be an HTMLElement, not ${ {}.toString.call(el) }`; } this.el = el; // root element this.options = options = Object.assign({}, options); // Export instance el[expando] = this; let defaults = { group: null, sort: true, disabled: false, store: null, handle: null, draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*', swapThreshold: 1, // percentage; 0 <= x <= 1 invertSwap: false, // invert always invertedSwapThreshold: null, // will be set to same as swapThreshold if default removeCloneOnHide: true, direction: function() { return _detectDirection(el, this.options); }, ghostClass: 'sortable-ghost', chosenClass: 'sortable-chosen', dragClass: 'sortable-drag', ignore: 'a, img', filter: null, preventOnFilter: true, animation: 0, easing: null, setData: function (dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent); }, dropBubble: false, dragoverBubble: false, dataIdAttr: 'data-id', delay: 0, delayOnTouchOnly: false, touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1, forceFallback: false, fallbackClass: 'sortable-fallback', fallbackOnBody: false, fallbackTolerance: 0, fallbackOffset: {x: 0, y: 0}, // Disabled on Safari: #1571; Enabled on Safari IOS: #2244 supportPointer: Sortable.supportPointer !== false && ('PointerEvent' in window) && (!Safari || IOS), emptyInsertThreshold: 5 }; PluginManager.initializePlugins(this, el, defaults); // Set default options for (let name in defaults) { !(name in options) && (options[name] = defaults[name]); } _prepareGroup(options); // Bind all private methods for (let fn in this) { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { this[fn] = this[fn].bind(this); } } // Setup drag mode this.nativeDraggable = options.forceFallback ? false : supportDraggable; if (this.nativeDraggable) { // Touch start threshold cannot be greater than the native dragstart threshold this.options.touchStartThreshold = 1; } // Bind events if (options.supportPointer) { on(el, 'pointerdown', this._onTapStart); } else { on(el, 'mousedown', this._onTapStart); on(el, 'touchstart', this._onTapStart); } if (this.nativeDraggable) { on(el, 'dragover', this); on(el, 'dragenter', this); } sortables.push(this.el); // Restore sorting options.store && options.store.get && this.sort(options.store.get(this) || []); // Add animation state manager Object.assign(this, AnimationStateManager()); } Sortable.prototype = /** @lends Sortable.prototype */ { constructor: Sortable, _isOutsideThisEl: function(target) { if (!this.el.contains(target) && target !== this.el) { lastTarget = null; } }, _getDirection: function(evt, target) { return (typeof this.options.direction === 'function') ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction; }, _onTapStart: function (/** Event|TouchEvent */evt) { if (!evt.cancelable) return; let _this = this, el = this.el, options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt), target = (touch || evt).target, originalTarget = evt.target.shadowRoot && ((evt.path && evt.path[0]) || (evt.composedPath && evt.composedPath()[0])) || target, filter = options.filter; _saveInputCheckedState(el); // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group. if (dragEl) { return; } if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) { return; // only left button and enabled } // cancel dnd if original target is content editable if (originalTarget.isContentEditable) { return; } // Safari ignores further event handling after mousedown if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') { return; } target = closest(target, options.draggable, el, false); if (target && target.animated) { return; } if (lastDownEl === target) { // Ignoring duplicate `down` return; } // Get the index of the dragged element within its parent oldIndex = index(target); oldDraggableIndex = index(target, options.draggable); // Check filter if (typeof filter === 'function') { if (filter.call(this, evt, target, this)) { _dispatchEvent({ sortable: _this, rootEl: originalTarget, name: 'filter', targetEl: target, toEl: el, fromEl: el }); pluginEvent('filter', _this, { evt }); preventOnFilter && evt.preventDefault(); return; // cancel dnd } } else if (filter) { filter = filter.split(',').some(function (criteria) { criteria = closest(originalTarget, criteria.trim(), el, false); if (criteria) { _dispatchEvent({ sortable: _this, rootEl: criteria, name: 'filter', targetEl: target, fromEl: el, toEl: el }); pluginEvent('filter', _this, { evt }); return true; } }); if (filter) { preventOnFilter && evt.preventDefault(); return; // cancel dnd } } if (options.handle && !closest(originalTarget, options.handle, el, false)) { return; } // Prepare `dragstart` this._prepareDragStart(evt, touch, target); }, _prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target) { let _this = this, el = _this.el, options = _this.options, ownerDocument = el.ownerDocument, dragStartFn; if (target && !dragEl && (target.parentNode === el)) { let dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; nextEl = dragEl.nextSibling; lastDownEl = target; activeGroup = options.group; Sortable.dragged = dragEl; tapEvt = { target: dragEl, clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; tapDistanceLeft = tapEvt.clientX - dragRect.left; tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; dragStartFn = function () { pluginEvent('delayEnded', _this, { evt }); if (Sortable.eventCanceled) { _this._onDrop(); return; } // Delayed drag has been triggered // we can re-enable the events: touchmove/mousemove _this._disableDelayedDragEvents(); if (!FireFox && _this.nativeDraggable) { dragEl.draggable = true; } // Bind the events: dragstart/dragend _this._triggerDragStart(evt, touch); // Drag start event _dispatchEvent({ sortable: _this, name: 'choose', originalEvent: evt }); // Chosen item toggleClass(dragEl, options.chosenClass, true); }; // Disable "draggable" options.ignore.split(',').forEach(function (criteria) { find(dragEl, criteria.trim(), _disableDraggable); }); on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent); on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent); on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent); if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._onDrop); // Native D&D triggers pointercancel !this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop); } else { on(ownerDocument, 'mouseup', _this._onDrop); on(ownerDocument, 'touchend', _this._onDrop); on(ownerDocument, 'touchcancel', _this._onDrop); } // Make dragEl draggable (must be before delay for FireFox) if (FireFox && this.nativeDraggable) { this.options.touchStartThreshold = 4; dragEl.draggable = true; } pluginEvent('delayStart', this, { evt }); // Delay is impossible for native DnD in Edge or IE if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) { if (Sortable.eventCanceled) { this._onDrop(); return; } // If the user moves the pointer or let go the click or touch // before the delay has been reached: // disable the delayed drag if (options.supportPointer) { on(ownerDocument, 'pointerup', _this._disableDelayedDrag); on(ownerDocument, 'pointercancel', _this._disableDelayedDrag); } else { on(ownerDocument, 'mouseup', _this._disableDelayedDrag); on(ownerDocument, 'touchend', _this._disableDelayedDrag); on(ownerDocument, 'touchcancel', _this._disableDelayedDrag); } on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler); on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler); options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler); _this._dragStartTimer = setTimeout(dragStartFn, options.delay); } else { dragStartFn(); } } }, _delayedDragTouchMoveHandler: function (/** TouchEvent|PointerEvent **/e) { let touch = e.touches ? e.touches[0] : e; if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1)) ) { this._disableDelayedDrag(); } }, _disableDelayedDrag: function () { dragEl && _disableDraggable(dragEl); clearTimeout(this._dragStartTimer); this._disableDelayedDragEvents(); }, _disableDelayedDragEvents: function () { let ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._disableDelayedDrag); off(ownerDocument, 'touchend', this._disableDelayedDrag); off(ownerDocument, 'touchcancel', this._disableDelayedDrag); off(ownerDocument, 'pointerup', this._disableDelayedDrag); off(ownerDocument, 'pointercancel', this._disableDelayedDrag); off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler); off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler); }, _triggerDragStart: function (/** Event */evt, /** Touch */touch) { touch = touch || (evt.pointerType == 'touch' && evt); if (!this.nativeDraggable || touch) { if (this.options.supportPointer) { on(document, 'pointermove', this._onTouchMove); } else if (touch) { on(document, 'touchmove', this._onTouchMove); } else { on(document, 'mousemove', this._onTouchMove); } } else { on(dragEl, 'dragend', this); on(rootEl, 'dragstart', this._onDragStart); } try { if (document.selection) { _nextTick(() => { document.selection.empty(); }); } else { window.getSelection().removeAllRanges(); } } catch (err) { } }, _dragStarted: function (fallback, evt) { let _this = this; awaitingDragStarted = false; if (rootEl && dragEl) { pluginEvent('dragStarted', this, { evt }); if (this.nativeDraggable) { on(document, 'dragover', _checkOutsideTargetEl); } let options = this.options; // Apply effect !fallback && toggleClass(dragEl, options.dragClass, false); toggleClass(dragEl, options.ghostClass, true); Sortable.active = this; fallback && this._appendGhost(); // Drag start event _dispatchEvent({ sortable: this, name: 'start', originalEvent: evt }); } else { this._nulling(); } }, _emulateDragOver: function () { if (touchEvt) { this._lastX = touchEvt.clientX; this._lastY = touchEvt.clientY; _hideGhostForTarget(); let target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY); let parent = target; while (target && target.shadowRoot) { target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY); if (target === parent) break; parent = target; } dragEl.parentNode[expando]._isOutsideThisEl(target); if (parent) { do { if (parent[expando]) { let inserted; inserted = parent[expando]._onDragOver({ clientX: touchEvt.clientX, clientY: touchEvt.clientY, target: target, rootEl: parent }); if (inserted && !this.options.dragoverBubble) { break; } } target = parent; // store last element } /* jshint boss:true */ while (parent = getParentOrHost(parent)); } _unhideGhostForTarget(); } }, _onTouchMove: function (/**TouchEvent*/evt) { if (tapEvt) { let options = this.options, fallbackTolerance = options.fallbackTolerance, fallbackOffset = options.fallbackOffset, touch = evt.touches ? evt.touches[0] : evt, ghostMatrix = ghostEl && matrix(ghostEl, true), scaleX = ghostEl && ghostMatrix && ghostMatrix.a, scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = ((touch.clientX - tapEvt.clientX) + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? (relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0]) : 0) / (scaleX || 1), dy = ((touch.clientY - tapEvt.clientY) + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? (relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1]) : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance ) { return; } this._onDragStart(evt, true); } if (ghostEl) { if (ghostMatrix) { ghostMatrix.e += dx - (lastDx || 0); ghostMatrix.f += dy - (lastDy || 0); } else { ghostMatrix = { a: 1, b: 0, c: 0, d: 1, e: dx, f: dy }; } let cssMatrix = `matrix(${ghostMatrix.a},${ghostMatrix.b},${ghostMatrix.c},${ghostMatrix.d},${ghostMatrix.e},${ghostMatrix.f})`; css(ghostEl, 'webkitTransform', cssMatrix); css(ghostEl, 'mozTransform', cssMatrix); css(ghostEl, 'msTransform', cssMatrix); css(ghostEl, 'transform', cssMatrix); lastDx = dx; lastDy = dy; touchEvt = touch; } evt.cancelable && evt.preventDefault(); } }, _appendGhost: function () { // Bug if using scale(): https://stackoverflow.com/questions/2637058 // Not being adjusted for if (!ghostEl) { let container = this.options.fallbackOnBody ? document.body : rootEl, rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container), options = this.options; // Position absolutely if (PositionGhostAbsolutely) { // Get relatively positioned parent ghostRelativeParent = container; while ( css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document ) { ghostRelativeParent = ghostRelativeParent.parentNode; } if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) { if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement(); rect.top += ghostRelativeParent.scrollTop; rect.left += ghostRelativeParent.scrollLeft; } else { ghostRelativeParent = getWindowScrollingElement(); } ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent); } ghostEl = dragEl.cloneNode(true); toggleClass(ghostEl, options.ghostClass, false); toggleClass(ghostEl, options.fallbackClass, true); toggleClass(ghostEl, options.dragClass, true); css(ghostEl, 'transition', ''); css(ghostEl, 'transform', ''); css(ghostEl, 'box-sizing', 'border-box'); css(ghostEl, 'margin', 0); css(ghostEl, 'top', rect.top); css(ghostEl, 'left', rect.left); css(ghostEl, 'width', rect.width); css(ghostEl, 'height', rect.height); css(ghostEl, 'opacity', '0.8'); css(ghostEl, 'position', (PositionGhostAbsolutely ? 'absolute' : 'fixed')); css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; container.appendChild(ghostEl); // Set transform-origin css(ghostEl, 'transform-origin', (tapDistanceLeft / parseInt(ghostEl.style.width) * 100) + '% ' + (tapDistanceTop / parseInt(ghostEl.style.height) * 100) + '%'); } }, _onDragStart: function (/**Event*/evt, /**boolean*/fallback) { let _this = this; let dataTransfer = evt.dataTransfer; let options = _this.options; pluginEvent('dragStart', this, { evt }); if (Sortable.eventCanceled) { this._onDrop(); return; } pluginEvent('setupClone', this); if (!Sortable.eventCanceled) { cloneEl = clone(dragEl); cloneEl.removeAttribute("id"); cloneEl.draggable = false; cloneEl.style['will-change'] = ''; this._hideClone(); toggleClass(cloneEl, this.options.chosenClass, false); Sortable.clone = cloneEl; } // #1143: IFrame support workaround _this.cloneId = _nextTick(function() { pluginEvent('clone', _this); if (Sortable.eventCanceled) return; if (!_this.options.removeCloneOnHide) { rootEl.insertBefore(cloneEl, dragEl); } _this._hideClone(); _dispatchEvent({ sortable: _this, name: 'clone' }); }); !fallback && toggleClass(dragEl, options.dragClass, true); // Set proper drop events if (fallback) { ignoreNextClick = true; _this._loopId = setInterval(_this._emulateDragOver, 50); } else { // Undo what was set in _prepareDragStart before drag started off(document, 'mouseup', _this._onDrop); off(document, 'touchend', _this._onDrop); off(document, 'touchcancel', _this._onDrop); if (dataTransfer) { dataTransfer.effectAllowed = 'move'; options.setData && options.setData.call(_this, dataTransfer, dragEl); } on(document, 'drop', _this); // #1276 fix: css(dragEl, 'transform', 'translateZ(0)'); } awaitingDragStarted = true; _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt)); on(document, 'selectstart', _this); moved = true; window.getSelection().removeAllRanges(); if (Safari) { css(document.body, 'user-select', 'none'); } }, // Returns true - if no further action is needed (either inserted or another condition) _onDragOver: function (/**Event*/evt) { let el = this.el, target = evt.target, dragRect, targetRect, revert, options = this.options, group = options.group, activeSortable = Sortable.active, isOwner = (activeGroup === group), canSort = options.sort, fromSortable = (putSortable || activeSortable), vertical, _this = this, completedFired = false; if (_silent) return; function dragOverEvent(name, extra) { pluginEvent(name, _this, { evt, isOwner, axis: vertical ? 'vertical' : 'horizontal', revert, dragRect, targetRect, canSort, fromSortable, target, completed, onMove(target, after) { return onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after); }, changed, ...extra }); } // Capture animation state function capture() { dragOverEvent('dragOverAnimationCapture'); _this.captureAnimationState(); if (_this !== fromSortable) { fromSortable.captureAnimationState(); } } // Return invocation when dragEl is inserted (or completed) function completed(insertion) { dragOverEvent('dragOverCompleted', { insertion }); if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly if (isOwner) { activeSortable._hideClone(); } else { activeSortable._showClone(_this); } if (_this !== fromSortable) { // Set ghost class to new sortable's ghost class toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false); toggleClass(dragEl, options.ghostClass, true); } if (putSortable !== _this && _this !== Sortable.active) { putSortable = _this; } else if (_this === Sortable.active && putSortable) { putSortable = null; } // Animation if (fromSortable === _this) { _this._ignoreWhileAnimating = target; } _this.animateAll(function() { dragOverEvent('dragOverAnimationComplete'); _this._ignoreWhileAnimating = null; }); if (_this !== fromSortable) { fromSortable.animateAll(); fromSortable._ignoreWhileAnimating = null; } } // Null lastTarget if it is not inside a previously swapped element if ((target === dragEl && !dragEl.animated) || (target === el && !target.animated)) { lastTarget = null; } // no bubbling and not fallback if (!options.dragoverBubble && !evt.rootEl && target !== document) { dragEl.parentNode[expando]._isOutsideThisEl(evt.target); // Do not detect for empty insert if already inserted !insertion && nearestEmptyInsertDetectEvent(evt); } !options.dragoverBubble && evt.stopPropagation && evt.stopPropagation(); return (completedFired = true); } // Call when dragEl has been inserted function changed() { newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); _dispatchEvent({ sortable: _this, name: 'change', toEl: el, newIndex, newDraggableIndex, originalEvent: evt }); } if (evt.preventDefault !== void 0) { evt.cancelable && evt.preventDefault(); } target = closest(target, options.draggable, el, true); dragOverEvent('dragOver'); if (Sortable.eventCanceled) return completedFired; if ( dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target ) { return completed(false); } ignoreNextClick = false; if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = parentEl !== rootEl) // Reverting item into the original list : ( putSortable === this || ( (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt) ) ) ) ) { vertical = this._getDirection(evt, target) === 'vertical'; dragRect = getRect(dragEl); dragOverEvent('dragOverValid'); if (Sortable.eventCanceled) return completedFired; if (revert) { parentEl = rootEl; // actualization capture(); this._hideClone(); dragOverEvent('revert'); if (!Sortable.eventCanceled) { if (nextEl) { rootEl.insertBefore(dragEl, nextEl); } else { rootEl.appendChild(dragEl); } } return completed(true); } let elLastChild = lastChild(el, options.draggable); if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) { // Insert to end of list // If already at end of list: Do not insert if (elLastChild === dragEl) { return completed(false); } // if there is a last element, it is the target if (elLastChild && el === evt.target) { target = elLastChild; } if (target) { targetRect = getRect(target); } if (onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) { capture(); if (elLastChild && elLastChild.nextSibling) { // the last draggable element is not the last node el.insertBefore(dragEl, elLastChild.nextSibling); } else { el.appendChild(dragEl); } parentEl = el; // actualization changed(); return completed(true); } } else if (elLastChild && _ghostIsFirst(evt, vertical, this)) { // Insert to start of list let firstChild = getChild(el, 0, options, true); if (firstChild === dragEl) { return completed(false); } target = firstChild; targetRect = getRect(target); if (onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) { capture(); el.insertBefore(dragEl, firstChild); parentEl = el; // actualization changed(); return completed(true); } } else if (target.parentNode === el) { targetRect = getRect(target); let direction = 0, targetBeforeFirstSwap, differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { targetBeforeFirstSwap = targetRect[side1]; pastFirstInvertThresh = false; isCircumstantialInvert = (!differentRowCol && options.invertSwap) || differentLevel; } direction = _getSwapDirection( evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target ); let sibling; if (direction !== 0) { // Check if target is beside dragEl in respective direction (ignoring hidden elements) let dragIndex = index(dragEl); do { dragIndex -= direction; sibling = parentEl.children[dragIndex]; } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl)); } // If dragEl is already beside target: Do not insert if ( direction === 0 || sibling === target ) { return completed(false); } lastTarget = target; lastDirection = direction; let nextSibling = target.nextElementSibling, after = false; after = direction === 1; let moveVector = onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after); if (moveVector !== false) { if (moveVector === 1 || moveVector === -1) { after = (moveVector === 1); } _silent = true; setTimeout(_unsilent, 30); capture(); if (after && !nextSibling) { el.appendChild(dragEl); } else { target.parentNode.insertBefore(dragEl, after ? nextSibling : target); } // Undo chrome's scroll adjustment (has no effect on other browsers) if (scrolledPastTop) { scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop); } parentEl = dragEl.parentNode; // actualization // must be done before animation if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) { targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]); } changed(); return completed(true); } } if (el.contains(dragEl)) { return completed(false); } } return false; }, _ignoreWhileAnimating: null, _offMoveEvents: function() { off(document, 'mousemove', this._onTouchMove); off(document, 'touchmove', this._onTouchMove); off(document, 'pointermove', this._onTouchMove); off(document, 'dragover', nearestEmptyInsertDetectEvent); off(document, 'mousemove', nearestEmptyInsertDetectEvent); off(document, 'touchmove', nearestEmptyInsertDetectEvent); }, _offUpEvents: function () { let ownerDocument = this.el.ownerDocument; off(ownerDocument, 'mouseup', this._onDrop); off(ownerDocument, 'touchend', this._onDrop); off(ownerDocument, 'pointerup', this._onDrop); off(ownerDocument, 'pointercancel', this._onDrop); off(ownerDocument, 'touchcancel', this._onDrop); off(document, 'selectstart', this); }, _onDrop: function (/**Event*/evt) { let el = this.el, options = this.options; // Get the index of the dragged element within its parent newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt }); parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); if (Sortable.eventCanceled) { this._nulling(); return; } awaitingDragStarted = false; isCircumstantialInvert = false; pastFirstInvertThresh = false; clearInterval(this._loopId); clearTimeout(this._dragStartTimer); _cancelNextTick(this.cloneId); _cancelNextTick(this._dragStartId); // Unbind events if (this.nativeDraggable) { off(document, 'drop', this); off(el, 'dragstart', this._onDragStart); } this._offMoveEvents(); this._offUpEvents(); if (Safari) { css(document.body, 'user-select', ''); } css(dragEl, 'transform', ''); if (evt) { if (moved) { evt.cancelable && evt.preventDefault(); !options.dropBubble && evt.stopPropagation(); } ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl); if (rootEl === parentEl || (putSortable && putSortable.lastPutMode !== 'clone')) { // Remove clone(s) cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl); } if (dragEl) { if (this.nativeDraggable) { off(dragEl, 'dragend', this); } _disableDraggable(dragEl); dragEl.style['will-change'] = ''; // Remove classes // ghostClass is added in dragStarted if (moved && !awaitingDragStarted) { toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false); } toggleClass(dragEl, this.options.chosenClass, false); // Drag stop event _dispatchEvent({ sortable: this, name: 'unchoose', toEl: parentEl, newIndex: null, newDraggableIndex: null, originalEvent: evt }); if (rootEl !== parentEl) { if (newIndex >= 0) { // Add event _dispatchEvent({ rootEl: parentEl, name: 'add', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); // Remove event _dispatchEvent({ sortable: this, name: 'remove', toEl: parentEl, originalEvent: evt }); // drag from one list and drop into another _dispatchEvent({ rootEl: parentEl, name: 'sort', toEl: parentEl, fromEl: rootEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } putSortable && putSortable.save(); } else { if (newIndex !== oldIndex) { if (newIndex >= 0) { // drag & drop within the same list _dispatchEvent({ sortable: this, name: 'update', toEl: parentEl, originalEvent: evt }); _dispatchEvent({ sortable: this, name: 'sort', toEl: parentEl, originalEvent: evt }); } } } if (Sortable.active) { /* jshint eqnull:true */ if (newIndex == null || newIndex === -1) { newIndex = oldIndex; newDraggableIndex = oldDraggableIndex; } _dispatchEvent({ sortable: this, name: 'end', toEl: parentEl, originalEvent: evt }); // Save sorting this.save(); } } } this._nulling(); }, _nulling: function() { pluginEvent('nulling', this); rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null; let el = this.el; savedInputChecked.forEach(function (checkEl) { if (el.contains(checkEl)) { checkEl.checked = true; } }); savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function (/**Event*/evt) { switch (evt.type) { case 'drop': case 'dragend': this._onDrop(evt); break; case 'dragenter': case 'dragover': if (dragEl) { this._onDragOver(evt); _globalDragOver(evt); } break; case 'selectstart': evt.preventDefault(); break; } }, /** * Serializes the item into an array of string. * @returns {String[]} */ toArray: function () { let order = [], el, children = this.el.children, i = 0, n = children.length, options = this.options; for (; i < n; i++) { el = children[i]; if (closest(el, options.draggable, this.el, false)) { order.push(el.getAttribute(options.dataIdAttr) || _generateId(el)); } } return order; }, /** * Sorts the elements according to the array. * @param {String[]} order order of the items */ sort: function (order, useAnimation) { let items = {}, rootEl = this.el; this.toArray().forEach(function (id, i) { let el = rootEl.children[i]; if (closest(el, this.options.draggable, rootEl, false)) { items[id] = el; } }, this); useAnimation && this.captureAnimationState(); order.forEach(function (id) { if (items[id]) { rootEl.removeChild(items[id]); rootEl.appendChild(items[id]); } }); useAnimation && this.animateAll(); }, /** * Save the current sorting */ save: function () { let store = this.options.store; store && store.set && store.set(this); }, /** * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. * @param {HTMLElement} el * @param {String} [selector] default: `options.draggable` * @returns {HTMLElement|null} */ closest: function (el, selector) { return closest(el, selector || this.options.draggable, this.el, false); }, /** * Set/get option * @param {string} name * @param {*} [value] * @returns {*} */ option: function (name, value) { let options = this.options; if (value === void 0) { return options[name]; } else { let modifiedValue = PluginManager.modifyOption(this, name, value); if (typeof modifiedValue !== 'undefined') { options[name] = modifiedValue; } else { options[name] = value; } if (name === 'group') { _prepareGroup(options); } } }, /** * Destroy */ destroy: function () { pluginEvent('destroy', this); let el = this.el; el[expando] = null; off(el, 'mousedown', this._onTapStart); off(el, 'touchstart', this._onTapStart); off(el, 'pointerdown', this._onTapStart); if (this.nativeDraggable) { off(el, 'dragover', this); off(el, 'dragenter', this); } // Remove draggable attributes Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) { el.removeAttribute('draggable'); }); this._onDrop(); this._disableDelayedDragEvents(); sortables.splice(sortables.indexOf(this.el), 1); this.el = el = null; }, _hideClone: function() { if (!cloneHidden) { pluginEvent('hideClone', this); if (Sortable.eventCanceled) return; css(cloneEl, 'display', 'none'); if (this.options.removeCloneOnHide && cloneEl.parentNode) { cloneEl.parentNode.removeChild(cloneEl); } cloneHidden = true; } }, _showClone: function(putSortable) { if (putSortable.lastPutMode !== 'clone') { this._hideClone(); return; } if (cloneHidden) { pluginEvent('showClone', this); if (Sortable.eventCanceled) return; // show clone at dragEl or original position if (dragEl.parentNode == rootEl && !this.options.group.revertClone) { rootEl.insertBefore(cloneEl, dragEl); } else if (nextEl) { rootEl.insertBefore(cloneEl, nextEl); } else { rootEl.appendChild(cloneEl); } if (this.options.group.revertClone) { this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); cloneHidden = false; } } }; function _globalDragOver(/**Event*/evt) { if (evt.dataTransfer) { evt.dataTransfer.dropEffect = 'move'; } evt.cancelable && evt.preventDefault(); } function onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) { let evt, sortable = fromEl[expando], onMoveFn = sortable.options.onMove, retVal; // Support for new CustomEvent feature if (window.CustomEvent && !IE11OrLess && !Edge) { evt = new CustomEvent('move', { bubbles: true, cancelable: true }); } else { evt = document.createEvent('Event'); evt.initEvent('move', true, true); } evt.to = toEl; evt.from = fromEl; evt.dragged = dragEl; evt.draggedRect = dragRect; evt.related = targetEl || toEl; evt.relatedRect = targetRect || getRect(toEl); evt.willInsertAfter = willInsertAfter; evt.originalEvent = originalEvent; fromEl.dispatchEvent(evt); if (onMoveFn) { retVal = onMoveFn.call(sortable, evt, originalEvent); } return retVal; } function _disableDraggable(el) { el.draggable = false; } function _unsilent() { _silent = false; } function _ghostIsFirst(evt, vertical, sortable) { let firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true)); const childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); const spacer = 10; return vertical ? (evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right) : (evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left) } function _ghostIsLast(evt, vertical, sortable) { const lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable)); const childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl); const spacer = 10; return vertical ? (evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left) : (evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top); } function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) { let mouseOnAxis = vertical ? evt.clientY : evt.clientX, targetLength = vertical ? targetRect.height : targetRect.width, targetS1 = vertical ? targetRect.top : targetRect.left, targetS2 = vertical ? targetRect.bottom : targetRect.right, invert = false; if (!invertSwap) { // Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) { // multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2 // check if past first invert threshold on side opposite of lastDirection if (!pastFirstInvertThresh && (lastDirection === 1 ? ( mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 ) : ( mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2 ) ) ) { // past first invert threshold, do not restrict inverted threshold to dragEl shadow pastFirstInvertThresh = true; } if (!pastFirstInvertThresh) { // dragEl shadow (target move distance shadow) if ( lastDirection === 1 ? ( mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow ) : ( mouseOnAxis > targetS2 - targetMoveDistance ) ) { return -lastDirection; } } else { invert = true; } } else { // Regular if ( mouseOnAxis > targetS1 + (targetLength * (1 - swapThreshold) / 2) && mouseOnAxis < targetS2 - (targetLength * (1 - swapThreshold) / 2) ) { return _getInsertDirection(target); } } } invert = invert || invertSwap; if (invert) { // Invert of regular if ( mouseOnAxis < targetS1 + (targetLength * invertedSwapThreshold / 2) || mouseOnAxis > targetS2 - (targetLength * invertedSwapThreshold / 2) ) { return ((mouseOnAxis > targetS1 + targetLength / 2) ? 1 : -1); } } return 0; } /** * Gets the direction dragEl must be swapped relative to target in order to make it * seem that dragEl has been "inserted" into that element's position * @param {HTMLElement} target The target whose position dragEl is being inserted at * @return {Number} Direction dragEl must be swapped */ function _getInsertDirection(target) { if (index(dragEl) < index(target)) { return 1; } else { return -1; } } /** * Generate id * @param {HTMLElement} el * @returns {String} * @private */ function _generateId(el) { let str = el.tagName + el.className + el.src + el.href + el.textContent, i = str.length, sum = 0; while (i--) { sum += str.charCodeAt(i); } return sum.toString(36); } function _saveInputCheckedState(root) { savedInputChecked.length = 0; let inputs = root.getElementsByTagName('input'); let idx = inputs.length; while (idx--) { let el = inputs[idx]; el.checked && savedInputChecked.push(el); } } function _nextTick(fn) { return setTimeout(fn, 0); } function _cancelNextTick(id) { return clearTimeout(id); } // Fixed #973: if (documentExists) { on(document, 'touchmove', function(evt) { if ((Sortable.active || awaitingDragStarted) && evt.cancelable) { evt.preventDefault(); } }); } // Export utils Sortable.utils = { on, off, css, find, is: function (el, selector) { return !!closest(el, selector, el, false); }, extend, throttle, closest, toggleClass, clone, index, nextTick: _nextTick, cancelNextTick: _cancelNextTick, detectDirection: _detectDirection, getChild, expando }; /** * Get the Sortable instance of an element * @param {HTMLElement} element The element * @return {Sortable|undefined} The instance of Sortable */ Sortable.get = function(element) { return element[expando]; }; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ Sortable.mount = function(...plugins) { if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach((plugin) => { if (!plugin.prototype || !plugin.prototype.constructor) { throw `Sortable: Mounted plugin must be a constructor function, not ${ {}.toString.call(plugin) }`; } if (plugin.utils) Sortable.utils = { ...Sortable.utils, ...plugin.utils }; PluginManager.mount(plugin); }); }; /** * Create sortable instance * @param {HTMLElement} el * @param {Object} [options] */ Sortable.create = function (el, options) { return new Sortable(el, options); }; // Export Sortable.version = version; export default Sortable; ================================================ FILE: src/utils.js ================================================ import { IE11OrLess } from './BrowserInfo.js'; import Sortable from './Sortable.js'; const captureMode = { capture: false, passive: false }; function on(el, event, fn) { el.addEventListener(event, fn, !IE11OrLess && captureMode); } function off(el, event, fn) { el.removeEventListener(event, fn, !IE11OrLess && captureMode); } function matches(/**HTMLElement*/el, /**String*/selector) { if (!selector) return; selector[0] === '>' && (selector = selector.substring(1)); if (el) { try { if (el.matches) { return el.matches(selector); } else if (el.msMatchesSelector) { return el.msMatchesSelector(selector); } else if (el.webkitMatchesSelector) { return el.webkitMatchesSelector(selector); } } catch(_) { return false; } } return false; } function getParentOrHost(el) { return (el.host && el !== document && el.host.nodeType && el.host !== el) ? el.host : el.parentNode; } function closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) { if (el) { ctx = ctx || document; do { if ( selector != null && ( selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector) ) || includeCTX && el === ctx ) { return el; } if (el === ctx) break; /* jshint boss:true */ } while (el = getParentOrHost(el)); } return null; } const R_SPACE = /\s+/g; function toggleClass(el, name, state) { if (el && name) { if (el.classList) { el.classList[state ? 'add' : 'remove'](name); } else { let className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' '); el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' '); } } } function css(el, prop, val) { let style = el && el.style; if (style) { if (val === void 0) { if (document.defaultView && document.defaultView.getComputedStyle) { val = document.defaultView.getComputedStyle(el, ''); } else if (el.currentStyle) { val = el.currentStyle; } return prop === void 0 ? val : val[prop]; } else { if (!(prop in style) && prop.indexOf('webkit') === -1) { prop = '-webkit-' + prop; } style[prop] = val + (typeof val === 'string' ? '' : 'px'); } } } function matrix(el, selfOnly) { let appliedTransforms = ''; if (typeof(el) === 'string') { appliedTransforms = el; } else { do { let transform = css(el, 'transform'); if (transform && transform !== 'none') { appliedTransforms = transform + ' ' + appliedTransforms; } /* jshint boss:true */ } while (!selfOnly && (el = el.parentNode)); } const matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix; /*jshint -W056 */ return matrixFn && (new matrixFn(appliedTransforms)); } function find(ctx, tagName, iterator) { if (ctx) { let list = ctx.getElementsByTagName(tagName), i = 0, n = list.length; if (iterator) { for (; i < n; i++) { iterator(list[i], i); } } return list; } return []; } function getWindowScrollingElement() { let scrollingElement = document.scrollingElement; if (scrollingElement) { return scrollingElement } else { return document.documentElement } } /** * Returns the "bounding client rect" of given element * @param {HTMLElement} el The element whose boundingClientRect is wanted * @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container * @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr * @param {[Boolean]} undoScale Whether the container's scale() should be undone * @param {[HTMLElement]} container The parent the element will be placed in * @return {Object} The boundingClientRect of el, with specified adjustments */ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) { if (!el.getBoundingClientRect && el !== window) return; let elRect, top, left, bottom, right, height, width; if (el !== window && el.parentNode && el !== getWindowScrollingElement()) { elRect = el.getBoundingClientRect(); top = elRect.top; left = elRect.left; bottom = elRect.bottom; right = elRect.right; height = elRect.height; width = elRect.width; } else { top = 0; left = 0; bottom = window.innerHeight; right = window.innerWidth; height = window.innerHeight; width = window.innerWidth; } if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) { // Adjust for translate() container = container || el.parentNode; // solves #1123 (see: https://stackoverflow.com/a/37953806/6088312) // Not needed on <= IE11 if (!IE11OrLess) { do { if ( container && container.getBoundingClientRect && ( css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static' ) ) { let containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container top -= containerRect.top + parseInt(css(container, 'border-top-width')); left -= containerRect.left + parseInt(css(container, 'border-left-width')); bottom = top + elRect.height; right = left + elRect.width; break; } /* jshint boss:true */ } while (container = container.parentNode); } } if (undoScale && el !== window) { // Adjust for scale() let elMatrix = matrix(container || el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d; if (elMatrix) { top /= scaleY; left /= scaleX; width /= scaleX; height /= scaleY; bottom = top + height; right = left + width; } } return { top: top, left: left, bottom: bottom, right: right, width: width, height: height }; } /** * Returns the content rect of the element (bounding rect minus border and padding) * @param {HTMLElement} el */ function getContentRect(el) { let rect = getRect(el); const paddingLeft = parseInt(css(el, 'padding-left')), paddingTop = parseInt(css(el, 'padding-top')), paddingRight = parseInt(css(el, 'padding-right')), paddingBottom = parseInt(css(el, 'padding-bottom')); rect.top += paddingTop + parseInt(css(el, 'border-top-width')); rect.left += paddingLeft + parseInt(css(el, 'border-left-width')); // Client Width/Height includes padding only rect.width = el.clientWidth - paddingLeft - paddingRight; rect.height = el.clientHeight - paddingTop - paddingBottom; rect.bottom = rect.top + rect.height; rect.right = rect.left + rect.width; return rect; } /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ function isScrolledPast(el, elSide, parentSide) { let parent = getParentAutoScrollElement(el, true), elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { let parentSideVal = getRect(parent)[parentSide], visible; if (parentSide === 'top' || parentSide === 'left') { visible = elSideVal >= parentSideVal; } else { visible = elSideVal <= parentSideVal; } if (!visible) return parent; if (parent === getWindowScrollingElement()) break; parent = getParentAutoScrollElement(parent, false); } return false; } /** * Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible) * and non-draggable elements * @param {HTMLElement} el The parent element * @param {Number} childNum The index of the child * @param {Object} options Parent Sortable's options * @return {HTMLElement} The child at index childNum, or null if not found */ function getChild(el, childNum, options, includeDragEl) { let currentChild = 0, i = 0, children = el.children; while (i < children.length) { if ( children[i].style.display !== 'none' && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false) ) { if (currentChild === childNum) { return children[i]; } currentChild++; } i++; } return null; } /** * Gets the last child in the el, ignoring ghostEl or invisible elements (clones) * @param {HTMLElement} el Parent element * @param {selector} selector Any other elements that should be ignored * @return {HTMLElement} The last child, ignoring ghostEl */ function lastChild(el, selector) { let last = el.lastElementChild; while ( last && ( last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector) ) ) { last = last.previousElementSibling; } return last || null; } /** * Returns the index of an element within its parent for a selected set of * elements * @param {HTMLElement} el * @param {selector} selector * @return {number} */ function index(el, selector) { let index = 0; if (!el || !el.parentNode) { return -1; } /* jshint boss:true */ while (el = el.previousElementSibling) { if ((el.nodeName.toUpperCase() !== 'TEMPLATE') && el !== Sortable.clone && (!selector || matches(el, selector))) { index++; } } return index; } /** * Returns the scroll offset of the given element, added with all the scroll offsets of parent elements. * The value is returned in real pixels. * @param {HTMLElement} el * @return {Array} Offsets in the format of [left, top] */ function getRelativeScrollOffset(el) { let offsetLeft = 0, offsetTop = 0, winScroller = getWindowScrollingElement(); if (el) { do { let elMatrix = matrix(el), scaleX = elMatrix.a, scaleY = elMatrix.d; offsetLeft += el.scrollLeft * scaleX; offsetTop += el.scrollTop * scaleY; } while (el !== winScroller && (el = el.parentNode)); } return [offsetLeft, offsetTop]; } /** * Returns the index of the object within the given array * @param {Array} arr Array that may or may not hold the object * @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find * @return {Number} The index of the object in the array, or -1 */ function indexOfObject(arr, obj) { for (let i in arr) { if (!arr.hasOwnProperty(i)) continue; for (let key in obj) { if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i); } } return -1; } function getParentAutoScrollElement(el, includeSelf) { // skip to window if (!el || !el.getBoundingClientRect) return getWindowScrollingElement(); let elem = el; let gotSelf = false; do { // we don't need to get elem css if it isn't even overflowing in the first place (performance) if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) { let elemCSS = css(elem); if ( elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll') ) { if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement(); if (gotSelf || includeSelf) return elem; gotSelf = true; } } /* jshint boss:true */ } while (elem = elem.parentNode); return getWindowScrollingElement(); } function extend(dst, src) { if (dst && src) { for (let key in src) { if (src.hasOwnProperty(key)) { dst[key] = src[key]; } } } return dst; } function isRectEqual(rect1, rect2) { return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width); } let _throttleTimeout; function throttle(callback, ms) { return function () { if (!_throttleTimeout) { let args = arguments, _this = this; if (args.length === 1) { callback.call(_this, args[0]); } else { callback.apply(_this, args); } _throttleTimeout = setTimeout(function () { _throttleTimeout = void 0; }, ms); } }; } function cancelThrottle() { clearTimeout(_throttleTimeout); _throttleTimeout = void 0; } function scrollBy(el, x, y) { el.scrollLeft += x; el.scrollTop += y; } function clone(el) { let Polymer = window.Polymer; let $ = window.jQuery || window.Zepto; if (Polymer && Polymer.dom) { return Polymer.dom(el).cloneNode(true); } else if ($) { return $(el).clone(true)[0]; } else { return el.cloneNode(true); } } function setRect(el, rect) { css(el, 'position', 'absolute'); css(el, 'top', rect.top); css(el, 'left', rect.left); css(el, 'width', rect.width); css(el, 'height', rect.height); } function unsetRect(el) { css(el, 'position', ''); css(el, 'top', ''); css(el, 'left', ''); css(el, 'width', ''); css(el, 'height', ''); } function getChildContainingRectFromElement(container, options, ghostEl) { const rect = {}; Array.from(container.children).forEach(child => { if (!closest(child, options.draggable, container, false) || child.animated || child === ghostEl) return; const childRect = getRect(child); rect.left = Math.min(rect.left ?? Infinity, childRect.left); rect.top = Math.min(rect.top ?? Infinity, childRect.top); rect.right = Math.max(rect.right ?? -Infinity, childRect.right); rect.bottom = Math.max(rect.bottom ?? -Infinity, childRect.bottom); }); rect.width = rect.right - rect.left; rect.height = rect.bottom - rect.top; rect.x = rect.left; rect.y = rect.top; return rect; } const expando = 'Sortable' + (new Date).getTime(); export { on, off, matches, getParentOrHost, closest, toggleClass, css, matrix, find, getWindowScrollingElement, getRect, isScrolledPast, getChild, lastChild, index, getRelativeScrollOffset, indexOfObject, getParentAutoScrollElement, extend, isRectEqual, throttle, cancelThrottle, scrollBy, clone, setRect, unsetRect, getContentRect, getChildContainingRectFromElement, expando }; ================================================ FILE: st/app.js ================================================ var example1 = document.getElementById('example1'), example2Left = document.getElementById('example2-left'), example2Right = document.getElementById('example2-right'), example3Left = document.getElementById('example3-left'), example3Right = document.getElementById('example3-right'), example4Left = document.getElementById('example4-left'), example4Right = document.getElementById('example4-right'), example5 = document.getElementById('example5'), example6 = document.getElementById('example6'), example7 = document.getElementById('example7'), gridDemo = document.getElementById('gridDemo'), multiDragDemo = document.getElementById('multiDragDemo'), swapDemo = document.getElementById('swapDemo'); // Example 1 - Simple list new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' }); // Example 2 - Shared lists new Sortable(example2Left, { group: 'shared', // set both lists to same group animation: 150 }); new Sortable(example2Right, { group: 'shared', animation: 150 }); // Example 3 - Cloning new Sortable(example3Left, { group: { name: 'shared', pull: 'clone' // To clone: set pull to 'clone' }, animation: 150 }); new Sortable(example3Right, { group: { name: 'shared', pull: 'clone' }, animation: 150 }); // Example 4 - No Sorting new Sortable(example4Left, { group: { name: 'shared', pull: 'clone', put: false // Do not allow items to be put into this list }, animation: 150, sort: false // To disable sorting: set sort to false }); new Sortable(example4Right, { group: 'shared', animation: 150 }); // Example 5 - Handle new Sortable(example5, { handle: '.handle', // handle class animation: 150 }); // Example 6 - Filter new Sortable(example6, { filter: '.filtered', animation: 150 }); // Example 7 - Thresholds var example7Sortable = new Sortable(example7, { animation: 150 }); var example7SwapThreshold = 1; var example7SwapThresholdInput = document.getElementById('example7SwapThresholdInput'); var example7SwapThresholdCode = document.getElementById('example7SwapThresholdCode'); var example7SwapThresholdIndicators = [].slice.call(document.querySelectorAll('.swap-threshold-indicator')); var example7InvertSwapInput = document.getElementById('example7InvertSwapInput'); var example7InvertSwapCode = document.getElementById('example7InvertSwapCode'); var example7InvertedSwapThresholdIndicators = [].slice.call(document.querySelectorAll('.inverted-swap-threshold-indicator')); var example7Squares = [].slice.call(document.querySelectorAll('.square')); var activeIndicators = example7SwapThresholdIndicators; var example7DirectionInput = document.getElementById('example7DirectionInput'); var example7SizeProperty = 'width'; function renderThresholdWidth(evt) { example7SwapThreshold = Number(evt.target.value); example7SwapThresholdCode.innerHTML = evt.target.value.indexOf('.') > -1 ? (evt.target.value + '0000').slice(0, 4) : evt.target.value; for (var i = 0; i < activeIndicators.length; i++) { activeIndicators[i].style[example7SizeProperty] = (evt.target.value * 100) / (activeIndicators == example7SwapThresholdIndicators ? 1 : 2) + '%'; } example7Sortable.option('swapThreshold', example7SwapThreshold); } example7SwapThresholdInput.addEventListener('input', renderThresholdWidth); example7SwapThresholdInput.addEventListener('change', renderThresholdWidth); example7InvertSwapInput.addEventListener('change', function(evt) { example7Sortable.option('invertSwap', evt.target.checked); for (var i = 0; i < activeIndicators.length; i++) { activeIndicators[i].style.display = 'none'; } if (evt.target.checked) { example7InvertSwapCode.style.display = ''; activeIndicators = example7InvertedSwapThresholdIndicators; } else { example7InvertSwapCode.style.display = 'none'; activeIndicators = example7SwapThresholdIndicators; } renderThresholdWidth({ target: example7SwapThresholdInput }); for (i = 0; i < activeIndicators.length; i++) { activeIndicators[i].style.display = ''; } }); function renderDirection(evt) { for (var i = 0; i < example7Squares.length; i++) { example7Squares[i].style.display = evt.target.value === 'h' ? 'inline-block' : 'block'; } for (i = 0; i < example7InvertedSwapThresholdIndicators.length; i++) { /* jshint expr:true */ evt.target.value === 'h' && (example7InvertedSwapThresholdIndicators[i].style.height = '100%'); evt.target.value === 'v' && (example7InvertedSwapThresholdIndicators[i].style.width = '100%'); } for (i = 0; i < example7SwapThresholdIndicators.length; i++) { if (evt.target.value === 'h') { example7SwapThresholdIndicators[i].style.height = '100%'; example7SwapThresholdIndicators[i].style.marginLeft = '50%'; example7SwapThresholdIndicators[i].style.transform = 'translateX(-50%)'; example7SwapThresholdIndicators[i].style.marginTop = '0'; } else { example7SwapThresholdIndicators[i].style.width = '100%'; example7SwapThresholdIndicators[i].style.marginTop = '50%'; example7SwapThresholdIndicators[i].style.transform = 'translateY(-50%)'; example7SwapThresholdIndicators[i].style.marginLeft = '0'; } } if (evt.target.value === 'h') { example7SizeProperty = 'width'; example7Sortable.option('direction', 'horizontal'); } else { example7SizeProperty = 'height'; example7Sortable.option('direction', 'vertical'); } renderThresholdWidth({ target: example7SwapThresholdInput }); } example7DirectionInput.addEventListener('change', renderDirection); renderDirection({ target: example7DirectionInput }); // Grid demo new Sortable(gridDemo, { animation: 150, ghostClass: 'blue-background-class' }); // Nested demo var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable')); // Loop through each nested sortable element for (var i = 0; i < nestedSortables.length; i++) { new Sortable(nestedSortables[i], { group: 'nested', animation: 150, fallbackOnBody: true, swapThreshold: 0.65 }); } // MultiDrag demo new Sortable(multiDragDemo, { multiDrag: true, selectedClass: 'selected', fallbackTolerance: 3, // So that we can select items on mobile animation: 150 }); // Swap demo new Sortable(swapDemo, { swap: true, swapClass: 'highlight', animation: 150 }); ================================================ FILE: st/iframe/frame.html ================================================
    14 Drag me by the handle
    2 You can also select text
    1 Best of both worlds!
    ================================================ FILE: st/iframe/index.html ================================================ IFrame playground
    This is Sortable
    It works with Bootstrap...
    ...out of the box.
    It has support for touch devices.
    Just drag some elements around.
    ================================================ FILE: st/prettify/prettify.css ================================================ .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} ================================================ FILE: st/prettify/prettify.js ================================================ !function(){/* Copyright (C) 2006 Google Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ "undefined"!==typeof window&&(window.PR_SHOULD_USE_CONTINUATION=!0); (function(){function T(a){function d(e){var a=e.charCodeAt(0);if(92!==a)return a;var c=e.charAt(1);return(a=w[c])?a:"0"<=c&&"7">=c?parseInt(e.substring(1),8):"u"===c||"x"===c?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function c(e){var c=e.substring(1,e.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g")); e=[];var a="^"===c[0],b=["["];a&&b.push("^");for(var a=a?1:0,g=c.length;ak||122k||90k||122h[0]&&(h[1]+1>h[0]&&b.push("-"),b.push(f(h[1])));b.push("]");return b.join("")}function m(e){for(var a=e.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),b=a.length,d=[],g=0,h=0;g/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(c=a.regexLiterals){var m=(c=1|\\/=?|::?|<>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+ ("/(?=[^/*"+c+"])(?:[^/\\x5B\\x5C"+c+"]|\\x5C"+m+"|\\x5B(?:[^\\x5C\\x5D"+c+"]|\\x5C"+m+")*(?:\\x5D|$))+/")+")")])}(c=a.types)&&f.push(["typ",c]);c=(""+a.keywords).replace(/^ | $/g,"");c.length&&f.push(["kwd",new RegExp("^(?:"+c.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);c="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(c+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i, null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(c),null]);return G(d,f)}function L(a,d,f){function c(a){var b=a.nodeType;if(1==b&&!t.test(a.className))if("br"===a.nodeName.toLowerCase())m(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)c(a);else if((3==b||4==b)&&f){var e=a.nodeValue,d=e.match(q);d&&(b=e.substring(0,d.index),a.nodeValue=b,(e=e.substring(d.index+ d[0].length))&&a.parentNode.insertBefore(l.createTextNode(e),a.nextSibling),m(a),b||a.parentNode.removeChild(a))}}function m(a){function c(a,b){var e=b?a.cloneNode(!1):a,k=a.parentNode;if(k){var k=c(k,1),d=a.nextSibling;k.appendChild(e);for(var f=d;f;f=d)d=f.nextSibling,k.appendChild(f)}return e}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=c(a.nextSibling,0);for(var e;(e=a.parentNode)&&1===e.nodeType;)a=e;b.push(a)}for(var t=/(?:^|\s)nocode(?:\s|$)/,q=/\r\n?|\n/,l=a.ownerDocument,n=l.createElement("li");a.firstChild;)n.appendChild(a.firstChild); for(var b=[n],p=0;p=+m[1],d=/\n/g,t=a.a,q=t.length,f=0,l=a.c,n=l.length,c=0,b=a.g,p=b.length,w=0;b[p]=q;var r,e;for(e=r=0;e=h&&(c+=2);f>=k&&(w+=2)}}finally{g&&(g.style.display=a)}}catch(y){D.console&&console.log(y&&y.stack||y)}}var D="undefined"!==typeof window? window:{},B=["break,continue,do,else,for,if,return,while"],F=[[B,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],H=[F,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"], O=[F,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],P=[F,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"], F=[F,"abstract,async,await,constructor,debugger,enum,eval,export,from,function,get,import,implements,instanceof,interface,let,null,of,set,undefined,var,with,yield,Infinity,NaN"],Q=[B,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],R=[B,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"], B=[B,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],S=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,W=/\S/,X=x({keywords:[H,P,O,F,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",Q,R,B],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}), I={};t(X,["default-code"]);t(G([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));t(G([["pln",/^[\s]+/, null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]); t(G([],[["atv",/^[\s\S]+/]]),["uq.val"]);t(x({keywords:H,hashComments:!0,cStyleComments:!0,types:S}),"c cc cpp cxx cyc m".split(" "));t(x({keywords:"null,true,false"}),["json"]);t(x({keywords:P,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:S}),["cs"]);t(x({keywords:O,cStyleComments:!0}),["java"]);t(x({keywords:B,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);t(x({keywords:Q,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);t(x({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END", hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);t(x({keywords:R,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);t(x({keywords:F,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);t(x({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0, regexLiterals:!0}),["coffee"]);t(G([],[["str",/^[\s\S]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:G,registerLangHandler:t,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,f){f=f||!1;d=d||null;var c=document.createElement("div");c.innerHTML="
    "+a+"
    "; c=c.firstChild;f&&L(c,f,!0);M({j:d,m:f,h:c,l:1,a:null,i:null,c:null,g:null});return c.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function f(){for(var c=D.PR_SHOULD_USE_CONTINUATION?b.now()+250:Infinity;p=c?parseInt(e.substring(1),8):"u"===c||"x"===c?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e); return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function c(e){var c=e.substring(1,e.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));e=[];var a="^"===c[0],b=["["];a&&b.push("^");for(var a=a?1:0,h=c.length;ap||122p||90p||122m[0]&&(m[1]+1>m[0]&&b.push("-"),b.push(f(m[1])));b.push("]");return b.join("")}function g(e){for(var a=e.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)", "g")),b=a.length,d=[],h=0,m=0;h/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/, null]));if(c=a.regexLiterals){var g=(c=1|\\/=?|::?|<>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+c+"])(?:[^/\\x5B\\x5C"+c+"]|\\x5C"+g+"|\\x5B(?:[^\\x5C\\x5D"+c+"]|\\x5C"+g+")*(?:\\x5D|$))+/")+")")])}(c=a.types)&&f.push(["typ",c]);c=(""+a.keywords).replace(/^ | $/g,"");c.length&&f.push(["kwd", new RegExp("^(?:"+c.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);c="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(c+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(c),null]);return E(d,f)}function B(a,d,f){function c(a){var b= a.nodeType;if(1==b&&!r.test(a.className))if("br"===a.nodeName.toLowerCase())g(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)c(a);else if((3==b||4==b)&&f){var e=a.nodeValue,d=e.match(n);d&&(b=e.substring(0,d.index),a.nodeValue=b,(e=e.substring(d.index+d[0].length))&&a.parentNode.insertBefore(q.createTextNode(e),a.nextSibling),g(a),b||a.parentNode.removeChild(a))}}function g(a){function c(a,b){var e=b?a.cloneNode(!1):a,p=a.parentNode;if(p){var p=c(p,1),d=a.nextSibling; p.appendChild(e);for(var f=d;f;f=d)d=f.nextSibling,p.appendChild(f)}return e}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=c(a.nextSibling,0);for(var e;(e=a.parentNode)&&1===e.nodeType;)a=e;b.push(a)}for(var r=/(?:^|\s)nocode(?:\s|$)/,n=/\r\n?|\n/,q=a.ownerDocument,k=q.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var b=[k],t=0;t=+g[1],d=/\n/g,r=a.a,k=r.length,f=0,q=a.c,n=q.length,c=0,b=a.g,t=b.length,v=0;b[t]=k;var u,e;for(e=u=0;e=m&&(c+=2);f>=p&&(v+=2)}}finally{h&&(h.style.display=a)}}catch(y){Q.console&&console.log(y&&y.stack||y)}}var Q="undefined"!==typeof window?window:{},J=["break,continue,do,else,for,if,return,while"],K=[[J,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],R=[K,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],L=[K,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"], M=[K,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"],K=[K,"abstract,async,await,constructor,debugger,enum,eval,export,from,function,get,import,implements,instanceof,interface,let,null,of,set,undefined,var,with,yield,Infinity,NaN"], N=[J,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],O=[J,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],J=[J,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],P=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/, S=/\S/,T=v({keywords:[R,M,L,K,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",N,O,J],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),V={};n(T,["default-code"]);n(E([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-", /^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));n(E([["pln",/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/], ["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);n(E([],[["atv",/^[\s\S]+/]]),["uq.val"]);n(v({keywords:R,hashComments:!0,cStyleComments:!0,types:P}),"c cc cpp cxx cyc m".split(" "));n(v({keywords:"null,true,false"}),["json"]);n(v({keywords:M,hashComments:!0,cStyleComments:!0, verbatimStrings:!0,types:P}),["cs"]);n(v({keywords:L,cStyleComments:!0}),["java"]);n(v({keywords:J,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);n(v({keywords:N,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);n(v({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}), ["perl","pl","pm"]);n(v({keywords:O,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);n(v({keywords:K,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);n(v({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);n(E([],[["str",/^[\s\S]+/]]), ["regex"]);var U=Q.PR={createSimpleLexer:E,registerLangHandler:n,sourceDecorator:v,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:function(a,d,f){f=f||!1;d=d||null;var c=document.createElement("div");c.innerHTML="
    "+a+"
    ";c=c.firstChild;f&&B(c,f,!0);H({j:d,m:f,h:c,l:1,a:null,i:null,c:null,g:null}); return c.innerHTML},prettyPrint:g=function(a,d){function f(){for(var c=Q.PR_SHOULD_USE_CONTINUATION?b.now()+250:Infinity;t { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(2); const targetStartPosition = list1.child(2); const target = await targetStartPosition(); const targetEndPosition = list1.child(1); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); test('Sort up list', async browser => { const dragStartPosition = list1.child(2); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(0); const targetStartPosition = list1.child(0); const target = await targetStartPosition(); const targetEndPosition = list1.child(1); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); ================================================ FILE: tests/Sortable.test.js ================================================ import { Selector } from 'testcafe'; const itemHeight = 54; // px const leeway = 1; fixture `Simple Sorting` .page `./single-list.html`; let list1 = Selector('#list1'); test('Sort down list', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(2); const targetStartPosition = list1.child(2); const target = await targetStartPosition(); const targetEndPosition = list1.child(1); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); test('Sort up list', async browser => { const dragStartPosition = list1.child(2); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(0); const targetStartPosition = list1.child(0); const target = await targetStartPosition(); const targetEndPosition = list1.child(1); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); test('Swap threshold', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(1); const targetStartPosition = list1.child(1); const target = await targetStartPosition(); const targetEndPosition = list1.child(0); await browser.eval(() => { Sortable.get(document.getElementById('list1')).option('swapThreshold', 0.6); }); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { destinationOffsetY: Math.round(itemHeight / 2 * 0.4 - leeway) }) .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { destinationOffsetY: Math.round(itemHeight / 2 * 0.4 + leeway) }) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); test('Invert swap', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(1); const targetStartPosition = list1.child(1); const target = await targetStartPosition(); const targetEndPosition = list1.child(0); await browser.eval(() => { Sortable.get(document.getElementById('list1')).option('invertSwap', true); }); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { destinationOffsetY: Math.round(itemHeight / 2 - leeway) }) .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { destinationOffsetY: Math.round(itemHeight / 2 + leeway) }) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); test('Inverted swap threshold', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(1); const targetStartPosition = list1.child(1); const target = await targetStartPosition(); const targetEndPosition = list1.child(0); await browser.eval(() => { Sortable.get(document.getElementById('list1')).option('invertSwap', true); Sortable.get(document.getElementById('list1')).option('invertedSwapThreshold', 0.5); }); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { destinationOffsetY: Math.round(itemHeight - (itemHeight / 2 * 0.5) - leeway) }) .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { destinationOffsetY: Math.round(itemHeight - (itemHeight / 2 * 0.5) + leeway) }) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); fixture `Grouping` .page `./dual-list.html`; let list2 = Selector('#list2'); test('Move to list of the same group', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list2.child(0); const targetStartPosition = list2.child(0); const target = await targetStartPosition(); const targetEndPosition = list2.child(1); await browser.eval(() => { Sortable.get(document.getElementById('list2')).option('group', 'shared'); }); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 }) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); test('Do not move to list of different group', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const targetStartPosition = list2.child(0); const target = await targetStartPosition(); await browser.eval(() => { Sortable.get(document.getElementById('list2')).option('group', null); }); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 }) .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText); }); test('Move to list with put:true', async browser => { // Should allow insert, since pull defaults to `true` const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list2.child(0); const targetStartPosition = list2.child(0); const target = await targetStartPosition(); const targetEndPosition = list2.child(1); await browser.eval(() => { Sortable.get(document.getElementById('list2')).option('group', { put: true }); }); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 }) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); test('Do not move from list with pull:false', async browser => { // Should not allow insert, since put defaults to `false` const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const targetStartPosition = list2.child(0); const target = await targetStartPosition(); await browser.eval(() => { Sortable.get(document.getElementById('list1')).option('group', { pull: false }); }); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 }) .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText); }); test('Clone element if pull:"clone"', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list2.child(0); const targetStartPosition = list2.child(0); const target = await targetStartPosition(); const targetEndPosition = list2.child(1); await browser.eval(() => { Sortable.get(document.getElementById('list1')).option('group', { pull: 'clone' }); Sortable.get(document.getElementById('list2')).option('group', { put: true }); }); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 }) .expect(dragStartPosition.innerText).eql(dragEl.innerText) // clone check .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); fixture `Handles` .page `./handles.html`; test('Do not allow dragging not using handle', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const targetStartPosition = list1.child(1); const target = await targetStartPosition(); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target) .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText); }); test('Allow dragging using handle', async browser => { const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(1); const targetStartPosition = list1.child(1); const target = await targetStartPosition(); const targetEndPosition = list1.child(0); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(await dragStartPosition.child('.handle'), target) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); fixture `Filter` .page `./filter.html`; test('Do not allow dragging of filtered element', async browser => { const dragStartPosition = list1.child('.filtered'); const dragEl = await dragStartPosition(); const targetStartPosition = dragStartPosition.nextSibling(1); const target = await targetStartPosition(); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target) .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText); }); test('Allow dragging of non-filtered element', async browser => { const dragStartPosition = list1.child(':not(.filtered)'); const dragEl = await dragStartPosition(); const dragEndPosition = dragStartPosition.nextSibling(1); const targetStartPosition = dragStartPosition.nextSibling(1); const target = await targetStartPosition(); const targetEndPosition = dragStartPosition.nextSibling(0); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); fixture `Nested` .page `./nested.html`; let list1n1 = Selector('.n1'); let list1n2 = Selector('.n2'); let list2n1 = Selector('.n1:nth-of-type(2)'); test('Dragging from level 1 to level 0', async browser => { const dragStartPosition = list1n1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list1.child(2); const targetStartPosition = list1.child(2); const target = await targetStartPosition(); const targetEndPosition = list1.child(3); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { destinationOffsetY: 0 }) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); test('Dragging from level 0 to level 2', async browser => { const dragStartPosition = list1.child(1); const dragEl = await dragStartPosition(); const dragEndPosition = list1n2.child(2); const targetStartPosition = list1n2.child(2); const target = await targetStartPosition(); const targetEndPosition = list1n2.child(3); await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .expect(targetStartPosition.innerText).eql(target.innerText) .dragToElement(dragEl, target, { destinationOffsetY: 0 }) .expect(dragEndPosition.innerText).eql(dragEl.innerText) .expect(targetEndPosition.innerText).eql(target.innerText); }); fixture `Empty Insert` .page `./empty-list.html`; test('Insert into empty list if within emptyInsertThreshold', async browser => { const threshold = await browser.eval(() => Sortable.get(document.getElementById('list2')).option('emptyInsertThreshold')); const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragEndPosition = list2.child(0); // Must use rects since testcafe won't drag to element that is "not visible" const dragRect = dragEl.boundingClientRect; const list2Rect = await list2.boundingClientRect; await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .drag(dragEl, Math.round(list2Rect.left - dragRect.left) - (threshold - 1), -(threshold - 1), { offsetY: 0, offsetX: 0 }) .expect(dragEndPosition.innerText).eql(dragEl.innerText); }); test('Do not insert into empty list if outside emptyInsertThreshold', async browser => { const threshold = await browser.eval(() => Sortable.get(document.getElementById('list2')).option('emptyInsertThreshold')); const dragStartPosition = list1.child(0); const dragEl = await dragStartPosition(); const dragRect = dragEl.boundingClientRect; const list2Rect = await list2.boundingClientRect; await browser .expect(dragStartPosition.innerText).eql(dragEl.innerText) .drag(dragEl, Math.round(list2Rect.left - dragRect.left) - (threshold + 1), -(threshold + 1), { offsetY: 0, offsetX: 0 }) .expect(dragStartPosition.innerText).eql(dragEl.innerText); }); ================================================ FILE: tests/dual-list.html ================================================
    Item 1.1
    Item 1.2
    Item 1.3
    Item 1.4
    Item 1.5
    Item 2.1
    Item 2.2
    Item 2.3
    Item 2.4
    Item 2.5
    ================================================ FILE: tests/empty-list.html ================================================
    Item 1.1
    Item 1.2
    Item 1.3
    Item 1.4
    Item 1.5
    ================================================ FILE: tests/filter.html ================================================
    Item 1.1
    Item 1.2
    Item 1.3
    Item 1.4
    Item 1.5
    ================================================ FILE: tests/handles.html ================================================
    ::Item 1.1
    ::Item 1.2
    ::Item 1.3
    ::Item 1.4
    ::Item 1.5
    ================================================ FILE: tests/nested.html ================================================
    Item 1.1
    Item 2.1
    Item 2.2
    Item 3.1
    Item 3.2
    Item 3.3
    Item 3.4
    Item 2.3
    Item 2.4
    Item 1.2
    Item 1.3
    Item 1.4
    Item 2.1
    Item 2.2
    Item 2.3
    Item 2.4
    Item 1.5
    ================================================ FILE: tests/single-list.html ================================================
    Item 1.1
    Item 1.2
    Item 1.3
    Item 1.4
    Item 1.5
    ================================================ FILE: tests/style.css ================================================ .list > div { min-height: 50px; border-style: solid; border-width: 2px; text-align: center; line-height: 50px; font-size: 20px; font-family: Helvetica; } .half { display: inline-block; width: 49%; padding: 0; margin: 0; vertical-align: top; }