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/
### Getting Started
Via npm
Install with NPM:
```bash
$ npm install sortablejs --save
......@@ -66,7 +64,7 @@ Import into your project:
import Sortable from 'sortablejs';
// 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)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
......@@ -81,13 +79,14 @@ Sortable.mount(MultiDrag, Swap);
// 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);
```
<br/>
---
### Usage
```html
......@@ -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
```js
var sortable = new Sortable(el, {
......@@ -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
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.
......@@ -728,7 +702,28 @@ Create new instance.
##### 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 @@
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 plugins = [];
......@@ -671,7 +691,8 @@
oldDraggableIndex = _ref.oldDraggableIndex,
newDraggableIndex = _ref.newDraggableIndex,
originalEvt = _ref.originalEvt,
putSortable = _ref.putSortable;
putSortable = _ref.putSortable,
eventOptions = _ref.eventOptions;
sortable = sortable || rootEl[expando];
var evt,
options = sortable.options,
......@@ -697,10 +718,11 @@
evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
var eventOptions = PluginManager.getEventOptions(name, sortable);
for (var option in eventOptions) {
evt[option] = eventOptions[option];
var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable));
for (var option in allEventOptions) {
evt[option] = allEventOptions[option];
}
if (rootEl) {
......@@ -1001,7 +1023,7 @@
* @return {HTMLElement} Element of the first found nearest Sortable
*/
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
for (var i = 0; i < sortables.length; i++) {
for (var i in sortables) {
if (lastChild(sortables[i])) continue;
var rect = getRect(sortables[i]),
threshold = sortables[i][expando].options.emptyInsertThreshold,
......@@ -2060,6 +2082,8 @@
sortable: this,
name: 'unchoose',
toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt
});
......@@ -2590,7 +2614,6 @@
scroll: true,
scrollSensitivity: 30,
scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true
}; // Bind all private methods
......@@ -2811,11 +2834,12 @@
dispatchSortableEvent = _ref.dispatchSortableEvent,
hideGhostForTarget = _ref.hideGhostForTarget,
unhideGhostForTarget = _ref.unhideGhostForTarget;
var fromSortable = putSortable || activeSortable;
hideGhostForTarget();
var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY);
unhideGhostForTarget();
if (!(putSortable || activeSortable).el.contains(target)) {
if (fromSortable && !fromSortable.el.contains(target)) {
dispatchSortableEvent('spill');
this.onSpill(dragEl);
}
......@@ -2964,7 +2988,7 @@
clonesHidden;
function MultiDragPlugin() {
function MultiDrag(sortable) {
function MultiDrag(sortable, el) {
// Bind all private methods
for (var fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
......@@ -2984,8 +3008,8 @@
setData: function setData(dataTransfer, dragEl) {
var data = '';
if (multiDragElements.length) {
for (var i = 0; i < multiDragElements.length; i++) {
if (multiDragElements.length && multiDragSortable === el) {
for (var i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent;
}
} else {
......@@ -3034,7 +3058,7 @@
rootEl = _ref3.rootEl;
insertMultiDragClones(false, rootEl);
for (var i = 0; i < multiDragClones.length; i++) {
for (var i in multiDragClones) {
css(multiDragClones[i], 'display', '');
}
......@@ -3402,7 +3426,7 @@
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);
dispatchEvent({
sortable: this.sortable,
......@@ -3456,8 +3480,8 @@
},
eventOptions: function eventOptions() {
return {
items: multiDragElements,
clones: multiDragClones
items: _toConsumableArray(multiDragElements),
clones: [].concat(multiDragClones)
};
}
});
......@@ -3493,7 +3517,7 @@
}
function removeMultiDragElements() {
for (var i = 0; i < multiDragElements.length; i++) {
for (var i in multiDragElements) {
if (multiDragElements[i] === dragEl$1) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
}
......@@ -3507,4 +3531,4 @@
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';
export default ([
{
input: 'entry/entry-modular.js',
input: 'entry/entry-core.js',
output: Object.assign({}, build.output, {
file: 'modular/sortable.modular.esm.js',
file: 'modular/sortable.core.esm.js',
format: 'esm'
})
},
......
modular/sortable.complete.esm.js
浏览文件 @ c7a0a991
......@@ -106,6 +106,26 @@ function _objectWithoutProperties(source, excluded) {
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 plugins = [];
......@@ -665,7 +685,8 @@ function dispatchEvent(_ref) {
oldDraggableIndex = _ref.oldDraggableIndex,
newDraggableIndex = _ref.newDraggableIndex,
originalEvt = _ref.originalEvt,
putSortable = _ref.putSortable;
putSortable = _ref.putSortable,
eventOptions = _ref.eventOptions;
sortable = sortable || rootEl[expando];
var evt,
options = sortable.options,
......@@ -691,10 +712,11 @@ function dispatchEvent(_ref) {
evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
var eventOptions = PluginManager.getEventOptions(name, sortable);
for (var option in eventOptions) {
evt[option] = eventOptions[option];
var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable));
for (var option in allEventOptions) {
evt[option] = allEventOptions[option];
}
if (rootEl) {
......@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'),
* @return {HTMLElement} Element of the first found nearest Sortable
*/
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
for (var i = 0; i < sortables.length; i++) {
for (var i in sortables) {
if (lastChild(sortables[i])) continue;
var rect = getRect(sortables[i]),
threshold = sortables[i][expando].options.emptyInsertThreshold,
......@@ -2054,6 +2076,8 @@ Sortable$1.prototype =
sortable: this,
name: 'unchoose',
toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt
});
......@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() {
scroll: true,
scrollSensitivity: 30,
scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true
}; // Bind all private methods
......@@ -2805,11 +2828,12 @@ var drop = function drop(_ref) {
dispatchSortableEvent = _ref.dispatchSortableEvent,
hideGhostForTarget = _ref.hideGhostForTarget,
unhideGhostForTarget = _ref.unhideGhostForTarget;
var fromSortable = putSortable || activeSortable;
hideGhostForTarget();
var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY);
unhideGhostForTarget();
if (!(putSortable || activeSortable).el.contains(target)) {
if (fromSortable && !fromSortable.el.contains(target)) {
dispatchSortableEvent('spill');
this.onSpill(dragEl);
}
......@@ -2958,7 +2982,7 @@ dragStarted = false,
clonesHidden;
function MultiDragPlugin() {
function MultiDrag(sortable) {
function MultiDrag(sortable, el) {
// Bind all private methods
for (var fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
......@@ -2978,8 +3002,8 @@ function MultiDragPlugin() {
setData: function setData(dataTransfer, dragEl) {
var data = '';
if (multiDragElements.length) {
for (var i = 0; i < multiDragElements.length; i++) {
if (multiDragElements.length && multiDragSortable === el) {
for (var i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent;
}
} else {
......@@ -3028,7 +3052,7 @@ function MultiDragPlugin() {
rootEl = _ref3.rootEl;
insertMultiDragClones(false, rootEl);
for (var i = 0; i < multiDragClones.length; i++) {
for (var i in multiDragClones) {
css(multiDragClones[i], 'display', '');
}
......@@ -3396,7 +3420,7 @@ function MultiDragPlugin() {
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);
dispatchEvent({
sortable: this.sortable,
......@@ -3450,8 +3474,8 @@ function MultiDragPlugin() {
},
eventOptions: function eventOptions() {
return {
items: multiDragElements,
clones: multiDragClones
items: _toConsumableArray(multiDragElements),
clones: [].concat(multiDragClones)
};
}
});
......@@ -3487,7 +3511,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
}
function removeMultiDragElements() {
for (var i = 0; i < multiDragElements.length; i++) {
for (var i in multiDragElements) {
if (multiDragElements[i] === dragEl$1) continue;
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) {
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 plugins = [];
......@@ -665,7 +685,8 @@ function dispatchEvent(_ref) {
oldDraggableIndex = _ref.oldDraggableIndex,
newDraggableIndex = _ref.newDraggableIndex,
originalEvt = _ref.originalEvt,
putSortable = _ref.putSortable;
putSortable = _ref.putSortable,
eventOptions = _ref.eventOptions;
sortable = sortable || rootEl[expando];
var evt,
options = sortable.options,
......@@ -691,10 +712,11 @@ function dispatchEvent(_ref) {
evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
var eventOptions = PluginManager.getEventOptions(name, sortable);
for (var option in eventOptions) {
evt[option] = eventOptions[option];
var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable));
for (var option in allEventOptions) {
evt[option] = allEventOptions[option];
}
if (rootEl) {
......@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'),
* @return {HTMLElement} Element of the first found nearest Sortable
*/
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
for (var i = 0; i < sortables.length; i++) {
for (var i in sortables) {
if (lastChild(sortables[i])) continue;
var rect = getRect(sortables[i]),
threshold = sortables[i][expando].options.emptyInsertThreshold,
......@@ -2054,6 +2076,8 @@ Sortable$1.prototype =
sortable: this,
name: 'unchoose',
toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt
});
......@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() {
scroll: true,
scrollSensitivity: 30,
scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true
}; // Bind all private methods
......@@ -2898,7 +2921,7 @@ dragStarted = false,
clonesHidden;
function MultiDragPlugin() {
function MultiDrag(sortable) {
function MultiDrag(sortable, el) {
// Bind all private methods
for (var fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
......@@ -2918,8 +2941,8 @@ function MultiDragPlugin() {
setData: function setData(dataTransfer, dragEl) {
var data = '';
if (multiDragElements.length) {
for (var i = 0; i < multiDragElements.length; i++) {
if (multiDragElements.length && multiDragSortable === el) {
for (var i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent;
}
} else {
......@@ -2968,7 +2991,7 @@ function MultiDragPlugin() {
rootEl = _ref3.rootEl;
insertMultiDragClones(false, rootEl);
for (var i = 0; i < multiDragClones.length; i++) {
for (var i in multiDragClones) {
css(multiDragClones[i], 'display', '');
}
......@@ -3336,7 +3359,7 @@ function MultiDragPlugin() {
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);
dispatchEvent({
sortable: this.sortable,
......@@ -3390,8 +3413,8 @@ function MultiDragPlugin() {
},
eventOptions: function eventOptions() {
return {
items: multiDragElements,
clones: multiDragClones
items: _toConsumableArray(multiDragElements),
clones: [].concat(multiDragClones)
};
}
});
......@@ -3427,7 +3450,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
}
function removeMultiDragElements() {
for (var i = 0; i < multiDragElements.length; i++) {
for (var i in multiDragElements) {
if (multiDragElements[i] === dragEl$1) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
}
......
modular/sortable.esm.js
浏览文件 @ c7a0a991
......@@ -106,6 +106,26 @@ function _objectWithoutProperties(source, excluded) {
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 plugins = [];
......@@ -665,7 +685,8 @@ function dispatchEvent(_ref) {
oldDraggableIndex = _ref.oldDraggableIndex,
newDraggableIndex = _ref.newDraggableIndex,
originalEvt = _ref.originalEvt,
putSortable = _ref.putSortable;
putSortable = _ref.putSortable,
eventOptions = _ref.eventOptions;
sortable = sortable || rootEl[expando];
var evt,
options = sortable.options,
......@@ -691,10 +712,11 @@ function dispatchEvent(_ref) {
evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
var eventOptions = PluginManager.getEventOptions(name, sortable);
for (var option in eventOptions) {
evt[option] = eventOptions[option];
var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable));
for (var option in allEventOptions) {
evt[option] = allEventOptions[option];
}
if (rootEl) {
......@@ -995,7 +1017,7 @@ supportDraggable = 'draggable' in document.createElement('div'),
* @return {HTMLElement} Element of the first found nearest Sortable
*/
_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
for (var i = 0; i < sortables.length; i++) {
for (var i in sortables) {
if (lastChild(sortables[i])) continue;
var rect = getRect(sortables[i]),
threshold = sortables[i][expando].options.emptyInsertThreshold,
......@@ -2054,6 +2076,8 @@ Sortable$1.prototype =
sortable: this,
name: 'unchoose',
toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt
});
......@@ -2584,7 +2608,6 @@ function AutoScrollPlugin() {
scroll: true,
scrollSensitivity: 30,
scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true
}; // Bind all private methods
......@@ -2805,11 +2828,12 @@ var drop = function drop(_ref) {
dispatchSortableEvent = _ref.dispatchSortableEvent,
hideGhostForTarget = _ref.hideGhostForTarget,
unhideGhostForTarget = _ref.unhideGhostForTarget;
var fromSortable = putSortable || activeSortable;
hideGhostForTarget();
var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY);
unhideGhostForTarget();
if (!(putSortable || activeSortable).el.contains(target)) {
if (fromSortable && !fromSortable.el.contains(target)) {
dispatchSortableEvent('spill');
this.onSpill(dragEl);
}
......@@ -2958,7 +2982,7 @@ dragStarted = false,
clonesHidden;
function MultiDragPlugin() {
function MultiDrag(sortable) {
function MultiDrag(sortable, el) {
// Bind all private methods
for (var fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
......@@ -2978,8 +3002,8 @@ function MultiDragPlugin() {
setData: function setData(dataTransfer, dragEl) {
var data = '';
if (multiDragElements.length) {
for (var i = 0; i < multiDragElements.length; i++) {
if (multiDragElements.length && multiDragSortable === el) {
for (var i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent;
}
} else {
......@@ -3028,7 +3052,7 @@ function MultiDragPlugin() {
rootEl = _ref3.rootEl;
insertMultiDragClones(false, rootEl);
for (var i = 0; i < multiDragClones.length; i++) {
for (var i in multiDragClones) {
css(multiDragClones[i], 'display', '');
}
......@@ -3396,7 +3420,7 @@ function MultiDragPlugin() {
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);
dispatchEvent({
sortable: this.sortable,
......@@ -3450,8 +3474,8 @@ function MultiDragPlugin() {
},
eventOptions: function eventOptions() {
return {
items: multiDragElements,
clones: multiDragClones
items: _toConsumableArray(multiDragElements),
clones: [].concat(multiDragClones)
};
}
});
......@@ -3487,7 +3511,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
}
function removeMultiDragElements() {
for (var i = 0; i < multiDragElements.length; i++) {
for (var i in multiDragElements) {
if (multiDragElements[i] === dragEl$1) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
}
......
plugins/AutoScroll/AutoScroll.js
浏览文件 @ c7a0a991
......@@ -29,7 +29,6 @@ function AutoScrollPlugin() {
scroll: true,
scrollSensitivity: 30,
scrollSpeed: 10,
scrollElement: null,
bubbleScroll: true
};
......
plugins/AutoScroll/README.md
浏览文件 @ c7a0a991
......@@ -4,7 +4,7 @@ Demo:
- `window`: https://jsbin.com/dosilir/edit?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:
```js
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
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px, speed of the scrolling
......@@ -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
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.
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 = [],
clonesHidden;
function MultiDragPlugin() {
function MultiDrag(sortable) {
function MultiDrag(sortable, el) {
// Bind all private methods
for (let fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
......@@ -45,8 +45,8 @@ function MultiDragPlugin() {
selectedClass: 'sortable-selected',
setData(dataTransfer, dragEl) {
let data = '';
if (multiDragElements.length) {
for (let i = 0; i < multiDragElements.length; i++) {
if (multiDragElements.length && multiDragSortable === el) {
for (let i in multiDragElements) {
data += (!i ? '' : ', ') + multiDragElements[i].textContent;
}
} else {
......@@ -90,7 +90,7 @@ function MultiDragPlugin() {
showClone({ cloneNowShown, rootEl}) {
insertMultiDragClones(false, rootEl);
for (let i = 0; i < multiDragClones.length; i++) {
for (let i in multiDragClones) {
css(multiDragClones[i], 'display', '');
}
......@@ -449,7 +449,7 @@ function MultiDragPlugin() {
// Only deselect if left click
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);
dispatchEvent({
sortable: this.sortable,
......@@ -499,8 +499,8 @@ function MultiDragPlugin() {
},
eventOptions() {
return {
items: multiDragElements,
clones: multiDragClones
items: [...multiDragElements],
clones: [...multiDragClones]
};
}
});
......@@ -533,7 +533,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
}
function removeMultiDragElements() {
for (let i = 0; i < multiDragElements.length; i++) {
for (let i in multiDragElements) {
if (multiDragElements[i] === dragEl) continue;
multiDragElements[i].parentNode && multiDragElements[i].parentNode.removeChild(multiDragElements[i]);
}
......
plugins/OnSpill/OnSpill.js
浏览文件 @ c7a0a991
......@@ -10,11 +10,12 @@ const drop = function({
hideGhostForTarget,
unhideGhostForTarget
}) {
let fromSortable = putSortable || activeSortable;
hideGhostForTarget();
let target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY);
unhideGhostForTarget();
if (!(putSortable || activeSortable).el.contains(target)) {
if (fromSortable && !fromSortable.el.contains(target)) {
dispatchSortableEvent('spill');
this.onSpill(dragEl);
}
......
plugins/OnSpill/README.md
浏览文件 @ c7a0a991
# 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**
---
......
src/EventDispatcher.js
浏览文件 @ c7a0a991
......@@ -8,7 +8,7 @@ export default function dispatchEvent(
targetEl, cloneEl, toEl, fromEl,
oldIndex, newIndex,
oldDraggableIndex, newDraggableIndex,
originalEvt, putSortable
originalEvt, putSortable, eventOptions
}
) {
sortable = (sortable || rootEl[expando]);
......@@ -40,9 +40,9 @@ export default function dispatchEvent(
evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
let eventOptions = PluginManager.getEventOptions(name, sortable);
for (let option in eventOptions) {
evt[option] = eventOptions[option];
let allEventOptions = { ...eventOptions, ...PluginManager.getEventOptions(name, sortable) };
for (let option in allEventOptions) {
evt[option] = allEventOptions[option];
}
if (rootEl) {
......
src/Sortable.js
浏览文件 @ c7a0a991
......@@ -221,7 +221,7 @@ let dragEl,
* @return {HTMLElement} Element of the first found nearest Sortable
*/
_detectNearestEmptySortable = function(x, y) {
for (let i = 0; i < sortables.length; i++) {
for (let i in sortables) {
if (lastChild(sortables[i])) continue;
let rect = getRect(sortables[i]),
......@@ -1338,6 +1338,8 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
sortable: this,
name: 'unchoose',
toEl: parentEl,
newIndex: null,
newDraggableIndex: null,
originalEvt: evt
});
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或