playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

+ master

pull/478/merge
RubaXa 10 years ago
parent
e912d00edb 71f4362e3c
commit
82240bf4a8
8 changed files with 95 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      README.md
  2. 89
      Sortable.js
  3. 4
      Sortable.min.js
  4. 2
      bower.json
  5. 2
      component.json
  6. 2
      ng-sortable.js
  7. 2
      package.json
  8. 5
      react-sortable-mixin.js

20
README.md
Unescape View File

@ -65,6 +65,10 @@ var sortable = new Sortable(el, {
ghostClass: "sortable-ghost", // Class name for the drop placeholder ghostClass: "sortable-ghost", // Class name for the drop placeholder
dataIdAttr: 'data-id', dataIdAttr: 'data-id',
forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
fallbackClass: "sortable-fallback" // Class name for the cloned DOM Element when using forceFallback
fallbackOnBody: false // Appends the cloned DOM Element into the Document's Body
scroll: true, // or HTMLElement scroll: true, // or HTMLElement
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 scrollSpeed: 10, // px
@ -253,6 +257,18 @@ Sortable.create(list, {
--- ---
#### `forceFallback` option
If set to `true`, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser.
This gives us the possiblity to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.
On top of that, the Fallback always generates a copy of that DOM Element and appends the class `fallbackClass` definied in the options. This behaviour controls the look of this 'dragged' Element.
Demo: http://jsbin.com/xinuyenabi/edit?html,css,js,output
---
#### `scroll` option #### `scroll` option
If set to `true`, the page (or sortable-area) scrolls when coming to an edge. If set to `true`, the page (or sortable-area) scrolls when coming to an edge.
@ -583,11 +599,11 @@ Link to the active instance.
```html ```html
<!-- CDNJS :: Sortable (https://cdnjs.com/) --> <!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.2.1/Sortable.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.2.2/Sortable.min.js"></script>
<!-- jsDelivr :: Sortable (http://www.jsdelivr.com/) --> <!-- jsDelivr :: Sortable (http://www.jsdelivr.com/) -->
<script src="//cdn.jsdelivr.net/sortable/1.2.1/Sortable.min.js"></script> <script src="//cdn.jsdelivr.net/sortable/1.2.2/Sortable.min.js"></script>
<!-- jsDelivr :: Sortable :: Latest (http://www.jsdelivr.com/) --> <!-- jsDelivr :: Sortable :: Latest (http://www.jsdelivr.com/) -->

89
Sortable.js
Unescape View File

@ -45,6 +45,8 @@
tapEvt, tapEvt,
touchEvt, touchEvt,
moved,
/** @const */ /** @const */
RSPACE = /\s+/g, RSPACE = /\s+/g,
@ -176,7 +178,10 @@
dropBubble: false, dropBubble: false,
dragoverBubble: false, dragoverBubble: false,
dataIdAttr: 'data-id', dataIdAttr: 'data-id',
delay: 0 delay: 0,
forceFallback: false,
fallbackClass: 'sortable-fallback',
fallbackOnBody: false
}; };
@ -206,7 +211,7 @@
// Bind all private methods // Bind all private methods
for (var fn in this) { for (var fn in this) {
if (fn.charAt(0) === '_') { if (fn.charAt(0) === '_') {
this[fn] = _bind(this, this[fn]); this[fn] = this[fn].bind(this);
} }
} }
@ -323,8 +328,12 @@
_on(ownerDocument, 'touchcancel', _this._onDrop); _on(ownerDocument, 'touchcancel', _this._onDrop);
if (options.delay) { if (options.delay) {
// If the user moves the pointer before the delay has been reached: // If the user moves the pointer or let go the click or touch
// before the delay has been reached:
// disable the delayed drag // disable the delayed drag
_on(ownerDocument, 'mouseup', _this._disableDelayedDrag);
_on(ownerDocument, 'touchend', _this._disableDelayedDrag);
_on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);
_on(ownerDocument, 'mousemove', _this._disableDelayedDrag); _on(ownerDocument, 'mousemove', _this._disableDelayedDrag);
_on(ownerDocument, 'touchmove', _this._disableDelayedDrag); _on(ownerDocument, 'touchmove', _this._disableDelayedDrag);
@ -339,7 +348,9 @@
var ownerDocument = this.el.ownerDocument; var ownerDocument = this.el.ownerDocument;
clearTimeout(this._dragStartTimer); clearTimeout(this._dragStartTimer);
_off(ownerDocument, 'mouseup', this._disableDelayedDrag);
_off(ownerDocument, 'touchend', this._disableDelayedDrag);
_off(ownerDocument, 'touchcancel', this._disableDelayedDrag);
_off(ownerDocument, 'mousemove', this._disableDelayedDrag); _off(ownerDocument, 'mousemove', this._disableDelayedDrag);
_off(ownerDocument, 'touchmove', this._disableDelayedDrag); _off(ownerDocument, 'touchmove', this._disableDelayedDrag);
}, },
@ -355,7 +366,7 @@
this._onDragStart(tapEvt, 'touch'); this._onDragStart(tapEvt, 'touch');
} }
else if (!supportDraggable) { else if (!supportDraggable || this.options.forceFallback) {
this._onDragStart(tapEvt, true); this._onDragStart(tapEvt, true);
} }
else { else {
@ -422,6 +433,14 @@
_onTouchMove: function (/**TouchEvent*/evt) { _onTouchMove: function (/**TouchEvent*/evt) {
if (tapEvt) { if (tapEvt) {
// only set the status to dragging, when we are actually dragging
if (!Sortable.active) {
this._dragStarted();
}
// as well as creating the ghost element on the document body
this._appendGhost();
var touch = evt.touches ? evt.touches[0] : evt, var touch = evt.touches ? evt.touches[0] : evt,
dx = touch.clientX - tapEvt.clientX, dx = touch.clientX - tapEvt.clientX,
dy = touch.clientY - tapEvt.clientY, dy = touch.clientY - tapEvt.clientY,
@ -429,6 +448,8 @@
touchEvt = touch; touchEvt = touch;
moved = true;
_css(ghostEl, 'webkitTransform', translate3d); _css(ghostEl, 'webkitTransform', translate3d);
_css(ghostEl, 'mozTransform', translate3d); _css(ghostEl, 'mozTransform', translate3d);
_css(ghostEl, 'msTransform', translate3d); _css(ghostEl, 'msTransform', translate3d);
@ -438,26 +459,17 @@
} }
}, },
_appendGhost: function () {
_onDragStart: function (/**Event*/evt, /**boolean*/useFallback) { if (!ghostEl) {
var dataTransfer = evt.dataTransfer,
options = this.options;
this._offUpEvents();
if (activeGroup.pull == 'clone') {
cloneEl = dragEl.cloneNode(true);
_css(cloneEl, 'display', 'none');
rootEl.insertBefore(cloneEl, dragEl);
}
if (useFallback) {
var rect = dragEl.getBoundingClientRect(), var rect = dragEl.getBoundingClientRect(),
css = _css(dragEl), css = _css(dragEl),
ghostRect; ghostRect;
ghostEl = dragEl.cloneNode(true); ghostEl = dragEl.cloneNode(true);
_toggleClass(ghostEl, this.options.ghostClass, false);
_toggleClass(ghostEl, this.options.fallbackClass, true);
_css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10)); _css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10));
_css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10)); _css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10));
_css(ghostEl, 'width', rect.width); _css(ghostEl, 'width', rect.width);
@ -466,12 +478,28 @@
_css(ghostEl, 'position', 'fixed'); _css(ghostEl, 'position', 'fixed');
_css(ghostEl, 'zIndex', '100000'); _css(ghostEl, 'zIndex', '100000');
rootEl.appendChild(ghostEl); this.options.fallbackOnBody && document.body.appendChild(ghostEl) || rootEl.appendChild(ghostEl);
// Fixing dimensions. // Fixing dimensions.
ghostRect = ghostEl.getBoundingClientRect(); ghostRect = ghostEl.getBoundingClientRect();
_css(ghostEl, 'width', rect.width * 2 - ghostRect.width); _css(ghostEl, 'width', rect.width * 2 - ghostRect.width);
_css(ghostEl, 'height', rect.height * 2 - ghostRect.height); _css(ghostEl, 'height', rect.height * 2 - ghostRect.height);
}
},
_onDragStart: function (/**Event*/evt, /**boolean*/useFallback) {
var dataTransfer = evt.dataTransfer,
options = this.options;
this._offUpEvents();
if (activeGroup.pull == 'clone') {
cloneEl = dragEl.cloneNode(true);
_css(cloneEl, 'display', 'none');
rootEl.insertBefore(cloneEl, dragEl);
}
if (useFallback) {
if (useFallback === 'touch') { if (useFallback === 'touch') {
// Bind touch events // Bind touch events
@ -493,9 +521,9 @@
} }
_on(document, 'drop', this); _on(document, 'drop', this);
setTimeout(this._dragStarted, 0);
} }
setTimeout(this._dragStarted, 0);
}, },
_onDragOver: function (/**Event*/evt) { _onDragOver: function (/**Event*/evt) {
@ -665,8 +693,10 @@
this._offUpEvents(); this._offUpEvents();
if (evt) { if (evt) {
if (moved) {
evt.preventDefault(); evt.preventDefault();
!options.dropBubble && evt.stopPropagation(); !options.dropBubble && evt.stopPropagation();
}
ghostEl && ghostEl.parentNode.removeChild(ghostEl); ghostEl && ghostEl.parentNode.removeChild(ghostEl);
@ -725,6 +755,8 @@
tapEvt = tapEvt =
touchEvt = touchEvt =
moved =
lastEl = lastEl =
lastCSS = lastCSS =
@ -870,14 +902,6 @@
} }
function _bind(ctx, fn) {
var args = slice.call(arguments, 2);
return fn.bind ? fn.bind.apply(fn, [ctx].concat(args)) : function () {
return fn.apply(ctx, args.concat(slice.call(arguments)));
};
}
function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) { function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) {
if (el) { if (el) {
ctx = ctx || document; ctx = ctx || document;
@ -1004,7 +1028,6 @@
onMoveFn = sortable.options.onMove, onMoveFn = sortable.options.onMove,
retVal; retVal;
if (onMoveFn) {
evt = document.createEvent('Event'); evt = document.createEvent('Event');
evt.initEvent('move', true, true); evt.initEvent('move', true, true);
@ -1015,6 +1038,9 @@
evt.related = targetEl || toEl; evt.related = targetEl || toEl;
evt.relatedRect = targetRect || toEl.getBoundingClientRect(); evt.relatedRect = targetRect || toEl.getBoundingClientRect();
fromEl.dispatchEvent(evt);
if (onMoveFn) {
retVal = onMoveFn.call(sortable, evt); retVal = onMoveFn.call(sortable, evt);
} }
@ -1115,7 +1141,6 @@
off: _off, off: _off,
css: _css, css: _css,
find: _find, find: _find,
bind: _bind,
is: function (el, selector) { is: function (el, selector) {
return !!_closest(el, selector, el); return !!_closest(el, selector, el);
}, },
@ -1127,7 +1152,7 @@
}; };
Sortable.version = '1.2.1'; Sortable.version = '1.2.2';
/** /**

4
Sortable.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
bower.json
Unescape View File

@ -6,7 +6,7 @@
"knockout-sortable.js", "knockout-sortable.js",
"react-sortable-mixin.js" "react-sortable-mixin.js"
], ],
"version": "1.2.1", "version": "1.2.2",
"homepage": "http://rubaxa.github.io/Sortable/", "homepage": "http://rubaxa.github.io/Sortable/",
"authors": [ "authors": [
"RubaXa <ibnRubaXa@gmail.com>" "RubaXa <ibnRubaXa@gmail.com>"

2
component.json
Unescape View File

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

2
ng-sortable.js
Unescape View File

@ -166,7 +166,7 @@
}); });
angular.forEach([ angular.forEach([
'sort', 'disabled', 'draggable', 'handle', 'animation', 'sort', 'disabled', 'draggable', 'handle', 'animation', 'group', 'ghostClass', 'filter',
'onStart', 'onEnd', 'onAdd', 'onUpdate', 'onRemove', 'onSort' 'onStart', 'onEnd', 'onAdd', 'onUpdate', 'onRemove', 'onSort'
], function (name) { ], function (name) {
watchers.push(scope.$watch('ngSortable.' + name, function (value) { watchers.push(scope.$watch('ngSortable.' + name, function (value) {

2
package.json
Unescape View File

@ -1,7 +1,7 @@
{ {
"name": "sortablejs", "name": "sortablejs",
"exportName": "Sortable", "exportName": "Sortable",
"version": "1.2.1", "version": "1.2.2",
"devDependencies": { "devDependencies": {
"grunt": "*", "grunt": "*",
"grunt-version": "*", "grunt-version": "*",

5
react-sortable-mixin.js vendored
Unescape View File

@ -34,7 +34,8 @@
onUpdate: 'handleUpdate', onUpdate: 'handleUpdate',
onRemove: 'handleRemove', onRemove: 'handleRemove',
onSort: 'handleSort', onSort: 'handleSort',
onFilter: 'handleFilter' onFilter: 'handleFilter',
onMove: 'handleMove'
}; };
@ -90,7 +91,7 @@
// Bind callbacks so that "this" refers to the component // Bind callbacks so that "this" refers to the component
'onStart onEnd onAdd onSort onUpdate onRemove onFilter'.split(' ').forEach(function (/** string */name) { 'onStart onEnd onAdd onSort onUpdate onRemove onFilter onMove'.split(' ').forEach(function (/** string */name) {
copyOptions[name] = function (evt) { copyOptions[name] = function (evt) {
if (name === 'onStart') { if (name === 'onStart') {
_nextSibling = evt.item.nextElementSibling; _nextSibling = evt.item.nextElementSibling;

Write Preview
Loading…
Cancel
Save