Browse Source

Merge pull request #2 from 2xAA/expose-original-event

Expose original event
pull/1262/head
Sam Wray 7 years ago committed by GitHub
parent
commit
ac7c17eac4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      .gitignore
  2. 4
      CONTRIBUTING.md
  3. 19
      Gruntfile.js
  4. 4
      ISSUE_TEMPLATE.md
  5. 30
      README.md
  6. 192
      Sortable.js
  7. 5
      Sortable.min.js
  8. 2
      component.json
  9. 12
      package.json
  10. 14
      test/e2e/index-page-model.js
  11. 22
      test/e2e/index.js

1
.gitignore vendored

@ -3,3 +3,4 @@ mock.png
.*.sw*
.build*
jquery.fn.*
.idea/

4
CONTRIBUTING.md

@ -2,7 +2,7 @@
### Issue
1. Try [dev](https://github.com/RubaXa/Sortable/tree/dev/)-branch, perhaps the problem has been solved;
1. Try [master](https://github.com/RubaXa/Sortable/tree/master/)-branch, perhaps the problem has been solved;
2. [Use the search](https://github.com/RubaXa/Sortable/search?type=Issues&q=problem), maybe already have an answer;
3. If not found, create example on [jsbin.com (draft)](http://jsbin.com/zunibaxada/1/edit?html,js,output) and describe the problem.
@ -11,7 +11,7 @@
### Pull Request
1. Before PR run `grunt`;
2. Only into [dev](https://github.com/RubaXa/Sortable/tree/dev/)-branch.
2. Only into [master](https://github.com/RubaXa/Sortable/tree/master/)-branch.
### Setup

19
Gruntfile.js

@ -39,7 +39,20 @@ module.exports = function (grunt) {
}
},
jquery: {}
jquery: {},
testcafe: {
test: {
options: {
files: ['test/e2e/index.js'],
browsers: ['chrome'],
startApp: {
command: 'npm run http-server'
},
skipJsErrors: true //https://github.com/RubaXa/Sortable/issues/1041
}
}
}
});
@ -82,7 +95,9 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-version');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-testcafe');
grunt.registerTask('tests', ['jshint']);
grunt.registerTask('default', ['tests', 'version', 'uglify:dist']);
grunt.registerTask('build', ['version', 'uglify:dist']);
grunt.registerTask('default', ['tests', 'build', 'testcafe']);
};

4
ISSUE_TEMPLATE.md

@ -1,8 +1,8 @@
Before you create a issue, check it:
Before you create an issue, check it:
1. Try [master](https://github.com/RubaXa/Sortable/tree/master/)-branch, perhaps the problem has been solved;
2. [Use the search](https://github.com/RubaXa/Sortable/search?q=problem), maybe already have an answer;
3. If not found, create example on [jsbin.com (draft)](http://jsbin.com/vojixek/edit?html,js,output) and describe the problem.
3. If not found, create an example on [jsbin.com (draft)](http://jsbin.com/vojixek/edit?html,js,output) and describe the problem.
Bindings:
- Angular

30
README.md

@ -121,31 +121,31 @@ var sortable = new Sortable(el, {
// Element dragging ended
onEnd: function (/**Event*/evt) {
evt.oldIndex; // element's old index within parent
evt.newIndex; // element's new index within parent
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
},
// Element is dropped into the list from another list
onAdd: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
evt.from; // previous list
// + indexes from onEnd
// same properties as onEnd
},
// Changed sorting within list
onUpdate: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
// + indexes from onEnd
// same properties as onEnd
},
// Called by any change to the list (add / update / remove)
onSort: function (/**Event*/evt) {
// same properties as onUpdate
// same properties as onEnd
},
// Element is removed from the list into another list
onRemove: function (/**Event*/evt) {
// same properties as onUpdate
// same properties as onEnd
},
// Attempt to drag a filtered element
@ -561,16 +561,12 @@ Link to the active instance.
### CDN
```html
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.1/Sortable.min.js"></script>
<!-- jsDelivr :: Sortable (http://www.jsdelivr.com/) -->
<script src="//cdn.jsdelivr.net/sortable/1.6.1/Sortable.min.js"></script>
<!-- jsDelivr :: Sortable (https://www.jsdelivr.com/package/npm/sortablejs) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.6.1/Sortable.min.js"></script>
<!-- jsDelivr :: Sortable :: Latest (http://www.jsdelivr.com/) -->
<script src="//cdn.jsdelivr.net/sortable/latest/Sortable.min.js"></script>
<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
```

192
Sortable.js

@ -20,7 +20,7 @@
})(function sortableFactory() {
"use strict";
if (typeof window == "undefined" || !window.document) {
if (typeof window === "undefined" || !window.document) {
return function sortableError() {
throw new Error("Sortable.js requires a window with a document");
};
@ -55,6 +55,8 @@
moved,
forRepaintDummy,
/** @const */
R_SPACE = /\s+/g,
R_FLOAT = /left|right|inline/,
@ -64,16 +66,18 @@
win = window,
document = win.document,
parseInt = win.parseInt,
setTimeout = win.setTimeout,
$ = win.jQuery || win.Zepto,
Polymer = win.Polymer,
captureMode = false,
passiveMode = false,
supportDraggable = !!('draggable' in document.createElement('div')),
supportDraggable = ('draggable' in document.createElement('div')),
supportCssPointerEvents = (function (el) {
// false when IE11
if (!!navigator.userAgent.match(/Trident.*rv[ :]?11\./)) {
if (!!navigator.userAgent.match(/(?:Trident.*rv[ :]?11\.|msie)/i)) {
return false;
}
el = document.createElement('x');
@ -89,6 +93,8 @@
savedInputChecked = [],
touchDragOverListeners = [],
alwaysFalse = function () { return false; },
_autoScroll = _throttle(function (/**Event*/evt, /**Object*/options, /**HTMLElement*/rootEl) {
// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
if (rootEl && options.scroll) {
@ -178,8 +184,11 @@
_prepareGroup = function (options) {
function toFn(value, pull) {
if (value === void 0 || value === true) {
if (value == null || value === true) {
value = group.name;
if (value == null) {
return alwaysFalse;
}
}
if (typeof value === 'function') {
@ -214,6 +223,20 @@
}
;
// Detect support a passive mode
try {
window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
get: function () {
// `false`, because everything starts to work incorrectly and instead of d'n'd,
// begins the page has scrolled.
passiveMode = false;
captureMode = {
capture: false,
passive: passiveMode
};
}
}));
} catch (err) {}
/**
* @class Sortable
@ -234,7 +257,7 @@
// Default options
var defaults = {
group: Math.random(),
group: null,
sort: true,
disabled: false,
store: null,
@ -261,7 +284,8 @@
fallbackClass: 'sortable-fallback',
fallbackOnBody: false,
fallbackTolerance: 0,
fallbackOffset: {x: 0, y: 0}
fallbackOffset: {x: 0, y: 0},
supportPointer: Sortable.supportPointer !== false
};
@ -285,7 +309,7 @@
// Bind events
_on(el, 'mousedown', this._onTapStart);
_on(el, 'touchstart', this._onTapStart);
_on(el, 'pointerdown', this._onTapStart);
options.supportPointer && _on(el, 'pointerdown', this._onTapStart);
if (this.nativeDraggable) {
_on(el, 'dragover', this);
@ -326,6 +350,10 @@
return; // only left button or enabled
}
// cancel dnd if original target is content editable
if (originalTarget.isContentEditable) {
return;
}
target = _closest(target, options.draggable, el);
@ -344,7 +372,7 @@
// Check filter
if (typeof filter === 'function') {
if (filter.call(this, evt, target, this)) {
_dispatchEvent(_this, originalTarget, 'filter', target, el, startIndex);
_dispatchEvent(_this, originalTarget, 'filter', target, el, el, startIndex);
preventOnFilter && evt.preventDefault();
return; // cancel dnd
}
@ -354,7 +382,7 @@
criteria = _closest(originalTarget, criteria.trim(), el);
if (criteria) {
_dispatchEvent(_this, criteria, 'filter', target, el, startIndex);
_dispatchEvent(_this, criteria, 'filter', target, el, el, startIndex);
return true;
}
});
@ -394,7 +422,7 @@
this._lastX = (touch || evt).clientX;
this._lastY = (touch || evt).clientY;
dragEl.style['will-change'] = 'transform';
dragEl.style['will-change'] = 'all';
dragStartFn = function () {
// Delayed drag has been triggered
@ -411,7 +439,7 @@
_this._triggerDragStart(evt, touch);
// Drag start event
_dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, oldIndex);
_dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, rootEl, oldIndex);
};
// Disable "draggable"
@ -422,8 +450,8 @@
_on(ownerDocument, 'mouseup', _this._onDrop);
_on(ownerDocument, 'touchend', _this._onDrop);
_on(ownerDocument, 'touchcancel', _this._onDrop);
_on(ownerDocument, 'pointercancel', _this._onDrop);
_on(ownerDocument, 'selectstart', _this);
options.supportPointer && _on(ownerDocument, 'pointercancel', _this._onDrop);
if (options.delay) {
// If the user moves the pointer or let go the click or touch
@ -434,7 +462,7 @@
_on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);
_on(ownerDocument, 'mousemove', _this._disableDelayedDrag);
_on(ownerDocument, 'touchmove', _this._disableDelayedDrag);
_on(ownerDocument, 'pointermove', _this._disableDelayedDrag);
options.supportPointer && _on(ownerDocument, 'pointermove', _this._disableDelayedDrag);
_this._dragStartTimer = setTimeout(dragStartFn, options.delay);
} else {
@ -481,7 +509,7 @@
try {
if (document.selection) {
// Timeout neccessary for IE9
setTimeout(function () {
_nextTick(function () {
document.selection.empty();
});
} else {
@ -502,7 +530,7 @@
Sortable.active = this;
// Drag start event
_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, oldIndex);
_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, rootEl, oldIndex);
} else {
this._nulling();
}
@ -521,9 +549,14 @@
_css(ghostEl, 'display', 'none');
}
var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY),
parent = target,
i = touchDragOverListeners.length;
var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
var parent = target;
var i = touchDragOverListeners.length;
if (target && target.shadowRoot) {
target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);
parent = target;
}
if (parent) {
do {
@ -621,22 +654,26 @@
},
_onDragStart: function (/**Event*/evt, /**boolean*/useFallback) {
var dataTransfer = evt.dataTransfer,
options = this.options;
var _this = this;
var dataTransfer = evt.dataTransfer;
var options = _this.options;
this._offUpEvents();
_this._offUpEvents();
if (activeGroup.checkPull(this, this, dragEl, evt)) {
if (activeGroup.checkPull(_this, _this, dragEl, evt)) {
cloneEl = _clone(dragEl);
cloneEl.draggable = false;
cloneEl.style['will-change'] = '';
_css(cloneEl, 'display', 'none');
_toggleClass(cloneEl, this.options.chosenClass, false);
_toggleClass(cloneEl, _this.options.chosenClass, false);
// #1143: IFrame support workaround
_this._cloneId = _nextTick(function () {
rootEl.insertBefore(cloneEl, dragEl);
_dispatchEvent(this, rootEl, 'clone', dragEl);
_dispatchEvent(_this, rootEl, 'clone', dragEl);
});
}
_toggleClass(dragEl, options.dragClass, true);
@ -644,27 +681,36 @@
if (useFallback) {
if (useFallback === 'touch') {
// Bind touch events
_on(document, 'touchmove', this._onTouchMove);
_on(document, 'touchend', this._onDrop);
_on(document, 'touchcancel', this._onDrop);
_on(document, 'pointermove', this._onTouchMove);
_on(document, 'pointerup', this._onDrop);
_on(document, 'touchmove', _this._onTouchMove);
_on(document, 'touchend', _this._onDrop);
_on(document, 'touchcancel', _this._onDrop);
if (options.supportPointer) {
_on(document, 'pointermove', _this._onTouchMove);
_on(document, 'pointerup', _this._onDrop);
}
} else {
// Old brwoser
_on(document, 'mousemove', this._onTouchMove);
_on(document, 'mouseup', this._onDrop);
_on(document, 'mousemove', _this._onTouchMove);
_on(document, 'mouseup', _this._onDrop);
}
this._loopId = setInterval(this._emulateDragOver, 50);
_this._loopId = setInterval(_this._emulateDragOver, 50);
}
else {
if (dataTransfer) {
dataTransfer.effectAllowed = 'move';
options.setData && options.setData.call(this, dataTransfer, dragEl);
options.setData && options.setData.call(_this, dataTransfer, dragEl);
}
_on(document, 'drop', this);
setTimeout(this._dragStarted, 0);
_on(document, 'drop', _this);
// #1143: Бывает элемент с IFrame внутри блокирует `drop`,
// поэтому если вызвался `mouseover`, значит надо отменять весь d'n'd.
// Breaking Chrome 62+
// _on(document, 'mouseover', _this);
_this._dragStartId = _nextTick(_this._dragStarted);
}
},
@ -844,7 +890,7 @@
+ (prevRect.top - currentRect.top) + 'px,0)'
);
target.offsetWidth; // repaint
forRepaintDummy = target.offsetWidth; // repaint
_css(target, 'transition', 'all ' + ms + 'ms');
_css(target, 'transform', 'translate3d(0,0,0)');
@ -879,7 +925,11 @@
clearInterval(autoScroll.pid);
clearTimeout(this._dragStartTimer);
_cancelNextTick(this._cloneId);
_cancelNextTick(this._dragStartId);
// Unbind events
_off(document, 'mouseover', this);
_off(document, 'mousemove', this._onTouchMove);
if (this.nativeDraggable) {
@ -915,21 +965,21 @@
_toggleClass(dragEl, this.options.chosenClass, false);
// Drag stop event
_dispatchEvent(this, rootEl, 'unchoose', dragEl, rootEl, oldIndex);
_dispatchEvent(this, rootEl, 'unchoose', dragEl, parentEl, rootEl, oldIndex, null, evt);
if (rootEl !== parentEl) {
newIndex = _index(dragEl, options.draggable);
if (newIndex >= 0) {
// Add event
_dispatchEvent(null, parentEl, 'add', dragEl, rootEl, oldIndex, newIndex);
_dispatchEvent(null, parentEl, 'add', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
// Remove event
_dispatchEvent(this, rootEl, 'remove', dragEl, rootEl, oldIndex, newIndex);
_dispatchEvent(this, rootEl, 'remove', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
// drag from one list and drop into another
_dispatchEvent(null, parentEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
_dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
_dispatchEvent(null, parentEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
}
}
else {
@ -939,8 +989,8 @@
if (newIndex >= 0) {
// drag & drop within the same list
_dispatchEvent(this, rootEl, 'update', dragEl, rootEl, oldIndex, newIndex);
_dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
_dispatchEvent(this, rootEl, 'update', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
}
}
}
@ -951,7 +1001,7 @@
newIndex = oldIndex;
}
_dispatchEvent(this, rootEl, 'end', dragEl, rootEl, oldIndex, newIndex);
_dispatchEvent(this, rootEl, 'end', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
// Save sorting
this.save();
@ -1009,6 +1059,10 @@
}
break;
case 'mouseover':
this._onDrop(evt);
break;
case 'selectstart':
evt.preventDefault();
break;
@ -1256,7 +1310,7 @@
function _dispatchEvent(sortable, rootEl, name, targetEl, fromEl, startIndex, newIndex) {
function _dispatchEvent(sortable, rootEl, name, targetEl, toEl, fromEl, startIndex, newIndex, originalEvt) {
sortable = (sortable || rootEl[expando]);
var evt = document.createEvent('Event'),
@ -1265,7 +1319,7 @@
evt.initEvent(name, true, true);
evt.to = rootEl;
evt.to = toEl || rootEl;
evt.from = fromEl || rootEl;
evt.item = targetEl || rootEl;
evt.clone = cloneEl;
@ -1273,6 +1327,8 @@
evt.oldIndex = startIndex;
evt.newIndex = newIndex;
evt.originalEvent = originalEvt;
rootEl.dispatchEvent(evt);
if (options[onName]) {
@ -1298,6 +1354,8 @@
evt.relatedRect = targetRect || toEl.getBoundingClientRect();
evt.willInsertAfter = willInsertAfter;
evt.originalEvent = originalEvt;
fromEl.dispatchEvent(evt);
if (onMoveFn) {
@ -1421,15 +1479,20 @@
}
function _clone(el) {
return $
? $(el).clone(true)[0]
: (Polymer && Polymer.dom
? Polymer.dom(el).cloneNode(true)
: el.cloneNode(true)
);
if (Polymer && Polymer.dom) {
return Polymer.dom(el).cloneNode(true);
}
else if ($) {
return $(el).clone(true)[0];
}
else {
return el.cloneNode(true);
}
}
function _saveInputCheckedState(root) {
savedInputChecked.length = 0;
var inputs = root.getElementsByTagName('input');
var idx = inputs.length;
@ -1439,6 +1502,14 @@
}
}
function _nextTick(fn) {
return setTimeout(fn, 0);
}
function _cancelNextTick(id) {
return clearTimeout(id);
}
// Fixed #973:
_on(document, 'touchmove', function (evt) {
if (Sortable.active) {
@ -1446,17 +1517,6 @@
}
});
try {
window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
get: function () {
captureMode = {
capture: false,
passive: false
};
}
}));
} catch (err) {}
// Export utils
Sortable.utils = {
on: _on,
@ -1471,7 +1531,9 @@
closest: _closest,
toggleClass: _toggleClass,
clone: _clone,
index: _index
index: _index,
nextTick: _nextTick,
cancelNextTick: _cancelNextTick
};
@ -1486,6 +1548,6 @@
// Export
Sortable.version = '1.6.1';
Sortable.version = '1.7.0';
return Sortable;
});

5
Sortable.min.js vendored

File diff suppressed because one or more lines are too long

2
component.json

@ -1,7 +1,7 @@
{
"name": "Sortable",
"main": "Sortable.js",
"version": "1.6.1",
"version": "1.7.0",
"homepage": "http://rubaxa.github.io/Sortable/",
"repo": "RubaXa/Sortable",
"authors": [

12
package.json

@ -1,18 +1,22 @@
{
"name": "sortablejs",
"exportName": "Sortable",
"version": "1.6.1",
"version": "1.7.0",
"devDependencies": {
"grunt": "*",
"grunt-version": "*",
"grunt-contrib-jshint": "*",
"grunt-contrib-uglify": "*"
"grunt-contrib-uglify": "*",
"grunt-testcafe": "^0.15.0",
"grunt-version": "*",
"http-server": "^0.9.0",
"testcafe": "^0.16.0"
},
"description": "Minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports AngularJS and any CSS library, e.g. Bootstrap.",
"main": "Sortable.js",
"scripts": {
"test": "./node_modules/grunt/bin/grunt",
"prepublish": "./node_modules/grunt/bin/grunt"
"prepublish": "./node_modules/grunt/bin/grunt",
"http-server": "http-server -s ./"
},
"repository": {
"type": "git",

14
test/e2e/index-page-model.js

@ -0,0 +1,14 @@
import { Selector } from 'testcafe';
export default class IndexPage {
constructor () {
const listAContainer = Selector('#foo');
const listAItems = listAContainer.find('li');
this.listA = {
container: listAContainer,
items: listAItems,
getItem: text => listAItems.withText(text)
};
}
}

22
test/e2e/index.js

@ -0,0 +1,22 @@
import IndexPage from './index-page-model';
const indexPage = new IndexPage();
fixture `Tests`
.page('http://localhost:8080/index.html');
test('List A', async t => {
const listA = indexPage.listA;
const firstItem = listA.items.nth(0);
const secondItem = listA.items.nth(1);
const hippoText = 'Бегемот';
const foodText = 'Корм';
await t
.expect(firstItem.innerText).eql(hippoText)
.expect(secondItem.innerText).eql(foodText)
.dragToElement(firstItem, secondItem, { speed: 0.5 })
.expect(firstItem.innerText).eql(foodText)
.expect(secondItem.innerText).eql(hippoText);
});
Loading…
Cancel
Save