From cddc0217724f1a7661014d50e4c940e623a0c2dc Mon Sep 17 00:00:00 2001 From: Mario Date: Tue, 3 Aug 2021 07:12:35 +0000 Subject: Apps drag and drop feature --- library/Sortable/plugins/OnSpill/OnSpill.js | 79 +++++++++++++++++++++++++++++ library/Sortable/plugins/OnSpill/README.md | 60 ++++++++++++++++++++++ library/Sortable/plugins/OnSpill/index.js | 1 + 3 files changed, 140 insertions(+) create mode 100644 library/Sortable/plugins/OnSpill/OnSpill.js create mode 100644 library/Sortable/plugins/OnSpill/README.md create mode 100644 library/Sortable/plugins/OnSpill/index.js (limited to 'library/Sortable/plugins/OnSpill') diff --git a/library/Sortable/plugins/OnSpill/OnSpill.js b/library/Sortable/plugins/OnSpill/OnSpill.js new file mode 100644 index 000000000..e8c6439d9 --- /dev/null +++ b/library/Sortable/plugins/OnSpill/OnSpill.js @@ -0,0 +1,79 @@ +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 +}; diff --git a/library/Sortable/plugins/OnSpill/README.md b/library/Sortable/plugins/OnSpill/README.md new file mode 100644 index 000000000..816fd19cc --- /dev/null +++ b/library/Sortable/plugins/OnSpill/README.md @@ -0,0 +1,60 @@ +# 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 + } +}); +``` diff --git a/library/Sortable/plugins/OnSpill/index.js b/library/Sortable/plugins/OnSpill/index.js new file mode 100644 index 000000000..4023b0f60 --- /dev/null +++ b/library/Sortable/plugins/OnSpill/index.js @@ -0,0 +1 @@ +export { default, RemoveOnSpill, RevertOnSpill } from './OnSpill.js'; -- cgit v1.2.3