Skip to content

S
Sortable

leizi929 / Sortable
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
S
Sortable

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 c7a0a991 编写于 作者: O owen-m1
浏览文件
操作

more

上级 fcc19dac
展开全部 隐藏空白更改
内联 并排
Showing with 216 addition and 111 deletion
README.md
浏览文件 @ c7a0a991
...@@ -48,8 +48,6 @@ Supported by [<img width="100px" src="https://user-images.githubusercontent.com/ ...@@ -48,8 +48,6 @@ Supported by [<img width="100px" src="https://user-images.githubusercontent.com/
### Getting Started ### Getting Started
Via npm
Install with NPM: Install with NPM:
```bash ```bash
$ npm install sortablejs --save $ npm install sortablejs --save
...@@ -66,7 +64,7 @@ Import into your project: ...@@ -66,7 +64,7 @@ Import into your project:
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
// Core SortableJS (without default plugins) // Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.modular.esm.js'; import Sortable from 'sortablejs/modular/sortable.core.esm.js';
// Complete SortableJS (with all plugins) // Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js'; import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
...@@ -81,13 +79,14 @@ Sortable.mount(MultiDrag, Swap); ...@@ -81,13 +79,14 @@ Sortable.mount(MultiDrag, Swap);
// Cherrypick default plugins // Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.complete.esm.js'; import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
Sortable.mount(AutoScroll); Sortable.mount(AutoScroll);
``` ```
<br/> ---
### Usage ### Usage
```html ```html
...@@ -109,20 +108,6 @@ You can use any element for the list and its elements, not just `ul`/`li`. Here ...@@ -109,20 +108,6 @@ You can use any element for the list and its elements, not just `ul`/`li`. Here
--- ---
### Using Plugins
Sortable has several plugins that extend the library beyond it's default capabilities.
To see a list of these plugins, open the `plugins/` directory.
Some of these plugins are "default" plugins, while others are "extra" plugins. Default plugins add optional features to Sortable (eg. AutoScroll), while extra plugins siginificantly modify the behaviour of Sortable (eg. MultiDrag).
Plugins are mounted using `Sortable.mount()` (see example above).
Once a plugin is mounted, it must be enabled in the options of the sortable in order for it to be enabled. The name of the option is the plugin's pluginName, and can be found in the plugin's README, along with other options the plugin specifies.
---
### Options ### Options
```js ```js
var sortable = new Sortable(el, { var sortable = new Sortable(el, {
...@@ -513,17 +498,6 @@ Dragging only starts if you move the pointer past a certain tolerance, so that y ...@@ -513,17 +498,6 @@ Dragging only starts if you move the pointer past a certain tolerance, so that y
--- ---
#### `scroll` option
If set to `true`, the page (or sortable-area) scrolls when coming to an edge.
Demo:
- `window`: https://jsbin.com/dosilir/edit?js,output
- `overflow: hidden`: https://jsbin.com/xecihez/edit?html,js,output
---
#### `scrollFn` option #### `scrollFn` option
Defines function that will be used for autoscrolling. el.scrollTop/el.scrollLeft is used by default. Defines function that will be used for autoscrolling. el.scrollTop/el.scrollLeft is used by default.
Useful when you have custom scrollbar with dedicated scroll function. Useful when you have custom scrollbar with dedicated scroll function.
...@@ -728,7 +702,28 @@ Create new instance. ...@@ -728,7 +702,28 @@ Create new instance.
##### Sortable.active:`Sortable` ##### Sortable.active:`Sortable`
Link to the active instance. The active Sortable instance.
---
##### Sortable.dragged:`HTMLElement`
The element being dragged.
---
##### Sortable.ghost:`HTMLElement`
The ghost element.
---
##### Sortable.mount(plugin:`...SortablePlugin|...SortablePlugin[]`)
Mounts a plugin to Sortable.
--- ---
......
Sortable.js
浏览文件 @ c7a0a991
...@@ -112,6 +112,26 @@ ...@@ -112,6 +112,26 @@
return target; return target;
} }
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var version = "1.9.0"; var version = "1.9.0";
var plugins = []; var plugins = [];
...@@ -671,7 +691,8 @@ ...@@ -671,7 +691,8 @@
oldDraggableIndex = _ref.oldDraggableIndex, oldDraggableIndex = _ref.oldDraggableIndex,
newDraggableIndex = _ref.newDraggableIndex, newDraggableIndex = _ref.newDraggableIndex,
originalEvt = _ref.originalEvt, originalEvt = _ref.originalEvt,
putSortable = _ref.putSortable; putSortable = _ref.putSortable,
eventOptions = _ref.eventOptions;
sortable = sortable || rootEl[expando]; sortable = sortable || rootEl[expando];
var evt, var evt,
options = sortable.options, options = sortable.options,
...@@ -697,10 +718,11 @@ ...@@ -697,10 +718,11 @@
evt.newDraggableIndex = newDraggableIndex; evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvt; evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
var eventOptions = PluginManager.getEventOptions(name, sortable);
for (var option in eventOptions) { var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable));
evt[option] = eventOptions[option];
for (var option in allEventOptions) {
evt[option] = allEventOptions[option];
} }
if (rootEl) { if (rootEl) {
...@@ -1001,7 +1023,7 @@ ...@@ -1001,7 +1023,7 @@
* @return {HTMLElement} Element of the first found nearest Sortable * @return {HTMLElement} Element of the first found nearest Sortable
*/ */
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
for (var i = 0; i < sortables.length; i++) { for (var i in sortables) {
if (lastChild(sortables[i])) continue; if (lastChild(sortables[i])) continue;
var rect = getRect(sortables[i]), var rect = getRect(sortables[i]),
threshold = sortables[i][expando].options.emptyInsertThreshold, threshold = sortables[i][expando].options.emptyInsertThreshold,
...@@ -2060,6 +2082,8 @@ ...@@ -2060,6 +2082,8 @@
sortable: this, sortable: this,
name: 'unchoose', name: 'unchoose',
toEl: parentEl, toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt originalEvt: evt
}); });
...@@ -2590,7 +2614,6 @@ ...@@ -2590,7 +2614,6 @@
scroll: true, scroll: true,
scrollSensitivity: 30, scrollSensitivity: 30,
scrollSpeed: 10, scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true bubbleScroll: true
}; // Bind all private methods }; // Bind all private methods
...@@ -2811,11 +2834,12 @@ ...@@ -2811,11 +2834,12 @@
dispatchSortableEvent = _ref.dispatchSortableEvent, dispatchSortableEvent = _ref.dispatchSortableEvent,
hideGhostForTarget = _ref.hideGhostForTarget, hideGhostForTarget = _ref.hideGhostForTarget,
unhideGhostForTarget = _ref.unhideGhostForTarget; unhideGhostForTarget = _ref.unhideGhostForTarget;
var fromSortable = putSortable || activeSortable;
hideGhostForTarget(); hideGhostForTarget();
var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY); var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY);
unhideGhostForTarget(); unhideGhostForTarget();
if (!(putSortable || activeSortable).el.contains(target)) { if (fromSortable && !fromSortable.el.contains(target)) {
dispatchSortableEvent('spill'); dispatchSortableEvent('spill');
this.onSpill(dragEl); this.onSpill(dragEl);
} }
...@@ -2964,7 +2988,7 @@ ...@@ -2964,7 +2988,7 @@
clonesHidden; clonesHidden;
function MultiDragPlugin() { function MultiDragPlugin() {
function MultiDrag(sortable) { function MultiDrag(sortable, el) {
// Bind all private methods // Bind all private methods
for (var fn in this) { for (var fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
...@@ -2984,8 +3008,8 @@ ...@@ -2984,8 +3008,8 @@
setData: function setData(dataTransfer, dragEl) { setData: function setData(dataTransfer, dragEl) {
var data = ''; var data = '';
if (multiDragElements.length) { if (multiDragElements.length && multiDragSortable === el) {
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent; data += (!i ? '' : ', ') + multiDragElements[i].textContent;
} }
} else { } else {
...@@ -3034,7 +3058,7 @@ ...@@ -3034,7 +3058,7 @@
rootEl = _ref3.rootEl; rootEl = _ref3.rootEl;
insertMultiDragClones(false, rootEl); insertMultiDragClones(false, rootEl);
for (var i = 0; i < multiDragClones.length; i++) { for (var i in multiDragClones) {
css(multiDragClones[i], 'display', ''); css(multiDragClones[i], 'display', '');
} }
...@@ -3402,7 +3426,7 @@ ...@@ -3402,7 +3426,7 @@
if (evt && evt.button !== 0) return; if (evt && evt.button !== 0) return;
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false); toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false);
dispatchEvent({ dispatchEvent({
sortable: this.sortable, sortable: this.sortable,
...@@ -3456,8 +3480,8 @@ ...@@ -3456,8 +3480,8 @@
}, },
eventOptions: function eventOptions() { eventOptions: function eventOptions() {
return { return {
items: multiDragElements, items: _toConsumableArray(multiDragElements),
clones: multiDragClones clones: [].concat(multiDragClones)
}; };
} }
}); });
...@@ -3493,7 +3517,7 @@ ...@@ -3493,7 +3517,7 @@
} }
function removeMultiDragElements() { function removeMultiDragElements() {
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
if (multiDragElements[i] === dragEl$1) continue; if (multiDragElements[i] === dragEl$1) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]); multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
} }
...@@ -3507,4 +3531,4 @@ ...@@ -3507,4 +3531,4 @@
return Sortable$1; return Sortable$1;
})); }));
\ No newline at end of file
Sortable.min.js
浏览文件 @ c7a0a991
此差异已折叠。
build/esm-build.js
浏览文件 @ c7a0a991
...@@ -5,9 +5,9 @@ import build from './build.js'; ...@@ -5,9 +5,9 @@ import build from './build.js';
export default ([ export default ([
{ {
input: 'entry/entry-modular.js', input: 'entry/entry-core.js',
output: Object.assign({}, build.output, { output: Object.assign({}, build.output, {
file: 'modular/sortable.modular.esm.js', file: 'modular/sortable.core.esm.js',
format: 'esm' format: 'esm'
}) })
}, },
......
modular/sortable.complete.esm.js
浏览文件 @ c7a0a991
...@@ -106,6 +106,26 @@ function _objectWithoutProperties(source, excluded) { ...@@ -106,6 +106,26 @@ function _objectWithoutProperties(source, excluded) {
return target; return target;
} }
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var version = "1.9.0"; var version = "1.9.0";
var plugins = []; var plugins = [];
...@@ -665,7 +685,8 @@ function dispatchEvent(_ref) { ...@@ -665,7 +685,8 @@ function dispatchEvent(_ref) {
oldDraggableIndex = _ref.oldDraggableIndex, oldDraggableIndex = _ref.oldDraggableIndex,
newDraggableIndex = _ref.newDraggableIndex, newDraggableIndex = _ref.newDraggableIndex,
originalEvt = _ref.originalEvt, originalEvt = _ref.originalEvt,
putSortable = _ref.putSortable; putSortable = _ref.putSortable,
eventOptions = _ref.eventOptions;
sortable = sortable || rootEl[expando]; sortable = sortable || rootEl[expando];
var evt, var evt,
options = sortable.options, options = sortable.options,
...@@ -691,10 +712,11 @@ function dispatchEvent(_ref) { ...@@ -691,10 +712,11 @@ function dispatchEvent(_ref) {
evt.newDraggableIndex = newDraggableIndex; evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvt; evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
var eventOptions = PluginManager.getEventOptions(name, sortable);
for (var option in eventOptions) { var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable));
evt[option] = eventOptions[option];
for (var option in allEventOptions) {
evt[option] = allEventOptions[option];
} }
if (rootEl) { if (rootEl) {
...@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'), ...@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'),
* @return {HTMLElement} Element of the first found nearest Sortable * @return {HTMLElement} Element of the first found nearest Sortable
*/ */
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
for (var i = 0; i < sortables.length; i++) { for (var i in sortables) {
if (lastChild(sortables[i])) continue; if (lastChild(sortables[i])) continue;
var rect = getRect(sortables[i]), var rect = getRect(sortables[i]),
threshold = sortables[i][expando].options.emptyInsertThreshold, threshold = sortables[i][expando].options.emptyInsertThreshold,
...@@ -2054,6 +2076,8 @@ Sortable$1.prototype = ...@@ -2054,6 +2076,8 @@ Sortable$1.prototype =
sortable: this, sortable: this,
name: 'unchoose', name: 'unchoose',
toEl: parentEl, toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt originalEvt: evt
}); });
...@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() { ...@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() {
scroll: true, scroll: true,
scrollSensitivity: 30, scrollSensitivity: 30,
scrollSpeed: 10, scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true bubbleScroll: true
}; // Bind all private methods }; // Bind all private methods
...@@ -2805,11 +2828,12 @@ var drop = function drop(_ref) { ...@@ -2805,11 +2828,12 @@ var drop = function drop(_ref) {
dispatchSortableEvent = _ref.dispatchSortableEvent, dispatchSortableEvent = _ref.dispatchSortableEvent,
hideGhostForTarget = _ref.hideGhostForTarget, hideGhostForTarget = _ref.hideGhostForTarget,
unhideGhostForTarget = _ref.unhideGhostForTarget; unhideGhostForTarget = _ref.unhideGhostForTarget;
var fromSortable = putSortable || activeSortable;
hideGhostForTarget(); hideGhostForTarget();
var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY); var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY);
unhideGhostForTarget(); unhideGhostForTarget();
if (!(putSortable || activeSortable).el.contains(target)) { if (fromSortable && !fromSortable.el.contains(target)) {
dispatchSortableEvent('spill'); dispatchSortableEvent('spill');
this.onSpill(dragEl); this.onSpill(dragEl);
} }
...@@ -2958,7 +2982,7 @@ dragStarted = false, ...@@ -2958,7 +2982,7 @@ dragStarted = false,
clonesHidden; clonesHidden;
function MultiDragPlugin() { function MultiDragPlugin() {
function MultiDrag(sortable) { function MultiDrag(sortable, el) {
// Bind all private methods // Bind all private methods
for (var fn in this) { for (var fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
...@@ -2978,8 +3002,8 @@ function MultiDragPlugin() { ...@@ -2978,8 +3002,8 @@ function MultiDragPlugin() {
setData: function setData(dataTransfer, dragEl) { setData: function setData(dataTransfer, dragEl) {
var data = ''; var data = '';
if (multiDragElements.length) { if (multiDragElements.length && multiDragSortable === el) {
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent; data += (!i ? '' : ', ') + multiDragElements[i].textContent;
} }
} else { } else {
...@@ -3028,7 +3052,7 @@ function MultiDragPlugin() { ...@@ -3028,7 +3052,7 @@ function MultiDragPlugin() {
rootEl = _ref3.rootEl; rootEl = _ref3.rootEl;
insertMultiDragClones(false, rootEl); insertMultiDragClones(false, rootEl);
for (var i = 0; i < multiDragClones.length; i++) { for (var i in multiDragClones) {
css(multiDragClones[i], 'display', ''); css(multiDragClones[i], 'display', '');
} }
...@@ -3396,7 +3420,7 @@ function MultiDragPlugin() { ...@@ -3396,7 +3420,7 @@ function MultiDragPlugin() {
if (evt && evt.button !== 0) return; if (evt && evt.button !== 0) return;
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false); toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false);
dispatchEvent({ dispatchEvent({
sortable: this.sortable, sortable: this.sortable,
...@@ -3450,8 +3474,8 @@ function MultiDragPlugin() { ...@@ -3450,8 +3474,8 @@ function MultiDragPlugin() {
}, },
eventOptions: function eventOptions() { eventOptions: function eventOptions() {
return { return {
items: multiDragElements, items: _toConsumableArray(multiDragElements),
clones: multiDragClones clones: [].concat(multiDragClones)
}; };
} }
}); });
...@@ -3487,7 +3511,7 @@ function insertMultiDragClones(elementsInserted, rootEl) { ...@@ -3487,7 +3511,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
} }
function removeMultiDragElements() { function removeMultiDragElements() {
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
if (multiDragElements[i] === dragEl$1) continue; if (multiDragElements[i] === dragEl$1) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]); multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
} }
......
modular/sortable.modular.esm.js → modular/sortable.core.esm.js
浏览文件 @ c7a0a991
...@@ -106,6 +106,26 @@ function _objectWithoutProperties(source, excluded) { ...@@ -106,6 +106,26 @@ function _objectWithoutProperties(source, excluded) {
return target; return target;
} }
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var version = "1.9.0"; var version = "1.9.0";
var plugins = []; var plugins = [];
...@@ -665,7 +685,8 @@ function dispatchEvent(_ref) { ...@@ -665,7 +685,8 @@ function dispatchEvent(_ref) {
oldDraggableIndex = _ref.oldDraggableIndex, oldDraggableIndex = _ref.oldDraggableIndex,
newDraggableIndex = _ref.newDraggableIndex, newDraggableIndex = _ref.newDraggableIndex,
originalEvt = _ref.originalEvt, originalEvt = _ref.originalEvt,
putSortable = _ref.putSortable; putSortable = _ref.putSortable,
eventOptions = _ref.eventOptions;
sortable = sortable || rootEl[expando]; sortable = sortable || rootEl[expando];
var evt, var evt,
options = sortable.options, options = sortable.options,
...@@ -691,10 +712,11 @@ function dispatchEvent(_ref) { ...@@ -691,10 +712,11 @@ function dispatchEvent(_ref) {
evt.newDraggableIndex = newDraggableIndex; evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvt; evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
var eventOptions = PluginManager.getEventOptions(name, sortable);
for (var option in eventOptions) { var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable));
evt[option] = eventOptions[option];
for (var option in allEventOptions) {
evt[option] = allEventOptions[option];
} }
if (rootEl) { if (rootEl) {
...@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'), ...@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'),
* @return {HTMLElement} Element of the first found nearest Sortable * @return {HTMLElement} Element of the first found nearest Sortable
*/ */
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
for (var i = 0; i < sortables.length; i++) { for (var i in sortables) {
if (lastChild(sortables[i])) continue; if (lastChild(sortables[i])) continue;
var rect = getRect(sortables[i]), var rect = getRect(sortables[i]),
threshold = sortables[i][expando].options.emptyInsertThreshold, threshold = sortables[i][expando].options.emptyInsertThreshold,
...@@ -2054,6 +2076,8 @@ Sortable$1.prototype = ...@@ -2054,6 +2076,8 @@ Sortable$1.prototype =
sortable: this, sortable: this,
name: 'unchoose', name: 'unchoose',
toEl: parentEl, toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt originalEvt: evt
}); });
...@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() { ...@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() {
scroll: true, scroll: true,
scrollSensitivity: 30, scrollSensitivity: 30,
scrollSpeed: 10, scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true bubbleScroll: true
}; // Bind all private methods }; // Bind all private methods
...@@ -2898,7 +2921,7 @@ dragStarted = false, ...@@ -2898,7 +2921,7 @@ dragStarted = false,
clonesHidden; clonesHidden;
function MultiDragPlugin() { function MultiDragPlugin() {
function MultiDrag(sortable) { function MultiDrag(sortable, el) {
// Bind all private methods // Bind all private methods
for (var fn in this) { for (var fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
...@@ -2918,8 +2941,8 @@ function MultiDragPlugin() { ...@@ -2918,8 +2941,8 @@ function MultiDragPlugin() {
setData: function setData(dataTransfer, dragEl) { setData: function setData(dataTransfer, dragEl) {
var data = ''; var data = '';
if (multiDragElements.length) { if (multiDragElements.length && multiDragSortable === el) {
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent; data += (!i ? '' : ', ') + multiDragElements[i].textContent;
} }
} else { } else {
...@@ -2968,7 +2991,7 @@ function MultiDragPlugin() { ...@@ -2968,7 +2991,7 @@ function MultiDragPlugin() {
rootEl = _ref3.rootEl; rootEl = _ref3.rootEl;
insertMultiDragClones(false, rootEl); insertMultiDragClones(false, rootEl);
for (var i = 0; i < multiDragClones.length; i++) { for (var i in multiDragClones) {
css(multiDragClones[i], 'display', ''); css(multiDragClones[i], 'display', '');
} }
...@@ -3336,7 +3359,7 @@ function MultiDragPlugin() { ...@@ -3336,7 +3359,7 @@ function MultiDragPlugin() {
if (evt && evt.button !== 0) return; if (evt && evt.button !== 0) return;
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false); toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false);
dispatchEvent({ dispatchEvent({
sortable: this.sortable, sortable: this.sortable,
...@@ -3390,8 +3413,8 @@ function MultiDragPlugin() { ...@@ -3390,8 +3413,8 @@ function MultiDragPlugin() {
}, },
eventOptions: function eventOptions() { eventOptions: function eventOptions() {
return { return {
items: multiDragElements, items: _toConsumableArray(multiDragElements),
clones: multiDragClones clones: [].concat(multiDragClones)
}; };
} }
}); });
...@@ -3427,7 +3450,7 @@ function insertMultiDragClones(elementsInserted, rootEl) { ...@@ -3427,7 +3450,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
} }
function removeMultiDragElements() { function removeMultiDragElements() {
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
if (multiDragElements[i] === dragEl$1) continue; if (multiDragElements[i] === dragEl$1) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]); multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
} }
......
modular/sortable.esm.js
浏览文件 @ c7a0a991
...@@ -106,6 +106,26 @@ function _objectWithoutProperties(source, excluded) { ...@@ -106,6 +106,26 @@ function _objectWithoutProperties(source, excluded) {
return target; return target;
} }
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var version = "1.9.0"; var version = "1.9.0";
var plugins = []; var plugins = [];
...@@ -665,7 +685,8 @@ function dispatchEvent(_ref) { ...@@ -665,7 +685,8 @@ function dispatchEvent(_ref) {
oldDraggableIndex = _ref.oldDraggableIndex, oldDraggableIndex = _ref.oldDraggableIndex,
newDraggableIndex = _ref.newDraggableIndex, newDraggableIndex = _ref.newDraggableIndex,
originalEvt = _ref.originalEvt, originalEvt = _ref.originalEvt,
putSortable = _ref.putSortable; putSortable = _ref.putSortable,
eventOptions = _ref.eventOptions;
sortable = sortable || rootEl[expando]; sortable = sortable || rootEl[expando];
var evt, var evt,
options = sortable.options, options = sortable.options,
...@@ -691,10 +712,11 @@ function dispatchEvent(_ref) { ...@@ -691,10 +712,11 @@ function dispatchEvent(_ref) {
evt.newDraggableIndex = newDraggableIndex; evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvt; evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
var eventOptions = PluginManager.getEventOptions(name, sortable);
for (var option in eventOptions) { var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable));
evt[option] = eventOptions[option];
for (var option in allEventOptions) {
evt[option] = allEventOptions[option];
} }
if (rootEl) { if (rootEl) {
...@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'), ...@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'),
* @return {HTMLElement} Element of the first found nearest Sortable * @return {HTMLElement} Element of the first found nearest Sortable
*/ */
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
for (var i = 0; i < sortables.length; i++) { for (var i in sortables) {
if (lastChild(sortables[i])) continue; if (lastChild(sortables[i])) continue;
var rect = getRect(sortables[i]), var rect = getRect(sortables[i]),
threshold = sortables[i][expando].options.emptyInsertThreshold, threshold = sortables[i][expando].options.emptyInsertThreshold,
...@@ -2054,6 +2076,8 @@ Sortable$1.prototype = ...@@ -2054,6 +2076,8 @@ Sortable$1.prototype =
sortable: this, sortable: this,
name: 'unchoose', name: 'unchoose',
toEl: parentEl, toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt originalEvt: evt
}); });
...@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() { ...@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() {
scroll: true, scroll: true,
scrollSensitivity: 30, scrollSensitivity: 30,
scrollSpeed: 10, scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true bubbleScroll: true
}; // Bind all private methods }; // Bind all private methods
...@@ -2805,11 +2828,12 @@ var drop = function drop(_ref) { ...@@ -2805,11 +2828,12 @@ var drop = function drop(_ref) {
dispatchSortableEvent = _ref.dispatchSortableEvent, dispatchSortableEvent = _ref.dispatchSortableEvent,
hideGhostForTarget = _ref.hideGhostForTarget, hideGhostForTarget = _ref.hideGhostForTarget,
unhideGhostForTarget = _ref.unhideGhostForTarget; unhideGhostForTarget = _ref.unhideGhostForTarget;
var fromSortable = putSortable || activeSortable;
hideGhostForTarget(); hideGhostForTarget();
var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY); var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY);
unhideGhostForTarget(); unhideGhostForTarget();
if (!(putSortable || activeSortable).el.contains(target)) { if (fromSortable && !fromSortable.el.contains(target)) {
dispatchSortableEvent('spill'); dispatchSortableEvent('spill');
this.onSpill(dragEl); this.onSpill(dragEl);
} }
...@@ -2958,7 +2982,7 @@ dragStarted = false, ...@@ -2958,7 +2982,7 @@ dragStarted = false,
clonesHidden; clonesHidden;
function MultiDragPlugin() { function MultiDragPlugin() {
function MultiDrag(sortable) { function MultiDrag(sortable, el) {
// Bind all private methods // Bind all private methods
for (var fn in this) { for (var fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
...@@ -2978,8 +3002,8 @@ function MultiDragPlugin() { ...@@ -2978,8 +3002,8 @@ function MultiDragPlugin() {
setData: function setData(dataTransfer, dragEl) { setData: function setData(dataTransfer, dragEl) {
var data = ''; var data = '';
if (multiDragElements.length) { if (multiDragElements.length && multiDragSortable === el) {
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent; data += (!i ? '' : ', ') + multiDragElements[i].textContent;
} }
} else { } else {
...@@ -3028,7 +3052,7 @@ function MultiDragPlugin() { ...@@ -3028,7 +3052,7 @@ function MultiDragPlugin() {
rootEl = _ref3.rootEl; rootEl = _ref3.rootEl;
insertMultiDragClones(false, rootEl); insertMultiDragClones(false, rootEl);
for (var i = 0; i < multiDragClones.length; i++) { for (var i in multiDragClones) {
css(multiDragClones[i], 'display', ''); css(multiDragClones[i], 'display', '');
} }
...@@ -3396,7 +3420,7 @@ function MultiDragPlugin() { ...@@ -3396,7 +3420,7 @@ function MultiDragPlugin() {
if (evt && evt.button !== 0) return; if (evt && evt.button !== 0) return;
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false); toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false);
dispatchEvent({ dispatchEvent({
sortable: this.sortable, sortable: this.sortable,
...@@ -3450,8 +3474,8 @@ function MultiDragPlugin() { ...@@ -3450,8 +3474,8 @@ function MultiDragPlugin() {
}, },
eventOptions: function eventOptions() { eventOptions: function eventOptions() {
return { return {
items: multiDragElements, items: _toConsumableArray(multiDragElements),
clones: multiDragClones clones: [].concat(multiDragClones)
}; };
} }
}); });
...@@ -3487,7 +3511,7 @@ function insertMultiDragClones(elementsInserted, rootEl) { ...@@ -3487,7 +3511,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
} }
function removeMultiDragElements() { function removeMultiDragElements() {
for (var i = 0; i < multiDragElements.length; i++) { for (var i in multiDragElements) {
if (multiDragElements[i] === dragEl$1) continue; if (multiDragElements[i] === dragEl$1) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]); multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
} }
......
plugins/AutoScroll/AutoScroll.js
浏览文件 @ c7a0a991
...@@ -29,7 +29,6 @@ function AutoScrollPlugin() { ...@@ -29,7 +29,6 @@ function AutoScrollPlugin() {
scroll: true, scroll: true,
scrollSensitivity: 30, scrollSensitivity: 30,
scrollSpeed: 10, scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true bubbleScroll: true
}; };
......
plugins/AutoScroll/README.md
浏览文件 @ c7a0a991
...@@ -4,7 +4,7 @@ Demo: ...@@ -4,7 +4,7 @@ Demo:
- `window`: https://jsbin.com/dosilir/edit?js,output - `window`: https://jsbin.com/dosilir/edit?js,output
- `overflow: hidden`: https://jsbin.com/xecihez/edit?html,js,output - `overflow: hidden`: https://jsbin.com/xecihez/edit?html,js,output
**INFO: This plugin is a default plugin, and is included in the default UMD and ESM builds of Sortable** **This plugin is a default plugin, and is included in the default UMD and ESM builds of Sortable**
--- ---
...@@ -14,7 +14,7 @@ Demo: ...@@ -14,7 +14,7 @@ Demo:
```js ```js
new Sortable(el, { new Sortable(el, {
scroll: true, // or HTMLElement scroll: true, // Enable the plugin. Can be HTMLElement.
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling 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. scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px, speed of the scrolling scrollSpeed: 10, // px, speed of the scrolling
...@@ -26,9 +26,21 @@ new Sortable(el, { ...@@ -26,9 +26,21 @@ new Sortable(el, {
--- ---
#### `scroll` option
Enables the plugin. Defaults to `true`. May also be set to an HTMLElement which will be where autoscrolling is rooted.
Demo:
- `window`: https://jsbin.com/dosilir/edit?js,output
- `overflow: hidden`: https://jsbin.com/xecihez/edit?html,js,output
---
#### `scrollFn` option #### `scrollFn` option
Defines function that will be used for autoscrolling. el.scrollTop/el.scrollLeft is used by default. Defines function that will be used for autoscrolling. el.scrollTop/el.scrollLeft is used by default.
Useful when you have custom scrollbar with dedicated scroll function. Useful when you have custom scrollbar with dedicated scroll function.
This function should return `'continue'` if it wishes to allow Sortable's native autoscrolling.
--- ---
......
plugins/MultiDrag/MultiDrag.js
浏览文件 @ c7a0a991
...@@ -26,7 +26,7 @@ let multiDragElements = [], ...@@ -26,7 +26,7 @@ let multiDragElements = [],
clonesHidden; clonesHidden;
function MultiDragPlugin() { function MultiDragPlugin() {
function MultiDrag(sortable) { function MultiDrag(sortable, el) {
// Bind all private methods // Bind all private methods
for (let fn in this) { for (let fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
...@@ -45,8 +45,8 @@ function MultiDragPlugin() { ...@@ -45,8 +45,8 @@ function MultiDragPlugin() {
selectedClass: 'sortable-selected', selectedClass: 'sortable-selected',
setData(dataTransfer, dragEl) { setData(dataTransfer, dragEl) {
let data = ''; let data = '';
if (multiDragElements.length) { if (multiDragElements.length && multiDragSortable === el) {
for (let i = 0; i < multiDragElements.length; i++) { for (let i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent; data += (!i ? '' : ', ') + multiDragElements[i].textContent;
} }
} else { } else {
...@@ -90,7 +90,7 @@ function MultiDragPlugin() { ...@@ -90,7 +90,7 @@ function MultiDragPlugin() {
showClone({ cloneNowShown, rootEl}) { showClone({ cloneNowShown, rootEl}) {
insertMultiDragClones(false, rootEl); insertMultiDragClones(false, rootEl);
for (let i = 0; i < multiDragClones.length; i++) { for (let i in multiDragClones) {
css(multiDragClones[i], 'display', ''); css(multiDragClones[i], 'display', '');
} }
...@@ -449,7 +449,7 @@ function MultiDragPlugin() { ...@@ -449,7 +449,7 @@ function MultiDragPlugin() {
// Only deselect if left click // Only deselect if left click
if (evt && evt.button !== 0) return; if (evt && evt.button !== 0) return;
for (let i = 0; i < multiDragElements.length; i++) { for (let i in multiDragElements) {
toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false); toggleClass(multiDragElements[i], this.sortable.options.selectedClass, false);
dispatchEvent({ dispatchEvent({
sortable: this.sortable, sortable: this.sortable,
...@@ -499,8 +499,8 @@ function MultiDragPlugin() { ...@@ -499,8 +499,8 @@ function MultiDragPlugin() {
}, },
eventOptions() { eventOptions() {
return { return {
items: multiDragElements, items: [...multiDragElements],
clones: multiDragClones clones: [...multiDragClones]
}; };
} }
}); });
...@@ -533,7 +533,7 @@ function insertMultiDragClones(elementsInserted, rootEl) { ...@@ -533,7 +533,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
} }
function removeMultiDragElements() { function removeMultiDragElements() {
for (let i = 0; i < multiDragElements.length; i++) { for (let i in multiDragElements) {
if (multiDragElements[i] === dragEl) continue; if (multiDragElements[i] === dragEl) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]); multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
} }
......
plugins/OnSpill/OnSpill.js
浏览文件 @ c7a0a991
...@@ -10,11 +10,12 @@ const drop = function({ ...@@ -10,11 +10,12 @@ const drop = function({
hideGhostForTarget, hideGhostForTarget,
unhideGhostForTarget unhideGhostForTarget
}) { }) {
let fromSortable = putSortable || activeSortable;
hideGhostForTarget(); hideGhostForTarget();
let target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY); let target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY);
unhideGhostForTarget(); unhideGhostForTarget();
if (!(putSortable || activeSortable).el.contains(target)) { if (fromSortable && !fromSortable.el.contains(target)) {
dispatchSortableEvent('spill'); dispatchSortableEvent('spill');
this.onSpill(dragEl); this.onSpill(dragEl);
} }
......
plugins/OnSpill/README.md
浏览文件 @ c7a0a991
# OnSpill Plugins # 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. 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**
--- ---
......
src/EventDispatcher.js
浏览文件 @ c7a0a991
...@@ -8,7 +8,7 @@ export default function dispatchEvent( ...@@ -8,7 +8,7 @@ export default function dispatchEvent(
targetEl, cloneEl, toEl, fromEl, targetEl, cloneEl, toEl, fromEl,
oldIndex, newIndex, oldIndex, newIndex,
oldDraggableIndex, newDraggableIndex, oldDraggableIndex, newDraggableIndex,
originalEvt, putSortable originalEvt, putSortable, eventOptions
} }
) { ) {
sortable = (sortable || rootEl[expando]); sortable = (sortable || rootEl[expando]);
...@@ -40,9 +40,9 @@ export default function dispatchEvent( ...@@ -40,9 +40,9 @@ export default function dispatchEvent(
evt.originalEvent = originalEvt; evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
let eventOptions = PluginManager.getEventOptions(name, sortable); let allEventOptions = { ...eventOptions, ...PluginManager.getEventOptions(name, sortable) };
for (let option in eventOptions) { for (let option in allEventOptions) {
evt[option] = eventOptions[option]; evt[option] = allEventOptions[option];
} }
if (rootEl) { if (rootEl) {
......
src/Sortable.js
浏览文件 @ c7a0a991
...@@ -221,7 +221,7 @@ let dragEl, ...@@ -221,7 +221,7 @@ let dragEl,
* @return {HTMLElement} Element of the first found nearest Sortable * @return {HTMLElement} Element of the first found nearest Sortable
*/ */
_detectNearestEmptySortable = function(x, y) { _detectNearestEmptySortable = function(x, y) {
for (let i = 0; i < sortables.length; i++) { for (let i in sortables) {
if (lastChild(sortables[i])) continue; if (lastChild(sortables[i])) continue;
let rect = getRect(sortables[i]), let rect = getRect(sortables[i]),
...@@ -1338,6 +1338,8 @@ Sortable.prototype = /** @lends Sortable.prototype */ { ...@@ -1338,6 +1338,8 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
sortable: this, sortable: this,
name: 'unchoose', name: 'unchoose',
toEl: parentEl, toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt originalEvt: evt
}); });
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或