Sortable.js 23.4 KB
Newer Older
R
RubaXa 已提交
1 2 3 4 5 6 7
/**!
 * Sortable
 * @author	RubaXa   <trash@rubaxa.org>
 * @license MIT
 */


R
RubaXa 已提交
8
(function (factory) {
R
RubaXa 已提交
9 10
	"use strict";

R
RubaXa 已提交
11
	if (typeof define === "function" && define.amd) {
R
RubaXa 已提交
12
		define(factory);
R
RubaXa 已提交
13
	}
R
RubaXa 已提交
14
	else if (typeof module != "undefined" && typeof module.exports != "undefined") {
S
Scott Nelson 已提交
15 16
		module.exports = factory();
	}
R
RubaXa 已提交
17
	else if (typeof Package !== "undefined") {
18 19
		Sortable = factory();  // export for Meteor.js
	}
R
RubaXa 已提交
20
	else {
R
RubaXa 已提交
21
		/* jshint sub:true */
R
RubaXa 已提交
22 23
		window["Sortable"] = factory();
	}
R
RubaXa 已提交
24
})(function () {
R
RubaXa 已提交
25 26
	"use strict";

R
RubaXa 已提交
27 28 29 30 31
	var dragEl,
		ghostEl,
		cloneEl,
		rootEl,
		nextEl,
R
RubaXa 已提交
32

33 34 35
		scrollEl,
		scrollParentEl,

R
RubaXa 已提交
36 37
		lastEl,
		lastCSS,
R
RubaXa 已提交
38

R
RubaXa 已提交
39 40 41
		oldIndex,
		newIndex,

R
RubaXa 已提交
42
		activeGroup,
R
RubaXa 已提交
43
		autoScroll = {},
R
RubaXa 已提交
44

R
RubaXa 已提交
45 46
		tapEvt,
		touchEvt,
R
RubaXa 已提交
47

R
RubaXa 已提交
48 49 50
		/** @const */
		RSPACE = /\s+/g,

R
RubaXa 已提交
51
		expando = 'Sortable' + (new Date).getTime(),
R
RubaXa 已提交
52

R
RubaXa 已提交
53 54 55
		win = window,
		document = win.document,
		parseInt = win.parseInt,
R
RubaXa 已提交
56 57 58

		supportDraggable = !!('draggable' in document.createElement('div')),

R
RubaXa 已提交
59
		_silent = false,
R
RubaXa 已提交
60

61
		_dispatchEvent = function (rootEl, name, targetEl, fromEl, startIndex, newIndex) {
R
RubaXa 已提交
62
			var evt = document.createEvent('Event');
R
RubaXa 已提交
63

64
			evt.initEvent(name, true, true);
R
RubaXa 已提交
65

66 67
			evt.item = targetEl || rootEl;
			evt.from = fromEl || rootEl;
R
RubaXa 已提交
68
			evt.clone = cloneEl;
R
RubaXa 已提交
69 70 71

			evt.oldIndex = startIndex;
			evt.newIndex = newIndex;
72

73
			rootEl.dispatchEvent(evt);
R
RubaXa 已提交
74
		},
75

R
RubaXa 已提交
76
		_customEvents = 'onAdd onUpdate onRemove onStart onEnd onFilter onSort'.split(' '),
R
RubaXa 已提交
77

R
RubaXa 已提交
78
		noop = function () {},
R
RubaXa 已提交
79 80

		abs = Math.abs,
R
RubaXa 已提交
81
		slice = [].slice,
R
RubaXa 已提交
82

83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
		touchDragOverListeners = [],

		_autoScroll = _throttle(function (/**Event*/evt, /**Object*/options, /**HTMLElement*/rootEl) {
			// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
			if (rootEl && options.scroll) {
				var el,
					rect,
					sens = options.scrollSensitivity,
					speed = options.scrollSpeed,

					x = evt.clientX,
					y = evt.clientY,

					winWidth = window.innerWidth,
					winHeight = window.innerHeight,

					vx,
					vy
				;

				// Delect scrollEl
				if (scrollParentEl !== rootEl) {
					scrollEl = options.scroll;
					scrollParentEl = rootEl;

					if (scrollEl === true) {
						scrollEl = rootEl;

						do {
							if ((scrollEl.offsetWidth < scrollEl.scrollWidth) ||
								(scrollEl.offsetHeight < scrollEl.scrollHeight)
							) {
								break;
							}
							/* jshint boss:true */
						} while (scrollEl = scrollEl.parentNode);
					}
				}

				if (scrollEl) {
					el = scrollEl;
					rect = scrollEl.getBoundingClientRect();
					vx = (abs(rect.right - x) <= sens) - (abs(rect.left - x) <= sens);
					vy = (abs(rect.bottom - y) <= sens) - (abs(rect.top - y) <= sens);
				}


				if (!(vx || vy)) {
					vx = (winWidth - x <= sens) - (x <= sens);
					vy = (winHeight - y <= sens) - (y <= sens);

					/* jshint expr:true */
					(vx || vy) && (el = win);
				}


				if (autoScroll.vx !== vx || autoScroll.vy !== vy || autoScroll.el !== el) {
					autoScroll.el = el;
					autoScroll.vx = vx;
					autoScroll.vy = vy;

					clearInterval(autoScroll.pid);

					if (el) {
						autoScroll.pid = setInterval(function () {
							if (el === win) {
149
								win.scrollTo(win.pageXOffset + vx * speed, win.pageYOffset + vy * speed);
150 151 152 153 154 155 156 157 158
							} else {
								vy && (el.scrollTop += vy * speed);
								vx && (el.scrollLeft += vx * speed);
							}
						}, 24);
					}
				}
			}
		}, 30)
R
RubaXa 已提交
159 160 161
	;


162

R
RubaXa 已提交
163 164 165
	/**
	 * @class  Sortable
	 * @param  {HTMLElement}  el
166
	 * @param  {Object}       [options]
R
RubaXa 已提交
167
	 */
R
RubaXa 已提交
168
	function Sortable(el, options) {
R
RubaXa 已提交
169
		this.el = el; // root element
170
		this.options = options = _extend({}, options);
R
RubaXa 已提交
171 172


R
RubaXa 已提交
173
		// Default options
174 175
		var defaults = {
			group: Math.random(),
R
RubaXa 已提交
176
			sort: true,
R
RubaXa 已提交
177
			disabled: false,
178 179
			store: null,
			handle: null,
R
RubaXa 已提交
180 181 182
			scroll: true,
			scrollSensitivity: 30,
			scrollSpeed: 10,
R
RubaXa 已提交
183
			draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',
184 185
			ghostClass: 'sortable-ghost',
			ignore: 'a, img',
186
			filter: null,
R
RubaXa 已提交
187 188 189
			animation: 0,
			setData: function (dataTransfer, dragEl) {
				dataTransfer.setData('Text', dragEl.textContent);
190 191
			},
			dropBubble: false,
R
RubaXa 已提交
192 193
			dragoverBubble: false,
			dataIdAttr: 'data-id'
R
RubaXa 已提交
194
		};
195

R
RubaXa 已提交
196

197 198
		// Set default options
		for (var name in defaults) {
R
RubaXa 已提交
199
			!(name in options) && (options[name] = defaults[name]);
200
		}
R
RubaXa 已提交
201

202

R
RubaXa 已提交
203 204
		var group = options.group;

R
RubaXa 已提交
205 206
		if (!group || typeof group != 'object') {
			group = options.group = { name: group };
R
RubaXa 已提交
207 208
		}

R
RubaXa 已提交
209

R
RubaXa 已提交
210
		['pull', 'put'].forEach(function (key) {
R
RubaXa 已提交
211 212
			if (!(key in group)) {
				group[key] = true;
R
RubaXa 已提交
213 214 215 216
			}
		});


217
		// Define events
218
		_customEvents.forEach(function (name) {
219
			options[name] = _bind(this, options[name] || noop);
220
			_on(el, name.substr(2).toLowerCase(), options[name]);
R
RubaXa 已提交
221
		}, this);
R
RubaXa 已提交
222 223


224 225 226
		// Export options
		options.groups = ' ' + group.name + (group.put.join ? ' ' + group.put.join(' ') : '') + ' ';
		el[expando] = options;
R
RubaXa 已提交
227 228


R
* JSDoc  
RubaXa 已提交
229
		// Bind all private methods
R
RubaXa 已提交
230 231
		for (var fn in this) {
			if (fn.charAt(0) === '_') {
R
RubaXa 已提交
232 233 234 235 236 237 238 239 240
				this[fn] = _bind(this, this[fn]);
			}
		}


		// Bind events
		_on(el, 'mousedown', this._onTapStart);
		_on(el, 'touchstart', this._onTapStart);

R
RubaXa 已提交
241 242
		_on(el, 'dragover', this);
		_on(el, 'dragenter', this);
R
RubaXa 已提交
243 244

		touchDragOverListeners.push(this._onDragOver);
245 246 247

		// Restore sorting
		options.store && this.sort(options.store.get(this));
R
RubaXa 已提交
248 249 250
	}


251
	Sortable.prototype = /** @lends Sortable.prototype */ {
R
RubaXa 已提交
252 253 254
		constructor: Sortable,


R
RubaXa 已提交
255
		_dragStarted: function () {
R
RubaXa 已提交
256 257 258
			if (rootEl && dragEl) {
				// Apply effect
				_toggleClass(dragEl, this.options.ghostClass, true);
R
RubaXa 已提交
259

R
RubaXa 已提交
260
				Sortable.active = this;
R
RubaXa 已提交
261

R
RubaXa 已提交
262 263 264
				// Drag start event
				_dispatchEvent(rootEl, 'start', dragEl, rootEl, oldIndex);
			}
R
RubaXa 已提交
265 266 267
		},


R
RubaXa 已提交
268
		_onTapStart: function (/**Event|TouchEvent*/evt) {
R
RubaXa 已提交
269 270
			var type = evt.type,
				touch = evt.touches && evt.touches[0],
R
RubaXa 已提交
271
				target = (touch || evt).target,
272
				originalTarget = target,
R
RubaXa 已提交
273
				options =  this.options,
274
				filter = options.filter,
R
RubaXa 已提交
275
				el = this.el,
276
				ownerDocument = el.ownerDocument; // for correct working with/into iframe
R
RubaXa 已提交
277

R
RubaXa 已提交
278
			if (type === 'mousedown' && evt.button !== 0 || options.disabled) {
R
RubaXa 已提交
279
				return; // only left button or enabled
R
RubaXa 已提交
280 281
			}

282 283
			target = _closest(target, options.draggable, el);

R
RubaXa 已提交
284 285 286 287
			if (!target) {
				return;
			}

288
			// get the index of the dragged element within its parent
R
RubaXa 已提交
289
			oldIndex = _index(target);
290

291
			// Check filter
R
RubaXa 已提交
292
			if (typeof filter === 'function') {
R
RubaXa 已提交
293
				if (filter.call(this, evt, target, this)) {
R
RubaXa 已提交
294
					_dispatchEvent(originalTarget, 'filter', target, el, oldIndex);
R
RubaXa 已提交
295
					evt.preventDefault();
R
RubaXa 已提交
296 297
					return; // cancel dnd
				}
298
			}
R
RubaXa 已提交
299
			else if (filter) {
R
RubaXa 已提交
300 301 302 303
				filter = filter.split(',').some(function (criteria) {
					criteria = _closest(originalTarget, criteria.trim(), el);

					if (criteria) {
R
RubaXa 已提交
304
						_dispatchEvent(criteria, 'filter', target, el, oldIndex);
R
RubaXa 已提交
305 306
						return true;
					}
307 308
				});

R
RubaXa 已提交
309 310
				if (filter) {
					evt.preventDefault();
311 312 313 314
					return; // cancel dnd
				}
			}

R
RubaXa 已提交
315 316 317 318 319 320

			if (options.handle && !_closest(originalTarget, options.handle, el)) {
				return;
			}


R
RubaXa 已提交
321
			// Prepare `dragstart`
R
RubaXa 已提交
322
			if (target && !dragEl && (target.parentNode === el)) {
R
RubaXa 已提交
323
				tapEvt = evt;
324 325 326 327 328 329 330

				rootEl = this.el;
				dragEl = target;
				nextEl = dragEl.nextSibling;
				activeGroup = this.options.group;

				dragEl.draggable = true;
R
RubaXa 已提交
331 332

				// Disable "draggable"
333
				options.ignore.split(',').forEach(function (criteria) {
Z
ziflex 已提交
334 335
					_find(target, criteria.trim(), _disableDraggable);
				});
R
RubaXa 已提交
336

R
RubaXa 已提交
337
				if (touch) {
R
RubaXa 已提交
338 339
					// Touch device support
					tapEvt = {
R
RubaXa 已提交
340 341 342
						target: target,
						clientX: touch.clientX,
						clientY: touch.clientY
R
RubaXa 已提交
343
					};
344

R
RubaXa 已提交
345
					this._onDragStart(tapEvt, 'touch');
R
RubaXa 已提交
346 347
					evt.preventDefault();
				}
R
RubaXa 已提交
348

349 350 351
				_on(ownerDocument, 'mouseup', this._onDrop);
				_on(ownerDocument, 'touchend', this._onDrop);
				_on(ownerDocument, 'touchcancel', this._onDrop);
R
RubaXa 已提交
352

R
RubaXa 已提交
353
				_on(dragEl, 'dragend', this);
R
RubaXa 已提交
354 355
				_on(rootEl, 'dragstart', this._onDragStart);

R
RubaXa 已提交
356 357 358
				if (!supportDraggable) {
					this._onDragStart(tapEvt, true);
				}
R
RubaXa 已提交
359 360

				try {
R
RubaXa 已提交
361
					if (document.selection) {
R
RubaXa 已提交
362 363
						document.selection.empty();
					} else {
R
RubaXa 已提交
364
						window.getSelection().removeAllRanges();
R
RubaXa 已提交
365
					}
R
RubaXa 已提交
366 367
				} catch (err) {
				}
R
RubaXa 已提交
368 369 370
			}
		},

R
RubaXa 已提交
371 372
		_emulateDragOver: function () {
			if (touchEvt) {
R
RubaXa 已提交
373 374
				_css(ghostEl, 'display', 'none');

R
RubaXa 已提交
375
				var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY),
R
RubaXa 已提交
376
					parent = target,
377
					groupName = ' ' + this.options.group.name + '',
R
RubaXa 已提交
378
					i = touchDragOverListeners.length;
R
RubaXa 已提交
379

R
RubaXa 已提交
380 381
				if (parent) {
					do {
382
						if (parent[expando] && parent[expando].groups.indexOf(groupName) > -1) {
R
RubaXa 已提交
383 384 385 386 387 388 389 390 391 392 393 394 395
							while (i--) {
								touchDragOverListeners[i]({
									clientX: touchEvt.clientX,
									clientY: touchEvt.clientY,
									target: target,
									rootEl: parent
								});
							}

							break;
						}

						target = parent; // store last element
L
Larry Davis 已提交
396
					}
R
RubaXa 已提交
397 398
					/* jshint boss:true */
					while (parent = parent.parentNode);
R
RubaXa 已提交
399 400 401 402 403 404 405
				}

				_css(ghostEl, 'display', '');
			}
		},


R
RubaXa 已提交
406 407
		_onTouchMove: function (/**TouchEvent*/evt) {
			if (tapEvt) {
R
RubaXa 已提交
408
				var touch = evt.touches ? evt.touches[0] : evt,
R
RubaXa 已提交
409 410
					dx = touch.clientX - tapEvt.clientX,
					dy = touch.clientY - tapEvt.clientY,
R
RubaXa 已提交
411
					translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)';
R
RubaXa 已提交
412 413

				touchEvt = touch;
R
RubaXa 已提交
414 415 416 417 418 419

				_css(ghostEl, 'webkitTransform', translate3d);
				_css(ghostEl, 'mozTransform', translate3d);
				_css(ghostEl, 'msTransform', translate3d);
				_css(ghostEl, 'transform', translate3d);

M
Marius Petcu 已提交
420
				evt.preventDefault();
R
RubaXa 已提交
421 422 423 424
			}
		},


R
RubaXa 已提交
425
		_onDragStart: function (/**Event*/evt, /**boolean*/useFallback) {
R
RubaXa 已提交
426 427
			var dataTransfer = evt.dataTransfer,
				options = this.options;
R
RubaXa 已提交
428

429
			this._offUpEvents();
R
RubaXa 已提交
430

R
RubaXa 已提交
431 432 433 434 435 436
			if (activeGroup.pull == 'clone') {
				cloneEl = dragEl.cloneNode(true);
				_css(cloneEl, 'display', 'none');
				rootEl.insertBefore(cloneEl, dragEl);
			}

R
RubaXa 已提交
437
			if (useFallback) {
R
RubaXa 已提交
438 439 440
				var rect = dragEl.getBoundingClientRect(),
					css = _css(dragEl),
					ghostRect;
R
RubaXa 已提交
441

442
				ghostEl = dragEl.cloneNode(true);
R
RubaXa 已提交
443 444 445

				_css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10));
				_css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10));
R
RubaXa 已提交
446 447
				_css(ghostEl, 'width', rect.width);
				_css(ghostEl, 'height', rect.height);
R
RubaXa 已提交
448 449 450 451
				_css(ghostEl, 'opacity', '0.8');
				_css(ghostEl, 'position', 'fixed');
				_css(ghostEl, 'zIndex', '100000');

R
RubaXa 已提交
452 453 454 455
				rootEl.appendChild(ghostEl);

				// Fixing dimensions.
				ghostRect = ghostEl.getBoundingClientRect();
R
RubaXa 已提交
456 457
				_css(ghostEl, 'width', rect.width * 2 - ghostRect.width);
				_css(ghostEl, 'height', rect.height * 2 - ghostRect.height);
R
RubaXa 已提交
458

R
RubaXa 已提交
459 460 461 462 463 464 465 466 467 468
				if (useFallback === 'touch') {
					// Bind touch events
					_on(document, 'touchmove', this._onTouchMove);
					_on(document, 'touchend', this._onDrop);
					_on(document, 'touchcancel', this._onDrop);
				} else {
					// Old brwoser
					_on(document, 'mousemove', this._onTouchMove);
					_on(document, 'mouseup', this._onDrop);
				}
R
RubaXa 已提交
469

R
RubaXa 已提交
470
				this._loopId = setInterval(this._emulateDragOver, 150);
R
RubaXa 已提交
471 472
			}
			else {
R
RubaXa 已提交
473 474 475 476
				if (dataTransfer) {
					dataTransfer.effectAllowed = 'move';
					options.setData && options.setData.call(this, dataTransfer, dragEl);
				}
R
RubaXa 已提交
477

R
RubaXa 已提交
478
				_on(document, 'drop', this);
R
RubaXa 已提交
479 480
			}

R
RubaXa 已提交
481
			setTimeout(this._dragStarted, 0);
R
RubaXa 已提交
482 483
		},

R
RubaXa 已提交
484
		_onDragOver: function (/**Event*/evt) {
R
RubaXa 已提交
485 486 487 488 489 490
			var el = this.el,
				target,
				dragRect,
				revert,
				options = this.options,
				group = options.group,
R
RubaXa 已提交
491
				groupPut = group.put,
492 493
				isOwner = (activeGroup === group),
				canSort = options.sort;
R
RubaXa 已提交
494

R
RubaXa 已提交
495
			if (!dragEl) {
496 497 498
				return;
			}

R
RubaXa 已提交
499 500
			if (evt.preventDefault !== void 0) {
				evt.preventDefault();
501
				!options.dragoverBubble && evt.stopPropagation();
R
RubaXa 已提交
502
			}
R
RubaXa 已提交
503

R
RubaXa 已提交
504
			if (activeGroup && !options.disabled &&
505 506
				(isOwner
					? canSort || (revert = !rootEl.contains(dragEl))
R
RubaXa 已提交
507 508 509 510
					: activeGroup.pull && groupPut && (
						(activeGroup.name === group.name) || // by Name
						(groupPut.indexOf && ~groupPut.indexOf(activeGroup.name)) // by Array
					)
511
				) &&
R
RubaXa 已提交
512
				(evt.rootEl === void 0 || evt.rootEl === this.el)
R
RubaXa 已提交
513
			) {
R
RubaXa 已提交
514 515 516 517 518 519 520
				// Smart auto-scrolling
				_autoScroll(evt, options, this.el);

				if (_silent) {
					return;
				}

R
RubaXa 已提交
521
				target = _closest(evt.target, options.draggable, el);
R
RubaXa 已提交
522 523 524
				dragRect = dragEl.getBoundingClientRect();


525
				if (revert) {
R
RubaXa 已提交
526 527
					_cloneHide(true);

528 529 530 531 532 533 534
					if (cloneEl || nextEl) {
						rootEl.insertBefore(dragEl, cloneEl || nextEl);
					}
					else if (!canSort) {
						rootEl.appendChild(dragEl);
					}

R
RubaXa 已提交
535 536
					return;
				}
R
RubaXa 已提交
537

R
RubaXa 已提交
538

R
RubaXa 已提交
539
				if ((el.children.length === 0) || (el.children[0] === ghostEl) ||
R
RubaXa 已提交
540
					(el === evt.target) && (target = _ghostInBottom(el, evt))
R
RubaXa 已提交
541
				) {
R
RubaXa 已提交
542 543 544 545 546 547
					if (target) {
						if (target.animated) {
							return;
						}
						targetRect = target.getBoundingClientRect();
					}
R
RubaXa 已提交
548

R
RubaXa 已提交
549 550
					_cloneHide(isOwner);

R
RubaXa 已提交
551
					el.appendChild(dragEl);
R
* anim  
RubaXa 已提交
552
					this._animate(dragRect, dragEl);
R
RubaXa 已提交
553
					target && this._animate(targetRect, target);
R
RubaXa 已提交
554
				}
R
RubaXa 已提交
555 556
				else if (target && !target.animated && target !== dragEl && (target.parentNode[expando] !== void 0)) {
					if (lastEl !== target) {
R
RubaXa 已提交
557
						lastEl = target;
R
RubaXa 已提交
558
						lastCSS = _css(target);
R
RubaXa 已提交
559 560 561
					}


R
RubaXa 已提交
562 563 564 565 566 567 568 569 570
					var targetRect = target.getBoundingClientRect(),
						width = targetRect.right - targetRect.left,
						height = targetRect.bottom - targetRect.top,
						floating = /left|right|inline/.test(lastCSS.cssFloat + lastCSS.display),
						isWide = (target.offsetWidth > dragEl.offsetWidth),
						isLong = (target.offsetHeight > dragEl.offsetHeight),
						halfway = (floating ? (evt.clientX - targetRect.left) / width : (evt.clientY - targetRect.top) / height) > 0.5,
						nextSibling = target.nextElementSibling,
						after
R
RubaXa 已提交
571
					;
R
RubaXa 已提交
572

R
RubaXa 已提交
573 574 575
					_silent = true;
					setTimeout(_unsilent, 30);

R
RubaXa 已提交
576 577
					_cloneHide(isOwner);

R
RubaXa 已提交
578 579
					if (floating) {
						after = (target.previousElementSibling === dragEl) && !isWide || halfway && isWide;
R
RubaXa 已提交
580
					} else {
R
RubaXa 已提交
581
						after = (nextSibling !== dragEl) && !isLong || halfway && isLong;
R
RubaXa 已提交
582 583
					}

R
RubaXa 已提交
584
					if (after && !nextSibling) {
R
RubaXa 已提交
585 586 587
						el.appendChild(dragEl);
					} else {
						target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
R
RubaXa 已提交
588
					}
R
RubaXa 已提交
589

R
RubaXa 已提交
590 591
					this._animate(dragRect, dragEl);
					this._animate(targetRect, target);
R
RubaXa 已提交
592 593 594 595
				}
			}
		},

596 597 598 599 600 601
		_animate: function (prevRect, target) {
			var ms = this.options.animation;

			if (ms) {
				var currentRect = target.getBoundingClientRect();

R
RubaXa 已提交
602
				_css(target, 'transition', 'none');
603 604 605 606 607 608 609
				_css(target, 'transform', 'translate3d('
					+ (prevRect.left - currentRect.left) + 'px,'
					+ (prevRect.top - currentRect.top) + 'px,0)'
				);

				target.offsetWidth; // repaint

R
RubaXa 已提交
610
				_css(target, 'transition', 'all ' + ms + 'ms');
611 612
				_css(target, 'transform', 'translate3d(0,0,0)');

R
* anim  
RubaXa 已提交
613 614
				clearTimeout(target.animated);
				target.animated = setTimeout(function () {
615
					_css(target, 'transition', '');
616
					_css(target, 'transform', '');
617 618 619 620 621
					target.animated = false;
				}, ms);
			}
		},

622
		_offUpEvents: function () {
623 624
			var ownerDocument = this.el.ownerDocument;

625
			_off(document, 'touchmove', this._onTouchMove);
626 627 628
			_off(ownerDocument, 'mouseup', this._onDrop);
			_off(ownerDocument, 'touchend', this._onDrop);
			_off(ownerDocument, 'touchcancel', this._onDrop);
629
		},
R
RubaXa 已提交
630

R
RubaXa 已提交
631
		_onDrop: function (/**Event*/evt) {
632 633
			var el = this.el,
				options = this.options;
R
RubaXa 已提交
634

R
RubaXa 已提交
635
			clearInterval(this._loopId);
R
RubaXa 已提交
636
			clearInterval(autoScroll.pid);
R
RubaXa 已提交
637 638

			// Unbind events
R
RubaXa 已提交
639
			_off(document, 'drop', this);
R
RubaXa 已提交
640
			_off(document, 'mousemove', this._onTouchMove);
R
RubaXa 已提交
641
			_off(el, 'dragstart', this._onDragStart);
R
RubaXa 已提交
642

643
			this._offUpEvents();
R
RubaXa 已提交
644

R
RubaXa 已提交
645
			if (evt) {
R
RubaXa 已提交
646
				evt.preventDefault();
647
				!options.dropBubble && evt.stopPropagation();
R
RubaXa 已提交
648

R
RubaXa 已提交
649
				ghostEl && ghostEl.parentNode.removeChild(ghostEl);
R
RubaXa 已提交
650

R
RubaXa 已提交
651
				if (dragEl) {
R
RubaXa 已提交
652 653
					_off(dragEl, 'dragend', this);

654
					_disableDraggable(dragEl);
R
RubaXa 已提交
655 656
					_toggleClass(dragEl, this.options.ghostClass, false);

657
					if (rootEl !== dragEl.parentNode) {
R
RubaXa 已提交
658 659
						newIndex = _index(dragEl);

660
						// drag from one list and drop into another
R
RubaXa 已提交
661 662
						_dispatchEvent(dragEl.parentNode, 'sort', dragEl, rootEl, oldIndex, newIndex);
						_dispatchEvent(rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
R
RubaXa 已提交
663 664

						// Add event
R
RubaXa 已提交
665
						_dispatchEvent(dragEl, 'add', dragEl, rootEl, oldIndex, newIndex);
666 667

						// Remove event
R
RubaXa 已提交
668
						_dispatchEvent(rootEl, 'remove', dragEl, rootEl, oldIndex, newIndex);
R
RubaXa 已提交
669
					}
R
RubaXa 已提交
670 671
					else {
						// Remove clone
R
RubaXa 已提交
672
						cloneEl && cloneEl.parentNode.removeChild(cloneEl);
R
RubaXa 已提交
673

R
RubaXa 已提交
674 675 676
						if (dragEl.nextSibling !== nextEl) {
							// Get the index of the dragged element within its parent
							newIndex = _index(dragEl);
R
RubaXa 已提交
677

R
RubaXa 已提交
678 679 680 681
							// drag & drop within the same list
							_dispatchEvent(rootEl, 'update', dragEl, rootEl, oldIndex, newIndex);
							_dispatchEvent(rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
						}
R
RubaXa 已提交
682
					}
683

R
RubaXa 已提交
684
					// Drag end event
R
RubaXa 已提交
685
					Sortable.active && _dispatchEvent(rootEl, 'end', dragEl, rootEl, oldIndex, newIndex);
R
RubaXa 已提交
686 687
				}

688
				// Nulling
R
RubaXa 已提交
689 690 691 692
				rootEl =
				dragEl =
				ghostEl =
				nextEl =
R
RubaXa 已提交
693
				cloneEl =
R
RubaXa 已提交
694

695 696 697
				scrollEl =
				scrollParentEl =

R
RubaXa 已提交
698 699 700 701 702 703
				tapEvt =
				touchEvt =

				lastEl =
				lastCSS =

R
RubaXa 已提交
704 705
				activeGroup =
				Sortable.active = null;
706 707

				// Save sorting
R
RubaXa 已提交
708
				this.save();
R
RubaXa 已提交
709 710 711 712
			}
		},


R
RubaXa 已提交
713 714 715
		handleEvent: function (/**Event*/evt) {
			var type = evt.type;

R
RubaXa 已提交
716 717
			if (type === 'dragover' || type === 'dragenter') {
				this._onDragOver(evt);
R
RubaXa 已提交
718 719
				_globalDragOver(evt);
			}
R
RubaXa 已提交
720
			else if (type === 'drop' || type === 'dragend') {
R
RubaXa 已提交
721 722
				this._onDrop(evt);
			}
R
RubaXa 已提交
723 724 725
		},


726 727 728 729 730 731 732 733 734
		/**
		 * Serializes the item into an array of string.
		 * @returns {String[]}
		 */
		toArray: function () {
			var order = [],
				el,
				children = this.el.children,
				i = 0,
R
RubaXa 已提交
735 736
				n = children.length,
				options = this.options;
737 738 739

			for (; i < n; i++) {
				el = children[i];
R
RubaXa 已提交
740
				if (_closest(el, options.draggable, this.el)) {
R
RubaXa 已提交
741
					order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));
R
RubaXa 已提交
742
				}
743 744 745 746 747 748 749 750 751 752 753
			}

			return order;
		},


		/**
		 * Sorts the elements according to the array.
		 * @param  {String[]}  order  order of the items
		 */
		sort: function (order) {
R
RubaXa 已提交
754
			var items = {}, rootEl = this.el;
755 756

			this.toArray().forEach(function (id, i) {
R
RubaXa 已提交
757 758
				var el = rootEl.children[i];

R
RubaXa 已提交
759
				if (_closest(el, this.options.draggable, rootEl)) {
R
RubaXa 已提交
760 761 762
					items[id] = el;
				}
			}, this);
763 764 765

			order.forEach(function (id) {
				if (items[id]) {
R
RubaXa 已提交
766 767
					rootEl.removeChild(items[id]);
					rootEl.appendChild(items[id]);
768 769 770 771 772
				}
			});
		},


R
RubaXa 已提交
773 774 775 776 777 778 779 780 781
		/**
		 * Save the current sorting
		 */
		save: function () {
			var store = this.options.store;
			store && store.set(this);
		},


782 783 784 785 786 787 788 789 790 791 792
		/**
		 * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
		 * @param   {HTMLElement}  el
		 * @param   {String}       [selector]  default: `options.draggable`
		 * @returns {HTMLElement|null}
		 */
		closest: function (el, selector) {
			return _closest(el, selector || this.options.draggable, this.el);
		},


793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809
		/**
		 * Set/get option
		 * @param   {string} name
		 * @param   {*}      [value]
		 * @returns {*}
		 */
		option: function (name, value) {
			var options = this.options;

			if (value === void 0) {
				return options[name];
			} else {
				options[name] = value;
			}
		},


810 811 812 813
		/**
		 * Destroy
		 */
		destroy: function () {
R
RubaXa 已提交
814 815
			var el = this.el, options = this.options;

816 817 818 819
			_customEvents.forEach(function (name) {
				_off(el, name.substr(2).toLowerCase(), options[name]);
			});

R
RubaXa 已提交
820 821 822
			_off(el, 'mousedown', this._onTapStart);
			_off(el, 'touchstart', this._onTapStart);

R
RubaXa 已提交
823 824
			_off(el, 'dragover', this);
			_off(el, 'dragenter', this);
R
RubaXa 已提交
825

826
			//remove draggable attributes
R
RubaXa 已提交
827
			Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) {
828 829 830
				el.removeAttribute('draggable');
			});

R
RubaXa 已提交
831 832 833 834 835 836 837 838
			touchDragOverListeners.splice(touchDragOverListeners.indexOf(this._onDragOver), 1);

			this._onDrop();

			this.el = null;
		}
	};

839

R
RubaXa 已提交
840 841 842 843 844 845 846 847 848
	function _cloneHide(state) {
		if (cloneEl && (cloneEl.state !== state)) {
			_css(cloneEl, 'display', state ? 'none' : '');
			!state && cloneEl.state && rootEl.insertBefore(cloneEl, dragEl);
			cloneEl.state = state;
		}
	}


R
RubaXa 已提交
849
	function _bind(ctx, fn) {
R
RubaXa 已提交
850
		var args = slice.call(arguments, 2);
R
RubaXa 已提交
851
		return	fn.bind ? fn.bind.apply(fn, [ctx].concat(args)) : function () {
R
RubaXa 已提交
852 853 854 855 856
			return fn.apply(ctx, args.concat(slice.call(arguments)));
		};
	}


R
RubaXa 已提交
857
	function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) {
R
RubaXa 已提交
858
		if (el) {
R
RubaXa 已提交
859 860 861
			ctx = ctx || document;
			selector = selector.split('.');

R
RubaXa 已提交
862 863
			var tag = selector.shift().toUpperCase(),
				re = new RegExp('\\s(' + selector.join('|') + ')\\s', 'g');
R
RubaXa 已提交
864 865

			do {
R
RubaXa 已提交
866
				if (
R
RubaXa 已提交
867
					(tag === '>*' && el.parentNode === ctx) || (
R
raphj 已提交
868
						(tag === '' || el.nodeName.toUpperCase() == tag) &&
R
RubaXa 已提交
869 870
						(!selector.length || ((' ' + el.className + ' ').match(re) || []).length == selector.length)
					)
R
RubaXa 已提交
871 872
				) {
					return el;
R
RubaXa 已提交
873 874
				}
			}
R
RubaXa 已提交
875
			while (el !== ctx && (el = el.parentNode));
R
RubaXa 已提交
876 877
		}

R
RubaXa 已提交
878
		return null;
R
RubaXa 已提交
879 880 881
	}


882
	function _globalDragOver(/**Event*/evt) {
R
RubaXa 已提交
883 884 885 886 887
		evt.dataTransfer.dropEffect = 'move';
		evt.preventDefault();
	}


R
RubaXa 已提交
888
	function _on(el, event, fn) {
R
RubaXa 已提交
889 890 891 892
		el.addEventListener(event, fn, false);
	}


R
RubaXa 已提交
893
	function _off(el, event, fn) {
R
RubaXa 已提交
894 895 896 897
		el.removeEventListener(event, fn, false);
	}


R
RubaXa 已提交
898 899 900
	function _toggleClass(el, name, state) {
		if (el) {
			if (el.classList) {
R
RubaXa 已提交
901 902 903
				el.classList[state ? 'add' : 'remove'](name);
			}
			else {
B
Bogdan Mustiata 已提交
904 905
				var className = (' ' + el.className + ' ').replace(RSPACE, ' ').replace(' ' + name + ' ', ' ');
				el.className = (className + (state ? ' ' + name : '')).replace(RSPACE, ' ');
R
RubaXa 已提交
906 907 908 909 910
			}
		}
	}


R
RubaXa 已提交
911
	function _css(el, prop, val) {
R
RubaXa 已提交
912 913
		var style = el && el.style;

R
RubaXa 已提交
914 915 916
		if (style) {
			if (val === void 0) {
				if (document.defaultView && document.defaultView.getComputedStyle) {
R
RubaXa 已提交
917 918
					val = document.defaultView.getComputedStyle(el, '');
				}
R
RubaXa 已提交
919 920
				else if (el.currentStyle) {
					val = el.currentStyle;
R
RubaXa 已提交
921
				}
R
RubaXa 已提交
922 923 924 925 926 927 928 929 930

				return prop === void 0 ? val : val[prop];
			}
			else {
				if (!(prop in style)) {
					prop = '-webkit-' + prop;
				}

				style[prop] = val + (typeof val === 'string' ? '' : 'px');
R
RubaXa 已提交
931 932 933 934 935
			}
		}
	}


R
RubaXa 已提交
936 937
	function _find(ctx, tagName, iterator) {
		if (ctx) {
R
RubaXa 已提交
938
			var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length;
R
RubaXa 已提交
939

R
RubaXa 已提交
940 941
			if (iterator) {
				for (; i < n; i++) {
R
RubaXa 已提交
942 943 944
					iterator(list[i], i);
				}
			}
R
RubaXa 已提交
945

R
RubaXa 已提交
946
			return list;
R
RubaXa 已提交
947
		}
R
RubaXa 已提交
948 949

		return [];
R
RubaXa 已提交
950 951 952
	}


R
RubaXa 已提交
953
	function _disableDraggable(el) {
R
RubaXa 已提交
954
		el.draggable = false;
R
RubaXa 已提交
955 956 957
	}


R
RubaXa 已提交
958
	function _unsilent() {
R
RubaXa 已提交
959 960 961 962
		_silent = false;
	}


R
RubaXa 已提交
963
	/** @returns {HTMLElement|false} */
R
RubaXa 已提交
964
	function _ghostInBottom(el, evt) {
R
RubaXa 已提交
965 966
		var lastEl = el.lastElementChild, rect = lastEl.getBoundingClientRect();
		return (evt.clientY - (rect.top + rect.height) > 5) && lastEl; // min delta
R
RubaXa 已提交
967 968 969
	}


970 971 972 973 974 975 976
	/**
	 * Generate id
	 * @param   {HTMLElement} el
	 * @returns {String}
	 * @private
	 */
	function _generateId(el) {
R
RubaXa 已提交
977
		var str = el.tagName + el.className + el.src + el.href + el.textContent,
978
			i = str.length,
R
RubaXa 已提交
979
			sum = 0;
980

981 982 983
		while (i--) {
			sum += str.charCodeAt(i);
		}
984

985 986 987
		return sum.toString(36);
	}

988 989 990
	/**
	 * Returns the index of an element within its parent
	 * @param el
991 992
	 * @returns {number}
	 * @private
993 994 995
	 */
	function _index(/**HTMLElement*/el) {
		var index = 0;
996 997 998 999
		while (el && (el = el.previousElementSibling)) {
			if (el.nodeName.toUpperCase() !== 'TEMPLATE') {
				index++;
			}
1000 1001 1002
		}
		return index;
	}
R
RubaXa 已提交
1003

R
RubaXa 已提交
1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024
	function _throttle(callback, ms) {
		var args, _this;

		return function () {
			if (args === void 0) {
				args = arguments;
				_this = this;

				setTimeout(function () {
					if (args.length === 1) {
						callback.call(_this, args[0]);
					} else {
						callback.apply(_this, args);
					}

					args = void 0;
				}, ms);
			}
		};
	}

1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036
	function _extend(dst, src) {
		if (dst && src) {
			for (var key in src) {
				if (src.hasOwnProperty(key)) {
					dst[key] = src[key];
				}
			}
		}

		return dst;
	}

R
RubaXa 已提交
1037

R
RubaXa 已提交
1038 1039 1040 1041 1042 1043 1044
	// Export utils
	Sortable.utils = {
		on: _on,
		off: _off,
		css: _css,
		find: _find,
		bind: _bind,
R
RubaXa 已提交
1045 1046 1047
		is: function (el, selector) {
			return !!_closest(el, selector, el);
		},
1048
		extend: _extend,
R
RubaXa 已提交
1049
		throttle: _throttle,
R
RubaXa 已提交
1050
		closest: _closest,
1051
		toggleClass: _toggleClass,
1052 1053
		dispatchEvent: _dispatchEvent,
		index: _index
R
RubaXa 已提交
1054 1055 1056
	};


R
RubaXa 已提交
1057
	Sortable.version = '1.0.1';
1058

R
RubaXa 已提交
1059

1060 1061 1062 1063 1064 1065
	/**
	 * Create sortable instance
	 * @param {HTMLElement}  el
	 * @param {Object}      [options]
	 */
	Sortable.create = function (el, options) {
R
RubaXa 已提交
1066
		return new Sortable(el, options);
1067
	};
R
RubaXa 已提交
1068 1069

	// Export
1070
	return Sortable;
R
RubaXa 已提交
1071
});