Initial commit

Gemfile

+source 'https://rubygems.org'
+source 'https://rails-assets.org'
+
+gemspec

README.md

+# rails-assets-Sortable
+
+> The Bower package inside a gem
+
+This gem was automatically generated. You can visit [rails-assets.org](https://rails-assets.org) for more information.
+
+## Usage
+
+Add rails-assets source block to your `Gemfile`:
+
+```ruby
+source "https://rails-assets.org" do
+  gem "rails-assets-Sortable"
+end
+
+```
+
+Then, import the asset using Sprockets’ `require` directive:
+
+```js
+//= require "Sortable"
+```

Rakefile

+require "bundler/gem_tasks"

app/assets/javascripts/Sortable.js

+//= require Sortable/Sortable.js
+//= require Sortable/ng-sortable.js
+//= require Sortable/knockout-sortable.js
+//= require Sortable/react-sortable-mixin.js

app/assets/javascripts/Sortable/Gruntfile.js

+module.exports = function (grunt) {
+	'use strict';
+
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+
+		version: {
+			js: {
+				src: ['<%= pkg.exportName %>.js', '*.json']
+			},
+			cdn: {
+				options: {
+					prefix: '(cdnjs\\.cloudflare\\.com\\/ajax\\/libs\\/Sortable|cdn\\.jsdelivr\\.net\\/sortable)\\/',
+					replace: '[0-9\\.]+'
+				},
+				src: ['README.md']
+			}
+		},
+
+		jshint: {
+			all: ['*.js', '!*.min.js'],
+
+			options: {
+				jshintrc: true
+			}
+		},
+
+		uglify: {
+			options: {
+				banner: '/*! <%= pkg.exportName %> <%= pkg.version %> - <%= pkg.license %> | <%= pkg.repository.url %> */\n'
+			},
+			dist: {
+				files: {
+					'<%= pkg.exportName %>.min.js': ['<%= pkg.exportName %>.js']
+				}
+			},
+			jquery: {
+				files: {}
+			}
+		},
+
+		exec: {
+			'meteor-test': {
+				command: 'meteor/runtests.sh'
+			},
+			'meteor-publish': {
+				command: 'meteor/publish.sh'
+			}
+		},
+
+		jquery: {}
+	});
+
+
+	grunt.registerTask('jquery', function (exportName, uglify) {
+		if (exportName == 'min') {
+			exportName = null;
+			uglify = 'min';
+		}
+
+		if (!exportName) {
+			exportName = 'sortable';
+		}
+
+		var fs = require('fs'),
+			filename = 'jquery.fn.' + exportName + '.js';
+
+		grunt.log.oklns(filename);
+
+		fs.writeFileSync(
+			filename,
+			(fs.readFileSync('jquery.binding.js') + '')
+				.replace('$.fn.sortable', '$.fn.' + exportName)
+				.replace('/* CODE */',
+					(fs.readFileSync('Sortable.js') + '')
+						.replace(/^[\s\S]*?function[\s\S]*?(var[\s\S]+)\/\/\s+Export[\s\S]+/, '$1')
+				)
+		);
+
+		if (uglify) {
+			var opts = {};
+
+			opts['jquery.fn.' + exportName + '.min.js'] = filename;
+			grunt.config.set('uglify.jquery.files', opts);
+
+			grunt.task.run('uglify:jquery');
+		}
+	});
+
+
+	grunt.loadNpmTasks('grunt-version');
+	grunt.loadNpmTasks('grunt-contrib-jshint');
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-exec');
+
+	// Meteor tasks
+	grunt.registerTask('meteor-test', 'exec:meteor-test');
+	grunt.registerTask('meteor-publish', 'exec:meteor-publish');
+	grunt.registerTask('meteor', ['meteor-test', 'meteor-publish']);
+
+	grunt.registerTask('tests', ['jshint']);
+	grunt.registerTask('default', ['tests', 'version', 'uglify:dist']);
+};

app/assets/javascripts/Sortable/Sortable.js

+/**!
+ * Sortable
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @license MIT
+ */
+
+
+(function (factory) {
+	"use strict";
+
+	if (typeof define === "function" && define.amd) {
+		define(factory);
+	}
+	else if (typeof module != "undefined" && typeof module.exports != "undefined") {
+		module.exports = factory();
+	}
+	else if (typeof Package !== "undefined") {
+		Sortable = factory();  // export for Meteor.js
+	}
+	else {
+		/* jshint sub:true */
+		window["Sortable"] = factory();
+	}
+})(function () {
+	"use strict";
+
+	var dragEl,
+		parentEl,
+		ghostEl,
+		cloneEl,
+		rootEl,
+		nextEl,
+
+		scrollEl,
+		scrollParentEl,
+
+		lastEl,
+		lastCSS,
+		lastParentCSS,
+
+		oldIndex,
+		newIndex,
+
+		activeGroup,
+		autoScroll = {},
+
+		tapEvt,
+		touchEvt,
+
+		moved,
+
+		/** @const */
+		RSPACE = /\s+/g,
+
+		expando = 'Sortable' + (new Date).getTime(),
+
+		win = window,
+		document = win.document,
+		parseInt = win.parseInt,
+
+		supportDraggable = !!('draggable' in document.createElement('div')),
+		supportCssPointerEvents = (function (el) {
+			el = document.createElement('x');
+			el.style.cssText = 'pointer-events:auto';
+			return el.style.pointerEvents === 'auto';
+		})(),
+
+		_silent = false,
+
+		abs = Math.abs,
+		slice = [].slice,
+
+		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) {
+								win.scrollTo(win.pageXOffset + vx * speed, win.pageYOffset + vy * speed);
+							} else {
+								vy && (el.scrollTop += vy * speed);
+								vx && (el.scrollLeft += vx * speed);
+							}
+						}, 24);
+					}
+				}
+			}
+		}, 30),
+
+		_prepareGroup = function (options) {
+			var group = options.group;
+
+			if (!group || typeof group != 'object') {
+				group = options.group = {name: group};
+			}
+
+			['pull', 'put'].forEach(function (key) {
+				if (!(key in group)) {
+					group[key] = true;
+				}
+			});
+
+			options.groups = ' ' + group.name + (group.put.join ? ' ' + group.put.join(' ') : '') + ' ';
+		}
+	;
+
+
+
+	/**
+	 * @class  Sortable
+	 * @param  {HTMLElement}  el
+	 * @param  {Object}       [options]
+	 */
+	function Sortable(el, options) {
+		if (!(el && el.nodeType && el.nodeType === 1)) {
+			throw 'Sortable: `el` must be HTMLElement, and not ' + {}.toString.call(el);
+		}
+
+		this.el = el; // root element
+		this.options = options = _extend({}, options);
+
+
+		// Export instance
+		el[expando] = this;
+
+
+		// Default options
+		var defaults = {
+			group: Math.random(),
+			sort: true,
+			disabled: false,
+			store: null,
+			handle: null,
+			scroll: true,
+			scrollSensitivity: 30,
+			scrollSpeed: 10,
+			draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',
+			ghostClass: 'sortable-ghost',
+			chosenClass: 'sortable-chosen',
+			ignore: 'a, img',
+			filter: null,
+			animation: 0,
+			setData: function (dataTransfer, dragEl) {
+				dataTransfer.setData('Text', dragEl.textContent);
+			},
+			dropBubble: false,
+			dragoverBubble: false,
+			dataIdAttr: 'data-id',
+			delay: 0,
+			forceFallback: false,
+			fallbackClass: 'sortable-fallback',
+			fallbackOnBody: false
+		};
+
+
+		// Set default options
+		for (var name in defaults) {
+			!(name in options) && (options[name] = defaults[name]);
+		}
+
+		_prepareGroup(options);
+
+		// Bind all private methods
+		for (var fn in this) {
+			if (fn.charAt(0) === '_') {
+				this[fn] = this[fn].bind(this);
+			}
+		}
+
+		// Setup drag mode
+		this.nativeDraggable = options.forceFallback ? false : supportDraggable;
+
+		// Bind events
+		_on(el, 'mousedown', this._onTapStart);
+		_on(el, 'touchstart', this._onTapStart);
+
+		if (this.nativeDraggable) {
+			_on(el, 'dragover', this);
+			_on(el, 'dragenter', this);
+		}
+
+		touchDragOverListeners.push(this._onDragOver);
+
+		// Restore sorting
+		options.store && this.sort(options.store.get(this));
+	}
+
+
+	Sortable.prototype = /** @lends Sortable.prototype */ {
+		constructor: Sortable,
+
+		_onTapStart: function (/** Event|TouchEvent */evt) {
+			var _this = this,
+				el = this.el,
+				options = this.options,
+				type = evt.type,
+				touch = evt.touches && evt.touches[0],
+				target = (touch || evt).target,
+				originalTarget = target,
+				filter = options.filter;
+
+
+			if (type === 'mousedown' && evt.button !== 0 || options.disabled) {
+				return; // only left button or enabled
+			}
+
+			target = _closest(target, options.draggable, el);
+
+			if (!target) {
+				return;
+			}
+
+			// get the index of the dragged element within its parent
+			oldIndex = _index(target);
+
+			// Check filter
+			if (typeof filter === 'function') {
+				if (filter.call(this, evt, target, this)) {
+					_dispatchEvent(_this, originalTarget, 'filter', target, el, oldIndex);
+					evt.preventDefault();
+					return; // cancel dnd
+				}
+			}
+			else if (filter) {
+				filter = filter.split(',').some(function (criteria) {
+					criteria = _closest(originalTarget, criteria.trim(), el);
+
+					if (criteria) {
+						_dispatchEvent(_this, criteria, 'filter', target, el, oldIndex);
+						return true;
+					}
+				});
+
+				if (filter) {
+					evt.preventDefault();
+					return; // cancel dnd
+				}
+			}
+
+
+			if (options.handle && !_closest(originalTarget, options.handle, el)) {
+				return;
+			}
+
+
+			// Prepare `dragstart`
+			this._prepareDragStart(evt, touch, target);
+		},
+
+		_prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target) {
+			var _this = this,
+				el = _this.el,
+				options = _this.options,
+				ownerDocument = el.ownerDocument,
+				dragStartFn;
+
+			if (target && !dragEl && (target.parentNode === el)) {
+				tapEvt = evt;
+
+				rootEl = el;
+				dragEl = target;
+				parentEl = dragEl.parentNode;
+				nextEl = dragEl.nextSibling;
+				activeGroup = options.group;
+
+				dragStartFn = function () {
+					// Delayed drag has been triggered
+					// we can re-enable the events: touchmove/mousemove
+					_this._disableDelayedDrag();
+
+					// Make the element draggable
+					dragEl.draggable = true;
+
+					// Chosen item
+					_toggleClass(dragEl, _this.options.chosenClass, true);
+
+					// Bind the events: dragstart/dragend
+					_this._triggerDragStart(touch);
+				};
+
+				// Disable "draggable"
+				options.ignore.split(',').forEach(function (criteria) {
+					_find(dragEl, criteria.trim(), _disableDraggable);
+				});
+
+				_on(ownerDocument, 'mouseup', _this._onDrop);
+				_on(ownerDocument, 'touchend', _this._onDrop);
+				_on(ownerDocument, 'touchcancel', _this._onDrop);
+
+				if (options.delay) {
+					// If the user moves the pointer or let go the click or touch
+					// before the delay has been reached:
+					// 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, 'touchmove', _this._disableDelayedDrag);
+
+					_this._dragStartTimer = setTimeout(dragStartFn, options.delay);
+				} else {
+					dragStartFn();
+				}
+			}
+		},
+
+		_disableDelayedDrag: function () {
+			var ownerDocument = this.el.ownerDocument;
+
+			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, 'touchmove', this._disableDelayedDrag);
+		},
+
+		_triggerDragStart: function (/** Touch */touch) {
+			if (touch) {
+				// Touch device support
+				tapEvt = {
+					target: dragEl,
+					clientX: touch.clientX,
+					clientY: touch.clientY
+				};
+
+				this._onDragStart(tapEvt, 'touch');
+			}
+			else if (!this.nativeDraggable) {
+				this._onDragStart(tapEvt, true);
+			}
+			else {
+				_on(dragEl, 'dragend', this);
+				_on(rootEl, 'dragstart', this._onDragStart);
+			}
+
+			try {
+				if (document.selection) {
+					document.selection.empty();
+				} else {
+					window.getSelection().removeAllRanges();
+				}
+			} catch (err) {
+			}
+		},
+
+		_dragStarted: function () {
+			if (rootEl && dragEl) {
+				// Apply effect
+				_toggleClass(dragEl, this.options.ghostClass, true);
+
+				Sortable.active = this;
+
+				// Drag start event
+				_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, oldIndex);
+			}
+		},
+
+		_emulateDragOver: function () {
+			if (touchEvt) {
+				if (this._lastX === touchEvt.clientX && this._lastY === touchEvt.clientY) {
+					return;
+				}
+
+				this._lastX = touchEvt.clientX;
+				this._lastY = touchEvt.clientY;
+
+				if (!supportCssPointerEvents) {
+					_css(ghostEl, 'display', 'none');
+				}
+
+				var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY),
+					parent = target,
+					groupName = ' ' + this.options.group.name + '',
+					i = touchDragOverListeners.length;
+
+				if (parent) {
+					do {
+						if (parent[expando] && parent[expando].options.groups.indexOf(groupName) > -1) {
+							while (i--) {
+								touchDragOverListeners[i]({
+									clientX: touchEvt.clientX,
+									clientY: touchEvt.clientY,
+									target: target,
+									rootEl: parent
+								});
+							}
+
+							break;
+						}
+
+						target = parent; // store last element
+					}
+					/* jshint boss:true */
+					while (parent = parent.parentNode);
+				}
+
+				if (!supportCssPointerEvents) {
+					_css(ghostEl, 'display', '');
+				}
+			}
+		},
+
+
+		_onTouchMove: function (/**TouchEvent*/evt) {
+			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,
+					dx = touch.clientX - tapEvt.clientX,
+					dy = touch.clientY - tapEvt.clientY,
+					translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)';
+
+				moved = true;
+				touchEvt = touch;
+
+				_css(ghostEl, 'webkitTransform', translate3d);
+				_css(ghostEl, 'mozTransform', translate3d);
+				_css(ghostEl, 'msTransform', translate3d);
+				_css(ghostEl, 'transform', translate3d);
+
+				evt.preventDefault();
+			}
+		},
+
+		_appendGhost: function () {
+			if (!ghostEl) {
+				var rect = dragEl.getBoundingClientRect(),
+					css = _css(dragEl),
+					options = this.options,
+					ghostRect;
+
+				ghostEl = dragEl.cloneNode(true);
+
+				_toggleClass(ghostEl, options.ghostClass, false);
+				_toggleClass(ghostEl, options.fallbackClass, true);
+
+				_css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10));
+				_css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10));
+				_css(ghostEl, 'width', rect.width);
+				_css(ghostEl, 'height', rect.height);
+				_css(ghostEl, 'opacity', '0.8');
+				_css(ghostEl, 'position', 'fixed');
+				_css(ghostEl, 'zIndex', '100000');
+				_css(ghostEl, 'pointerEvents', 'none');
+
+				options.fallbackOnBody && document.body.appendChild(ghostEl) || rootEl.appendChild(ghostEl);
+
+				// Fixing dimensions.
+				ghostRect = ghostEl.getBoundingClientRect();
+				_css(ghostEl, 'width', rect.width * 2 - ghostRect.width);
+				_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') {
+					// 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);
+				}
+
+				this._loopId = setInterval(this._emulateDragOver, 50);
+			}
+			else {
+				if (dataTransfer) {
+					dataTransfer.effectAllowed = 'move';
+					options.setData && options.setData.call(this, dataTransfer, dragEl);
+				}
+
+				_on(document, 'drop', this);
+				setTimeout(this._dragStarted, 0);
+			}
+		},
+
+		_onDragOver: function (/**Event*/evt) {
+			var el = this.el,
+				target,
+				dragRect,
+				revert,
+				options = this.options,
+				group = options.group,
+				groupPut = group.put,
+				isOwner = (activeGroup === group),
+				canSort = options.sort;
+
+			if (evt.preventDefault !== void 0) {
+				evt.preventDefault();
+				!options.dragoverBubble && evt.stopPropagation();
+			}
+
+			moved = true;
+
+			if (activeGroup && !options.disabled &&
+				(isOwner
+					? canSort || (revert = !rootEl.contains(dragEl)) // Reverting item into the original list
+					: activeGroup.pull && groupPut && (
+						(activeGroup.name === group.name) || // by Name
+						(groupPut.indexOf && ~groupPut.indexOf(activeGroup.name)) // by Array
+					)
+				) &&
+				(evt.rootEl === void 0 || evt.rootEl === this.el) // touch fallback
+			) {
+				// Smart auto-scrolling
+				_autoScroll(evt, options, this.el);
+
+				if (_silent) {
+					return;
+				}
+
+				target = _closest(evt.target, options.draggable, el);
+				dragRect = dragEl.getBoundingClientRect();
+
+				if (revert) {
+					_cloneHide(true);
+
+					if (cloneEl || nextEl) {
+						rootEl.insertBefore(dragEl, cloneEl || nextEl);
+					}
+					else if (!canSort) {
+						rootEl.appendChild(dragEl);
+					}
+
+					return;
+				}
+
+
+				if ((el.children.length === 0) || (el.children[0] === ghostEl) ||
+					(el === evt.target) && (target = _ghostIsLast(el, evt))
+				) {
+
+					if (target) {
+						if (target.animated) {
+							return;
+						}
+
+						targetRect = target.getBoundingClientRect();
+					}
+
+					_cloneHide(isOwner);
+
+					if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect) !== false) {
+						if (!dragEl.contains(el)) {
+							el.appendChild(dragEl);
+							parentEl = el; // actualization
+						}
+
+						this._animate(dragRect, dragEl);
+						target && this._animate(targetRect, target);
+					}
+				}
+				else if (target && !target.animated && target !== dragEl && (target.parentNode[expando] !== void 0)) {
+					if (lastEl !== target) {
+						lastEl = target;
+						lastCSS = _css(target);
+						lastParentCSS = _css(target.parentNode);
+					}
+
+
+					var targetRect = target.getBoundingClientRect(),
+						width = targetRect.right - targetRect.left,
+						height = targetRect.bottom - targetRect.top,
+						floating = /left|right|inline/.test(lastCSS.cssFloat + lastCSS.display)
+							|| (lastParentCSS.display == 'flex' && lastParentCSS['flex-direction'].indexOf('row') === 0),
+						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,
+						moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect),
+						after
+					;
+
+					if (moveVector !== false) {
+						_silent = true;
+						setTimeout(_unsilent, 30);
+
+						_cloneHide(isOwner);
+
+						if (moveVector === 1 || moveVector === -1) {
+							after = (moveVector === 1);
+						}
+						else if (floating) {
+							var elTop = dragEl.offsetTop,
+								tgTop = target.offsetTop;
+
+							if (elTop === tgTop) {
+								after = (target.previousElementSibling === dragEl) && !isWide || halfway && isWide;
+							} else {
+								after = tgTop > elTop;
+							}
+						} else {
+							after = (nextSibling !== dragEl) && !isLong || halfway && isLong;
+						}
+
+						if (!dragEl.contains(el)) {
+							if (after && !nextSibling) {
+								el.appendChild(dragEl);
+							} else {
+								target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
+							}
+						}
+
+						parentEl = dragEl.parentNode; // actualization
+
+						this._animate(dragRect, dragEl);
+						this._animate(targetRect, target);
+					}
+				}
+			}
+		},
+
+		_animate: function (prevRect, target) {
+			var ms = this.options.animation;
+
+			if (ms) {
+				var currentRect = target.getBoundingClientRect();
+
+				_css(target, 'transition', 'none');
+				_css(target, 'transform', 'translate3d('
+					+ (prevRect.left - currentRect.left) + 'px,'
+					+ (prevRect.top - currentRect.top) + 'px,0)'
+				);
+
+				target.offsetWidth; // repaint
+
+				_css(target, 'transition', 'all ' + ms + 'ms');
+				_css(target, 'transform', 'translate3d(0,0,0)');
+
+				clearTimeout(target.animated);
+				target.animated = setTimeout(function () {
+					_css(target, 'transition', '');
+					_css(target, 'transform', '');
+					target.animated = false;
+				}, ms);
+			}
+		},
+
+		_offUpEvents: function () {
+			var ownerDocument = this.el.ownerDocument;
+
+			_off(document, 'touchmove', this._onTouchMove);
+			_off(ownerDocument, 'mouseup', this._onDrop);
+			_off(ownerDocument, 'touchend', this._onDrop);
+			_off(ownerDocument, 'touchcancel', this._onDrop);
+		},
+
+		_onDrop: function (/**Event*/evt) {
+			var el = this.el,
+				options = this.options;
+
+			clearInterval(this._loopId);
+			clearInterval(autoScroll.pid);
+			clearTimeout(this._dragStartTimer);
+
+			// Unbind events
+			_off(document, 'mousemove', this._onTouchMove);
+
+			if (this.nativeDraggable) {
+				_off(document, 'drop', this);
+				_off(el, 'dragstart', this._onDragStart);
+			}
+
+			this._offUpEvents();
+
+			if (evt) {
+				if (moved) {
+					evt.preventDefault();
+					!options.dropBubble && evt.stopPropagation();
+				}
+
+				ghostEl && ghostEl.parentNode.removeChild(ghostEl);
+
+				if (dragEl) {
+					if (this.nativeDraggable) {
+						_off(dragEl, 'dragend', this);
+					}
+
+					_disableDraggable(dragEl);
+
+					// Remove class's
+					_toggleClass(dragEl, this.options.ghostClass, false);
+					_toggleClass(dragEl, this.options.chosenClass, false);
+
+					if (rootEl !== parentEl) {
+						newIndex = _index(dragEl);
+
+						if (newIndex >= 0) {
+							// drag from one list and drop into another
+							_dispatchEvent(null, parentEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
+							_dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
+
+							// Add event
+							_dispatchEvent(null, parentEl, 'add', dragEl, rootEl, oldIndex, newIndex);
+
+							// Remove event
+							_dispatchEvent(this, rootEl, 'remove', dragEl, rootEl, oldIndex, newIndex);
+						}
+					}
+					else {
+						// Remove clone
+						cloneEl && cloneEl.parentNode.removeChild(cloneEl);
+
+						if (dragEl.nextSibling !== nextEl) {
+							// Get the index of the dragged element within its parent
+							newIndex = _index(dragEl);
+
+							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);
+							}
+						}
+					}
+
+					if (Sortable.active) {
+						if (newIndex === null || newIndex === -1) {
+							newIndex = oldIndex;
+						}
+
+						_dispatchEvent(this, rootEl, 'end', dragEl, rootEl, oldIndex, newIndex);
+
+						// Save sorting
+						this.save();
+					}
+				}
+
+				// Nulling
+				rootEl =
+				dragEl =
+				parentEl =
+				ghostEl =
+				nextEl =
+				cloneEl =
+
+				scrollEl =
+				scrollParentEl =
+
+				tapEvt =
+				touchEvt =
+
+				moved =
+				newIndex =
+
+				lastEl =
+				lastCSS =
+
+				activeGroup =
+				Sortable.active = null;
+			}
+		},
+
+
+		handleEvent: function (/**Event*/evt) {
+			var type = evt.type;
+
+			if (type === 'dragover' || type === 'dragenter') {
+				if (dragEl) {
+					this._onDragOver(evt);
+					_globalDragOver(evt);
+				}
+			}
+			else if (type === 'drop' || type === 'dragend') {
+				this._onDrop(evt);
+			}
+		},
+
+
+		/**
+		 * Serializes the item into an array of string.
+		 * @returns {String[]}
+		 */
+		toArray: function () {
+			var order = [],
+				el,
+				children = this.el.children,
+				i = 0,
+				n = children.length,
+				options = this.options;
+
+			for (; i < n; i++) {
+				el = children[i];
+				if (_closest(el, options.draggable, this.el)) {
+					order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));
+				}
+			}
+
+			return order;
+		},
+
+
+		/**
+		 * Sorts the elements according to the array.
+		 * @param  {String[]}  order  order of the items
+		 */
+		sort: function (order) {
+			var items = {}, rootEl = this.el;
+
+			this.toArray().forEach(function (id, i) {
+				var el = rootEl.children[i];
+
+				if (_closest(el, this.options.draggable, rootEl)) {
+					items[id] = el;
+				}
+			}, this);
+
+			order.forEach(function (id) {
+				if (items[id]) {
+					rootEl.removeChild(items[id]);
+					rootEl.appendChild(items[id]);
+				}
+			});
+		},
+
+
+		/**
+		 * Save the current sorting
+		 */
+		save: function () {
+			var store = this.options.store;
+			store && store.set(this);
+		},
+
+
+		/**
+		 * 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);
+		},
+
+
+		/**
+		 * 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;
+
+				if (name === 'group') {
+					_prepareGroup(options);
+				}
+			}
+		},
+
+
+		/**
+		 * Destroy
+		 */
+		destroy: function () {
+			var el = this.el;
+
+			el[expando] = null;
+
+			_off(el, 'mousedown', this._onTapStart);
+			_off(el, 'touchstart', this._onTapStart);
+
+			if (this.nativeDraggable) {
+				_off(el, 'dragover', this);
+				_off(el, 'dragenter', this);
+			}
+
+			// Remove draggable attributes
+			Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) {
+				el.removeAttribute('draggable');
+			});
+
+			touchDragOverListeners.splice(touchDragOverListeners.indexOf(this._onDragOver), 1);
+
+			this._onDrop();
+
+			this.el = el = null;
+		}
+	};
+
+
+	function _cloneHide(state) {
+		if (cloneEl && (cloneEl.state !== state)) {
+			_css(cloneEl, 'display', state ? 'none' : '');
+			!state && cloneEl.state && rootEl.insertBefore(cloneEl, dragEl);
+			cloneEl.state = state;
+		}
+	}
+
+
+	function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) {
+		if (el) {
+			ctx = ctx || document;
+			selector = selector.split('.');
+
+			var tag = selector.shift().toUpperCase(),
+				re = new RegExp('\\s(' + selector.join('|') + ')(?=\\s)', 'g');
+
+			do {
+				if (
+					(tag === '>*' && el.parentNode === ctx) || (
+						(tag === '' || el.nodeName.toUpperCase() == tag) &&
+						(!selector.length || ((' ' + el.className + ' ').match(re) || []).length == selector.length)
+					)
+				) {
+					return el;
+				}
+			}
+			while (el !== ctx && (el = el.parentNode));
+		}
+
+		return null;
+	}
+
+
+	function _globalDragOver(/**Event*/evt) {
+		if (evt.dataTransfer) {
+			evt.dataTransfer.dropEffect = 'move';
+		}
+		evt.preventDefault();
+	}
+
+
+	function _on(el, event, fn) {
+		el.addEventListener(event, fn, false);
+	}
+
+
+	function _off(el, event, fn) {
+		el.removeEventListener(event, fn, false);
+	}
+
+
+	function _toggleClass(el, name, state) {
+		if (el) {
+			if (el.classList) {
+				el.classList[state ? 'add' : 'remove'](name);
+			}
+			else {
+				var className = (' ' + el.className + ' ').replace(RSPACE, ' ').replace(' ' + name + ' ', ' ');
+				el.className = (className + (state ? ' ' + name : '')).replace(RSPACE, ' ');
+			}
+		}
+	}
+
+
+	function _css(el, prop, val) {
+		var style = el && el.style;
+
+		if (style) {
+			if (val === void 0) {
+				if (document.defaultView && document.defaultView.getComputedStyle) {
+					val = document.defaultView.getComputedStyle(el, '');
+				}
+				else if (el.currentStyle) {
+					val = el.currentStyle;
+				}
+
+				return prop === void 0 ? val : val[prop];
+			}
+			else {
+				if (!(prop in style)) {
+					prop = '-webkit-' + prop;
+				}
+
+				style[prop] = val + (typeof val === 'string' ? '' : 'px');
+			}
+		}
+	}
+
+
+	function _find(ctx, tagName, iterator) {
+		if (ctx) {
+			var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length;
+
+			if (iterator) {
+				for (; i < n; i++) {
+					iterator(list[i], i);
+				}
+			}
+
+			return list;
+		}
+
+		return [];
+	}
+
+
+
+	function _dispatchEvent(sortable, rootEl, name, targetEl, fromEl, startIndex, newIndex) {
+		var evt = document.createEvent('Event'),
+			options = (sortable || rootEl[expando]).options,
+			onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);
+
+		evt.initEvent(name, true, true);
+
+		evt.to = rootEl;
+		evt.from = fromEl || rootEl;
+		evt.item = targetEl || rootEl;
+		evt.clone = cloneEl;
+
+		evt.oldIndex = startIndex;
+		evt.newIndex = newIndex;
+
+		rootEl.dispatchEvent(evt);
+
+		if (options[onName]) {
+			options[onName].call(sortable, evt);
+		}
+	}
+
+
+	function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect) {
+		var evt,
+			sortable = fromEl[expando],
+			onMoveFn = sortable.options.onMove,
+			retVal;
+
+		evt = document.createEvent('Event');
+		evt.initEvent('move', true, true);
+
+		evt.to = toEl;
+		evt.from = fromEl;
+		evt.dragged = dragEl;
+		evt.draggedRect = dragRect;
+		evt.related = targetEl || toEl;
+		evt.relatedRect = targetRect || toEl.getBoundingClientRect();
+
+		fromEl.dispatchEvent(evt);
+
+		if (onMoveFn) {
+			retVal = onMoveFn.call(sortable, evt);
+		}
+
+		return retVal;
+	}
+
+
+	function _disableDraggable(el) {
+		el.draggable = false;
+	}
+
+
+	function _unsilent() {
+		_silent = false;
+	}
+
+
+	/** @returns {HTMLElement|false} */
+	function _ghostIsLast(el, evt) {
+		var lastEl = el.lastElementChild,
+				rect = lastEl.getBoundingClientRect();
+
+		return ((evt.clientY - (rect.top + rect.height) > 5) || (evt.clientX - (rect.right + rect.width) > 5)) && lastEl; // min delta
+	}
+
+
+	/**
+	 * Generate id
+	 * @param   {HTMLElement} el
+	 * @returns {String}
+	 * @private
+	 */
+	function _generateId(el) {
+		var str = el.tagName + el.className + el.src + el.href + el.textContent,
+			i = str.length,
+			sum = 0;
+
+		while (i--) {
+			sum += str.charCodeAt(i);
+		}
+
+		return sum.toString(36);
+	}
+
+	/**
+	 * Returns the index of an element within its parent
+	 * @param  {HTMLElement} el
+	 * @return {number}
+	 */
+	function _index(el) {
+		var index = 0;
+
+		if (!el || !el.parentNode) {
+			return -1;
+		}
+
+		while (el && (el = el.previousElementSibling)) {
+			if (el.nodeName.toUpperCase() !== 'TEMPLATE') {
+				index++;
+			}
+		}
+
+		return index;
+	}
+
+	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);
+			}
+		};
+	}
+
+	function _extend(dst, src) {
+		if (dst && src) {
+			for (var key in src) {
+				if (src.hasOwnProperty(key)) {
+					dst[key] = src[key];
+				}
+			}
+		}
+
+		return dst;
+	}
+
+
+	// Export utils
+	Sortable.utils = {
+		on: _on,
+		off: _off,
+		css: _css,
+		find: _find,
+		is: function (el, selector) {
+			return !!_closest(el, selector, el);
+		},
+		extend: _extend,
+		throttle: _throttle,
+		closest: _closest,
+		toggleClass: _toggleClass,
+		index: _index
+	};
+
+
+	/**
+	 * Create sortable instance
+	 * @param {HTMLElement}  el
+	 * @param {Object}      [options]
+	 */
+	Sortable.create = function (el, options) {
+		return new Sortable(el, options);
+	};
+
+
+	// Export
+	Sortable.version = '1.4.2';
+	return Sortable;
+});

app/assets/javascripts/Sortable/jquery.binding.js

+/**
+ * jQuery plugin for Sortable
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @license MIT
+ */
+(function (factory) {
+	"use strict";
+
+	if (typeof define === "function" && define.amd) {
+		define(["jquery"], factory);
+	}
+	else {
+		/* jshint sub:true */
+		factory(jQuery);
+	}
+})(function ($) {
+	"use strict";
+
+
+	/* CODE */
+
+
+	/**
+	 * jQuery plugin for Sortable
+	 * @param   {Object|String} options
+	 * @param   {..*}           [args]
+	 * @returns {jQuery|*}
+	 */
+	$.fn.sortable = function (options) {
+		var retVal,
+			args = arguments;
+
+		this.each(function () {
+			var $el = $(this),
+				sortable = $el.data('sortable');
+
+			if (!sortable && (options instanceof Object || !options)) {
+				sortable = new Sortable(this, options);
+				$el.data('sortable', sortable);
+			}
+
+			if (sortable) {
+				if (options === 'widget') {
+					return sortable;
+				}
+				else if (options === 'destroy') {
+					sortable.destroy();
+					$el.removeData('sortable');
+				}
+				else if (typeof sortable[options] === 'function') {
+					retVal = sortable[options].apply(sortable, [].slice.call(args, 1));
+				}
+				else if (options in sortable.options) {
+					retVal = sortable.option.apply(sortable, args);
+				}
+			}
+		});
+
+		return (retVal === void 0) ? this : retVal;
+	};
+});

app/assets/javascripts/Sortable/knockout-sortable.js

+(function (factory) {
+    "use strict";
+    if (typeof define === "function" && define.amd) {
+        // AMD anonymous module
+        define(["knockout"], factory);
+    } else if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
+        // CommonJS module
+        var ko = require("knockout");
+        factory(ko);
+    } else {
+        // No module loader (plain <script> tag) - put directly in global namespace
+        factory(window.ko);
+    }
+})(function (ko) {
+    "use strict";
+
+    var init = function (element, valueAccessor, allBindings, viewModel, bindingContext, sortableOptions) {
+
+        var options = buildOptions(valueAccessor, sortableOptions);
+
+        //It's seems that we cannot update the eventhandlers after we've created the sortable, so define them in init instead of update
+        ['onStart', 'onEnd', 'onRemove', 'onAdd', 'onUpdate', 'onSort', 'onFilter'].forEach(function (e) {
+            if (options[e] || eventHandlers[e])
+                options[e] = function (eventType, parentVM, parentBindings, handler, e) {
+                    var itemVM = ko.dataFor(e.item),
+                        //All of the bindings on the parent element
+                        bindings = ko.utils.peekObservable(parentBindings()),
+                        //The binding options for the draggable/sortable binding of the parent element
+                        bindingHandlerBinding = bindings.sortable || bindings.draggable,
+                        //The collection that we should modify
+                        collection = bindingHandlerBinding.collection || bindingHandlerBinding.foreach;
+                    if (handler)
+                        handler(e, itemVM, parentVM, collection, bindings);
+                    if (eventHandlers[eventType])
+                        eventHandlers[eventType](e, itemVM, parentVM, collection, bindings);
+                }.bind(undefined, e, viewModel, allBindings, options[e]);
+        });
+
+        var sortableElement = Sortable.create(element, options);
+
+        //Destroy the sortable if knockout disposes the element it's connected to
+        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
+            sortableElement.destroy();
+        });
+        return ko.bindingHandlers.template.init(element, valueAccessor);
+    },
+    update = function (element, valueAccessor, allBindings, viewModel, bindingContext, sortableOptions) {
+
+        //There seems to be some problems with updating the options of a sortable
+        //Tested to change eventhandlers and the group options without any luck
+
+        return ko.bindingHandlers.template.update(element, valueAccessor, allBindings, viewModel, bindingContext);
+    },
+    eventHandlers = (function (handlers) {
+
+        var moveOperations = [],
+            tryMoveOperation = function (e, itemVM, parentVM, collection, parentBindings) {
+                //A move operation is the combination of a add and remove event, this is to make sure that we have both the target and origin collections
+                var currentOperation = { event: e, itemVM: itemVM, parentVM: parentVM, collection: collection, parentBindings: parentBindings },
+                    existingOperation = moveOperations.filter(function (op) {
+                        return op.itemVM === currentOperation.itemVM;
+                    })[0];
+
+                if (!existingOperation) {
+                    moveOperations.push(currentOperation);
+                }
+                else {
+                    //We're finishing the operation and already have a handle on the operation item meaning that it's safe to remove it
+                    moveOperations.splice(moveOperations.indexOf(existingOperation), 1);
+
+                    var removeOperation = currentOperation.event.type === 'remove' ? currentOperation : existingOperation,
+                        addOperation = currentOperation.event.type === 'add' ? currentOperation : existingOperation;
+
+                    moveItem(itemVM, removeOperation.collection, addOperation.collection, addOperation.event.clone, addOperation.event);
+                }
+            },
+            //Moves an item from the to (collection to from (collection), these can be references to the same collection which means it's a sort,
+            //clone indicates if we should move or copy the item into the new collection
+            moveItem = function (itemVM, from, to, clone, e) {
+                //Unwrapping this allows us to manipulate the actual array
+                var fromArray = from(),
+                    //It's not certain that the items actual index is the same as the index reported by sortable due to filtering etc.
+                    originalIndex = fromArray.indexOf(itemVM),
+                    newIndex = e.newIndex;
+
+                if (e.item.previousElementSibling)
+                {
+                    newIndex = fromArray.indexOf(ko.dataFor(e.item.previousElementSibling));
+                    if (originalIndex > newIndex)
+                        newIndex = newIndex + 1;
+                }                
+
+                //Remove sortables "unbound" element
+                e.item.parentNode.removeChild(e.item);
+
+                //This splice is necessary for both clone and move/sort
+                //In sort/move since it shouldn't be at this index/in this array anymore
+                //In clone since we have to work around knockouts valuHasMutated when manipulating arrays and avoid a "unbound" item added by sortable
+                fromArray.splice(originalIndex, 1);
+                //Update the array, this will also remove sortables "unbound" clone
+                from.valueHasMutated();
+                if (clone && from !== to) {
+                    //Readd the item
+                    fromArray.splice(originalIndex, 0, itemVM);
+                    //Force knockout to update
+                    from.valueHasMutated();
+                }
+                //Insert the item on its new position
+                to().splice(newIndex, 0, itemVM);
+                //Make sure to tell knockout that we've modified the actual array.
+                to.valueHasMutated();
+            };
+
+        handlers.onRemove = tryMoveOperation;
+        handlers.onAdd = tryMoveOperation;
+        handlers.onUpdate = function (e, itemVM, parentVM, collection, parentBindings) {
+            //This will be performed as a sort since the to/from collections reference the same collection and clone is set to false
+            moveItem(itemVM, collection, collection, false, e);
+        };
+
+        return handlers;
+    })({}),
+    //bindingOptions are the options set in the "data-bind" attribute in the ui.
+    //options are custom options, for instance draggable/sortable specific options
+    buildOptions = function (bindingOptions, options) {
+        //deep clone/copy of properties from the "from" argument onto the "into" argument and returns the modified "into"
+        var merge = function (into, from) {
+            for (var prop in from) {
+                if (Object.prototype.toString.call(from[prop]) === '[object Object]') {
+                    if (Object.prototype.toString.call(into[prop]) !== '[object Object]') {
+                        into[prop] = {};
+                    }
+                    into[prop] = merge(into[prop], from[prop]);
+                }
+                else
+                    into[prop] = from[prop];
+            }
+
+            return into;
+        },
+        //unwrap the supplied options
+        unwrappedOptions = ko.utils.peekObservable(bindingOptions()).options || {};
+
+        //Make sure that we don't modify the provided settings object
+        options = merge({}, options);
+
+        //group is handled differently since we should both allow to change a draggable to a sortable (and vice versa),
+        //but still be able to set a name on a draggable without it becoming a drop target.
+        if (unwrappedOptions.group && Object.prototype.toString.call(unwrappedOptions.group) !== '[object Object]') {
+            //group property is a name string declaration, convert to object.
+            unwrappedOptions.group = { name: unwrappedOptions.group };
+        }
+
+        return merge(options, unwrappedOptions);
+    };
+
+    ko.bindingHandlers.draggable = {
+        sortableOptions: {
+            group: { pull: 'clone', put: false },
+            sort: false
+        },
+        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+            return init(element, valueAccessor, allBindings, viewModel, bindingContext, ko.bindingHandlers.draggable.sortableOptions);
+        },
+        update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+            return update(element, valueAccessor, allBindings, viewModel, bindingContext, ko.bindingHandlers.draggable.sortableOptions);
+        }
+    };
+
+    ko.bindingHandlers.sortable = {
+        sortableOptions: {
+            group: { pull: true, put: true }
+        },
+        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+            return init(element, valueAccessor, allBindings, viewModel, bindingContext, ko.bindingHandlers.sortable.sortableOptions);
+        },
+        update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+            return update(element, valueAccessor, allBindings, viewModel, bindingContext, ko.bindingHandlers.sortable.sortableOptions);
+        }
+    };
+
+});

app/assets/javascripts/Sortable/meteor/example/client/define-object-type.js

+// Define an object type by dragging together attributes
+
+Template.typeDefinition.helpers({
+  types: function () {
+    return Types.find({}, { sort: { order: 1 } });
+  },
+  typesOptions: {
+    sortField: 'order',  // defaults to 'order' anyway
+    group: {
+      name: 'typeDefinition',
+      pull: 'clone',
+      put: false
+    },
+    sort: false  // don't allow reordering the types, just the attributes below
+  },
+
+  attributes: function () {
+    return Attributes.find({}, {
+      sort: { order: 1 },
+      transform: function (doc) {
+        doc.icon = Types.findOne({name: doc.type}).icon;
+        return doc;
+      }
+    });
+  },
+  attributesOptions: {
+    group: {
+      name: 'typeDefinition',
+      put: true
+    },
+    onAdd: function (event) {
+      delete event.data._id; // Generate a new id when inserting in the Attributes collection. Otherwise, if we add the same type twice, we'll get an error that the ids are not unique.
+      delete event.data.icon;
+      event.data.type = event.data.name;
+      event.data.name = 'Rename me (double click)'
+    },
+    // event handler for reordering attributes
+    onSort: function (event) {
+      console.log('Item %s went from #%d to #%d',
+          event.data.name, event.oldIndex, event.newIndex
+      );
+    }
+  }
+});
+
+Template.sortableItemTarget.events({
+  'dblclick .name': function (event, template) {
+    // Make the name editable. We should use an existing component, but it's
+    // in a sorry state - https://github.com/arillo/meteor-x-editable/issues/1
+    var name = template.$('.name');
+    var input = template.$('input');
+    if (input.length) {  // jQuery never returns null - http://stackoverflow.com/questions/920236/how-can-i-detect-if-a-selector-returns-null
+      input.show();
+    } else {
+      input = $('<input class="form-control" type="text" placeholder="' + this.name + '" style="display: inline">');
+      name.after(input);
+    }
+    name.hide();
+    input.focus();
+  },
+  'blur input[type=text]': function (event, template) {
+    // commit the change to the name, if any
+    var input = template.$('input');
+    input.hide();
+    template.$('.name').show();
+    // TODO - what is the collection here? We'll hard-code for now.
+    // https://github.com/meteor/meteor/issues/3303
+    if (this.name !== input.val() && this.name !== '')
+      Attributes.update(this._id, {$set: {name: input.val()}});
+  },
+  'keydown input[type=text]': function (event, template) {
+    if (event.which === 27) {
+      // ESC - discard edits and keep existing value
+      template.$('input').val(this.name);
+      event.preventDefault();
+      event.target.blur();
+    } else if (event.which === 13) {
+      // ENTER
+      event.preventDefault();
+      event.target.blur();
+    }
+  }
+});
+
+// you can add events to all Sortable template instances
+Template.sortable.events({
+  'click .close': function (event, template) {
+    // `this` is the data context set by the enclosing block helper (#each, here)
+    template.collection.remove(this._id);
+    // custom code, working on a specific collection
+    if (Attributes.find().count() === 0) {
+      Meteor.setTimeout(function () {
+        Attributes.insert({
+          name: 'Not nice to delete the entire list! Add some attributes instead.',
+          type: 'String',
+          order: 0
+        })
+      }, 1000);
+    }
+  }
+});

app/assets/javascripts/Sortable/meteor/example/model.js

+Types = new Mongo.Collection('types');
+Attributes = new Mongo.Collection('attributes');

app/assets/javascripts/Sortable/meteor/example/server/fixtures.js

+Meteor.startup(function () {
+  if (Types.find().count() === 0) {
+    [
+      {
+        name: 'String',
+        icon: '<span class="glyphicon glyphicon-tag" aria-hidden="true"></span>'
+      },
+      {
+        name: 'Text, multi-line',
+        icon: '<i class="mdi-communication-message" aria-hidden="true"></i>'
+      },
+      {
+        name: 'Category',
+        icon: '<span class="glyphicon glyphicon-list" aria-hidden="true"></span>'
+      },
+      {
+        name: 'Number',
+        icon: '<i class="mdi-image-looks-one" aria-hidden="true"></i>'
+      },
+      {
+        name: 'Date',
+        icon: '<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>'
+      },
+      {
+        name: 'Hyperlink',
+        icon: '<span class="glyphicon glyphicon-link" aria-hidden="true"></span>'
+      },
+      {
+        name: 'Image',
+        icon: '<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>'
+      },
+      {
+        name: 'Progress',
+        icon: '<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>'
+      },
+      {
+        name: 'Duration',
+        icon: '<span class="glyphicon glyphicon-time" aria-hidden="true"></span>'
+      },
+      {
+        name: 'Map address',
+        icon: '<i class="mdi-maps-place" aria-hidden="true"></i>'
+      },
+      {
+        name: 'Relationship',
+        icon: '<span class="glyphicon glyphicon-flash" aria-hidden="true"></span>'
+      }
+    ].forEach(function (type, i) {
+        Types.insert({
+          name: type.name,
+          icon: type.icon,
+          order: i
+        });
+      }
+    );
+    console.log('Initialized attribute types.');
+  }
+
+  if (Attributes.find().count() === 0) {
+    [
+      { name: 'Name', type: 'String' },
+      { name: 'Created at', type: 'Date' },
+      { name: 'Link', type: 'Hyperlink' },
+      { name: 'Owner', type: 'Relationship' }
+    ].forEach(function (attribute, i) {
+        Attributes.insert({
+          name: attribute.name,
+          type: attribute.type,
+          order: i
+        });
+      }
+    );
+    console.log('Created sample object type.');
+  }
+});

app/assets/javascripts/Sortable/meteor/example/server/sortable-collections.js

+'use strict';
+
+Sortable.collections = ['attributes'];

app/assets/javascripts/Sortable/meteor/methods-client.js

+'use strict';
+
+Meteor.methods({
+	/**
+	 * Update the sortField of documents with given ids in a collection, incrementing it by incDec
+	 * @param {String} collectionName - name of the collection to update
+	 * @param {String[]} ids - array of document ids
+	 * @param {String} orderField - the name of the order field, usually "order"
+	 * @param {Number} incDec - pass 1 or -1
+	 */
+	'rubaxa:sortable/collection-update': function (collectionName, ids, sortField, incDec) {
+		var selector = {_id: {$in: ids}}, modifier = {$inc: {}};
+		modifier.$inc[sortField] = incDec;
+		Mongo.Collection.get(collectionName).update(selector, modifier, {multi: true});
+	}
+});

app/assets/javascripts/Sortable/meteor/methods-server.js

+'use strict';
+
+Sortable = {};
+Sortable.collections = [];  // array of collection names that the client is allowed to reorder
+
+Meteor.methods({
+	/**
+	 * Update the sortField of documents with given ids in a collection, incrementing it by incDec
+	 * @param {String} collectionName - name of the collection to update
+	 * @param {String[]} ids - array of document ids
+	 * @param {String} orderField - the name of the order field, usually "order"
+	 * @param {Number} incDec - pass 1 or -1
+	 */
+	'rubaxa:sortable/collection-update': function (collectionName, ids, sortField, incDec) {
+		check(collectionName, String);
+		// don't allow the client to modify just any collection
+		if (!Sortable || !Array.isArray(Sortable.collections)) {
+			throw new Meteor.Error(500, 'Please define Sortable.collections');
+		}
+		if (Sortable.collections.indexOf(collectionName) === -1) {
+			throw new Meteor.Error(403, 'Collection <' + collectionName + '> is not Sortable. Please add it to Sortable.collections in server code.');
+		}
+
+		check(ids, [String]);
+		check(sortField, String);
+		check(incDec, Number);
+		var selector = {_id: {$in: ids}}, modifier = {$inc: {}};
+		modifier.$inc[sortField] = incDec;
+		Mongo.Collection.get(collectionName).update(selector, modifier, {multi: true});
+	}
+});

app/assets/javascripts/Sortable/meteor/package.js

+// Package metadata file for Meteor.js
+'use strict';
+
+var packageName = 'rubaxa:sortable';  // https://atmospherejs.com/rubaxa/sortable
+var gitHubPath = 'RubaXa/Sortable';  // https://github.com/RubaXa/Sortable
+var npmPackageName = 'sortablejs';  // https://www.npmjs.com/package/sortablejs - optional but recommended; used as fallback if GitHub fails
+
+/* All of the below is just to get the version number of the 3rd party library.
+ * First we'll try to read it from package.json. This works when publishing or testing the package
+ * but not when running an example app that uses a local copy of the package because the current 
+ * directory will be that of the app, and it won't have package.json. Finding the path of a file is hard:
+ * http://stackoverflow.com/questions/27435797/how-do-i-obtain-the-path-of-a-file-in-a-meteor-package
+ * Therefore, we'll fall back to GitHub (which is more frequently updated), and then to NPMJS.
+ * We also don't have the HTTP package at this stage, and if we use Package.* in the request() callback,
+ * it will error that it must be run in a Fiber. So we'll use Node futures.
+ */
+var request = Npm.require('request');
+var Future = Npm.require('fibers/future');
+
+var fut = new Future;
+var version;
+
+if (!version) try {
+  var packageJson = JSON.parse(Npm.require('fs').readFileSync('../package.json'));
+  version = packageJson.version;
+} catch (e) {
+  // if the file was not found, fall back to GitHub
+  console.warn('Could not find ../package.json to read version number from; trying GitHub...');
+  var url = 'https://api.github.com/repos/' + gitHubPath + '/tags';
+  request.get({
+    url: url,
+    headers: {
+      'User-Agent': 'request'  // GitHub requires it
+    }
+  }, function (error, response, body) {
+    if (!error && response.statusCode === 200) {
+      var versions = JSON.parse(body).map(function (version) {
+        return version['name'].replace(/^\D+/, '')  // trim leading non-digits from e.g. "v4.3.0"
+      }).sort();
+      fut.return(versions[versions.length -1]);
+    } else {
+      // GitHub API rate limit reached? Fall back to npmjs.
+      console.warn('GitHub request to', url, 'failed:\n ', response && response.statusCode, response && response.body, error || '', '\nTrying NPMJS...');
+      url = 'http://registry.npmjs.org/' + npmPackageName + '/latest';
+      request.get(url, function (error, response, body) {
+        if (!error && response.statusCode === 200)
+          fut.return(JSON.parse(body).version);
+        else
+          fut.throw('Could not get version information from ' + url + ' either (incorrect package name?):\n' + (response && response.statusCode || '') + (response && response.body || '') + (error || ''));
+      });
+    }
+  });
+
+  version = fut.wait();
+}
+
+// Now that we finally have an accurate version number...
+Package.describe({
+  name: packageName,
+  summary: 'Sortable: reactive minimalist reorderable drag-and-drop lists on modern browsers and touch devices',
+  version: version,
+  git: 'https://github.com/RubaXa/Sortable.git',
+  documentation: 'README.md'
+});
+
+Package.onUse(function (api) {
+  api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
+  api.use('templating', 'client');
+  api.use('dburles:mongo-collection-instances@0.3.4');  // to watch collections getting created
+  api.export('Sortable');  // exported on the server too, as a global to hold the array of sortable collections (for security)
+  api.addFiles([
+    '../Sortable.js',
+    'template.html',  // the HTML comes first, so reactivize.js can refer to the template in it
+    'reactivize.js'
+  ], 'client');
+  api.addFiles('methods-client.js', 'client');
+  api.addFiles('methods-server.js', 'server');
+});
+
+Package.onTest(function (api) {
+  api.use(packageName, 'client');
+  api.use('tinytest', 'client');
+
+  api.addFiles('test.js', 'client');
+});

app/assets/javascripts/Sortable/meteor/reactivize.js

+/*
+Make a Sortable reactive by binding it to a Mongo.Collection.
+Calls `rubaxa:sortable/collection-update` on the server to update the sortField of affected records.
+
+TODO:
+  * supply consecutive values if the `order` field doesn't have any
+  * .get(DOMElement) - return the Sortable object of a DOMElement
+  * create a new _id automatically onAdd if the event.from list had pull: 'clone'
+  * support arrays
+    * sparse arrays
+  * tests
+    * drop onto existing empty lists
+    * insert back into lists emptied by dropping
+    * performance on dragging into long list at the beginning
+  * handle failures on Collection operations, e.g. add callback to .insert
+  * when adding elements, update ranks just for the half closer to the start/end of the list
+  * revisit http://programmers.stackexchange.com/questions/266451/maintain-ordered-collection-by-updating-as-few-order-fields-as-possible
+  * reproduce the insidious bug where the list isn't always sorted (fiddle with dragging #1 over #2, then back, then #N before #1)
+
+ */
+
+'use strict';
+
+Template.sortable.created = function () {
+	var templateInstance = this;
+	// `this` is a template instance that can store properties of our choice - http://docs.meteor.com/#/full/template_inst
+	if (templateInstance.setupDone) return;  // paranoid: only run setup once
+	// this.data is the data context - http://docs.meteor.com/#/full/template_data
+	// normalize all options into templateInstance.options, and remove them from .data
+	templateInstance.options = templateInstance.data.options || {};
+	Object.keys(templateInstance.data).forEach(function (key) {
+		if (key === 'options' || key === 'items') return;
+		templateInstance.options[key] = templateInstance.data[key];
+		delete templateInstance.data[key];
+	});
+	templateInstance.options.sortField = templateInstance.options.sortField || 'order';
+	// We can get the collection via the .collection property of the cursor, but changes made that way
+	// will NOT be sent to the server - https://github.com/meteor/meteor/issues/3271#issuecomment-66656257
+	// Thus we need to use dburles:mongo-collection-instances to get a *real* collection
+	if (templateInstance.data.items && templateInstance.data.items.collection) {
+		// cursor passed via items=; its .collection works client-only and has a .name property
+		templateInstance.collectionName = templateInstance.data.items.collection.name;
+		templateInstance.collection = Mongo.Collection.get(templateInstance.collectionName);
+	}	else if (templateInstance.data.items) {
+		// collection passed via items=; does NOT have a .name property, but _name
+		templateInstance.collection = templateInstance.data.items;
+		templateInstance.collectionName = templateInstance.collection._name;
+	}	else if (templateInstance.data.collection) {
+	  // cursor passed directly
+		templateInstance.collectionName = templateInstance.data.collection.name;
+		templateInstance.collection = Mongo.Collection.get(templateInstance.collectionName);
+	} else {
+		templateInstance.collection = templateInstance.data;  // collection passed directly
+		templateInstance.collectionName = templateInstance.collection._name;
+	}
+
+	// TODO if (Array.isArray(templateInstance.collection))
+
+	// What if user filters some of the items in the cursor, instead of ordering the entire collection?
+	// Use case: reorder by preference movies of a given genre, a filter within all movies.
+	// A: Modify all intervening items **that are on the client**, to preserve the overall order
+	// TODO: update *all* orders via a server method that takes not ids, but start & end elements - mild security risk
+	delete templateInstance.data.options;
+
+	/**
+	 * When an element was moved, adjust its orders and possibly the order of
+	 * other elements, so as to maintain a consistent and correct order.
+	 *
+	 * There are three approaches to this:
+	 * 1) Using arbitrary precision arithmetic and setting only the order of the moved
+	 *    element to the average of the orders of the elements around it -
+	 *    http://programmers.stackexchange.com/questions/266451/maintain-ordered-collection-by-updating-as-few-order-fields-as-possible
+	 *    The downside is that the order field in the DB will increase by one byte every
+	 *    time an element is reordered.
+	 * 2) Adjust the orders of the intervening items. This keeps the orders sane (integers)
+	 *    but is slower because we have to modify multiple documents.
+	 *    TODO: we may be able to update fewer records by only altering the
+	 *    order of the records between the newIndex/oldIndex and the start/end of the list.
+	 * 3) Use regular precision arithmetic, but when the difference between the orders of the
+	 *    moved item and the one before/after it falls below a certain threshold, adjust
+	 *    the order of that other item, and cascade doing so up or down the list.
+	 *    This will keep the `order` field constant in size, and will only occasionally
+	 *    require updating the `order` of other records.
+	 *
+	 * For now, we use approach #2.
+	 *
+	 * @param {String} itemId - the _id of the item that was moved
+	 * @param {Number} orderPrevItem - the order of the item before it, or null
+	 * @param {Number} orderNextItem - the order of the item after it, or null
+	 */
+	templateInstance.adjustOrders = function adjustOrders(itemId, orderPrevItem, orderNextItem) {
+		var orderField = templateInstance.options.sortField;
+		var selector = templateInstance.options.selector || {}, modifier = {$set: {}};
+		var ids = [];
+		var startOrder = templateInstance.collection.findOne(itemId)[orderField];
+		if (orderPrevItem !== null) {
+			// Element has a previous sibling, therefore it was moved down in the list.
+			// Decrease the order of intervening elements.
+			selector[orderField] = {$lte: orderPrevItem, $gt: startOrder};
+			ids = _.pluck(templateInstance.collection.find(selector, {fields: {_id: 1}}).fetch(), '_id');
+			Meteor.call('rubaxa:sortable/collection-update', templateInstance.collectionName, ids, orderField, -1);
+
+			// Set the order of the dropped element to the order of its predecessor, whose order was decreased
+			modifier.$set[orderField] = orderPrevItem;
+		} else {
+			// element moved up the list, increase order of intervening elements
+			selector[orderField] = {$gte: orderNextItem, $lt: startOrder};
+			ids = _.pluck(templateInstance.collection.find(selector, {fields: {_id: 1}}).fetch(), '_id');
+			Meteor.call('rubaxa:sortable/collection-update', templateInstance.collectionName, ids, orderField, 1);
+
+			// Set the order of the dropped element to the order of its successor, whose order was increased
+			modifier.$set[orderField] = orderNextItem;
+		}
+		templateInstance.collection.update(itemId, modifier);
+	};
+
+	templateInstance.setupDone = true;
+};
+
+
+Template.sortable.rendered = function () {
+  var templateInstance = this;
+	var orderField = templateInstance.options.sortField;
+
+	// sorting was changed within the list
+	var optionsOnUpdate = templateInstance.options.onUpdate;
+	templateInstance.options.onUpdate = function sortableUpdate(/**Event*/event) {
+		var itemEl = event.item;  // dragged HTMLElement
+		event.data = Blaze.getData(itemEl);
+		if (event.newIndex < event.oldIndex) {
+			// Element moved up in the list. The dropped element has a next sibling for sure.
+			var orderNextItem = Blaze.getData(itemEl.nextElementSibling)[orderField];
+			templateInstance.adjustOrders(event.data._id, null, orderNextItem);
+		} else if (event.newIndex > event.oldIndex) {
+			// Element moved down in the list. The dropped element has a previous sibling for sure.
+			var orderPrevItem = Blaze.getData(itemEl.previousElementSibling)[orderField];
+			templateInstance.adjustOrders(event.data._id, orderPrevItem, null);
+		} else {
+			// do nothing - drag and drop in the same location
+		}
+		if (optionsOnUpdate) optionsOnUpdate(event);
+	};
+
+	// element was added from another list
+	var optionsOnAdd = templateInstance.options.onAdd;
+	templateInstance.options.onAdd = function sortableAdd(/**Event*/event) {
+		var itemEl = event.item;  // dragged HTMLElement
+		event.data = Blaze.getData(itemEl);
+		// let the user decorate the object with additional properties before insertion
+		if (optionsOnAdd) optionsOnAdd(event);
+
+		// Insert the new element at the end of the list and move it where it was dropped.
+		// We could insert it at the beginning, but that would lead to negative orders.
+		var sortSpecifier = {}; sortSpecifier[orderField] = -1;
+		event.data.order = templateInstance.collection.findOne({}, { sort: sortSpecifier, limit: 1 }).order + 1;
+		// TODO: this can obviously be optimized by setting the order directly as the arithmetic average, with the caveats described above
+		var newElementId = templateInstance.collection.insert(event.data);
+		event.data._id = newElementId;
+		if (itemEl.nextElementSibling) {
+			var orderNextItem = Blaze.getData(itemEl.nextElementSibling)[orderField];
+			templateInstance.adjustOrders(newElementId, null, orderNextItem);
+		} else {
+			// do nothing - inserted after the last element
+		}
+		// remove the dropped HTMLElement from the list because we have inserted it in the collection, which will update the template
+		itemEl.parentElement.removeChild(itemEl);
+	};
+
+	// element was removed by dragging into another list
+	var optionsOnRemove = templateInstance.options.onRemove;
+	templateInstance.options.onRemove = function sortableRemove(/**Event*/event) {
+		var itemEl = event.item;  // dragged HTMLElement
+		event.data = Blaze.getData(itemEl);
+		// don't remove from the collection if group.pull is clone or false
+		if (typeof templateInstance.options.group === 'undefined'
+				|| typeof templateInstance.options.group.pull === 'undefined'
+				|| templateInstance.options.group.pull === true
+		) templateInstance.collection.remove(event.data._id);
+		if (optionsOnRemove) optionsOnRemove(event);
+	};
+
+	// just compute the `data` context
+	['onStart', 'onEnd', 'onSort', 'onFilter'].forEach(function (eventHandler) {
+		if (templateInstance.options[eventHandler]) {
+			var userEventHandler = templateInstance.options[eventHandler];
+			templateInstance.options[eventHandler] = function (/**Event*/event) {
+				var itemEl = event.item;  // dragged HTMLElement
+				event.data = Blaze.getData(itemEl);
+				userEventHandler(event);
+			};
+		}
+	});
+
+	templateInstance.sortable = Sortable.create(templateInstance.firstNode.parentElement, templateInstance.options);
+	// TODO make the object accessible, e.g. via Sortable.getSortableById() or some such
+};
+
+
+Template.sortable.destroyed = function () {
+	if(this.sortable) this.sortable.destroy();
+};

app/assets/javascripts/Sortable/meteor/test.js

+'use strict';
+
+Tinytest.add('Sortable.is', function (test) {
+  var items = document.createElement('ul');
+  items.innerHTML = '<li data-id="one">item 1</li><li data-id="two">item 2</li><li data-id="three">item 3</li>';
+  var sortable = new Sortable(items);
+  test.instanceOf(sortable, Sortable, 'Instantiation OK');
+  test.length(sortable.toArray(), 3, 'Three elements');
+});

app/assets/javascripts/Sortable/ng-sortable.js

+/**
+ * @author RubaXa <trash@rubaxa.org>
+ * @licence MIT
+ */
+(function (factory) {
+	'use strict';
+
+	if (typeof define === 'function' && define.amd) {
+		define(['angular', './Sortable'], factory);
+	}
+	else if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
+		require('angular');
+		factory(angular, require('./Sortable'));
+		module.exports = 'ng-sortable';
+	}
+	else if (window.angular && window.Sortable) {
+		factory(angular, Sortable);
+	}
+})(function (angular, Sortable) {
+	'use strict';
+
+
+	/**
+	 * @typedef   {Object}        ngSortEvent
+	 * @property  {*}             model      List item
+	 * @property  {Object|Array}  models     List of items
+	 * @property  {number}        oldIndex   before sort
+	 * @property  {number}        newIndex   after sort
+	 */
+
+	var expando = 'Sortable:ng-sortable';
+
+	angular.module('ng-sortable', [])
+		.constant('ngSortableVersion', '0.4.0')
+		.constant('ngSortableConfig', {})
+		.directive('ngSortable', ['$parse', 'ngSortableConfig', function ($parse, ngSortableConfig) {
+			var removed,
+				nextSibling,
+				getSourceFactory = function getSourceFactory(el, scope) {
+					var ngRepeat = [].filter.call(el.childNodes, function (node) {
+						return (
+								(node.nodeType === 8) &&
+								(node.nodeValue.indexOf('ngRepeat:') !== -1)
+							);
+					})[0];
+
+					if (!ngRepeat) {
+						// Without ng-repeat
+						return function () {
+							return null;
+						};
+					}
+
+					// tests: http://jsbin.com/kosubutilo/1/edit?js,output
+					ngRepeat = ngRepeat.nodeValue.match(/ngRepeat:\s*(?:\(.*?,\s*)?([^\s)]+)[\s)]+in\s+([^\s|]+)/);
+
+					var itemsExpr = $parse(ngRepeat[2]);
+
+					return function () {
+						return itemsExpr(scope.$parent) || [];
+					};
+				};
+
+
+			// Export
+			return {
+				restrict: 'AC',
+				scope: { ngSortable: "=?" },
+				link: function (scope, $el) {
+					var el = $el[0],
+						options = angular.extend(scope.ngSortable || {}, ngSortableConfig),
+						watchers = [],
+						getSource = getSourceFactory(el, scope),
+						sortable
+					;
+
+					el[expando] = getSource;
+
+					function _emitEvent(/**Event*/evt, /*Mixed*/item) {
+						var name = 'on' + evt.type.charAt(0).toUpperCase() + evt.type.substr(1);
+						var source = getSource();
+
+						/* jshint expr:true */
+						options[name] && options[name]({
+							model: item || source[evt.newIndex],
+							models: source,
+							oldIndex: evt.oldIndex,
+							newIndex: evt.newIndex
+						});
+					}
+
+
+					function _sync(/**Event*/evt) {
+						var items = getSource();
+
+						if (!items) {
+							// Without ng-repeat
+							return;
+						}
+
+						var oldIndex = evt.oldIndex,
+							newIndex = evt.newIndex;
+
+						if (el !== evt.from) {
+							var prevItems = evt.from[expando]();
+
+							removed = prevItems[oldIndex];
+
+							if (evt.clone) {
+								removed = angular.copy(removed);
+								prevItems.splice(Sortable.utils.index(evt.clone), 0, prevItems.splice(oldIndex, 1)[0]);
+								evt.from.removeChild(evt.clone);
+							}
+							else {
+								prevItems.splice(oldIndex, 1);
+							}
+
+							items.splice(newIndex, 0, removed);
+
+							evt.from.insertBefore(evt.item, nextSibling); // revert element
+						}
+						else {
+							items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]);
+						}
+
+						scope.$apply();
+					}
+
+
+					sortable = Sortable.create(el, Object.keys(options).reduce(function (opts, name) {
+						opts[name] = opts[name] || options[name];
+						return opts;
+					}, {
+						onStart: function (/**Event*/evt) {
+							nextSibling = evt.item.nextSibling;
+							_emitEvent(evt);
+							scope.$apply();
+						},
+						onEnd: function (/**Event*/evt) {
+							_emitEvent(evt, removed);
+							scope.$apply();
+						},
+						onAdd: function (/**Event*/evt) {
+							_sync(evt);
+							_emitEvent(evt, removed);
+							scope.$apply();
+						},
+						onUpdate: function (/**Event*/evt) {
+							_sync(evt);
+							_emitEvent(evt);
+						},
+						onRemove: function (/**Event*/evt) {
+							_emitEvent(evt, removed);
+						},
+						onSort: function (/**Event*/evt) {
+							_emitEvent(evt);
+						}
+					}));
+
+					$el.on('$destroy', function () {
+						angular.forEach(watchers, function (/** Function */unwatch) {
+							unwatch();
+						});
+
+						sortable.destroy();
+
+						el[expando] = null;
+						el = null;
+						watchers = null;
+						sortable = null;
+						nextSibling = null;
+					});
+
+					angular.forEach([
+						'sort', 'disabled', 'draggable', 'handle', 'animation', 'group', 'ghostClass', 'filter',
+						'onStart', 'onEnd', 'onAdd', 'onUpdate', 'onRemove', 'onSort'
+					], function (name) {
+						watchers.push(scope.$watch('ngSortable.' + name, function (value) {
+							if (value !== void 0) {
+								options[name] = value;
+
+								if (!/^on[A-Z]/.test(name)) {
+									sortable.option(name, value);
+								}
+							}
+						}));
+					});
+				}
+			};
+		}]);
+});

app/assets/javascripts/Sortable/react-sortable-mixin.js

+/**
+ * @author RubaXa <trash@rubaxa.org>
+ * @licence MIT
+ */
+
+(function (factory) {
+	'use strict';
+
+	if (typeof module != 'undefined' && typeof module.exports != 'undefined') {
+		module.exports = factory(require('./Sortable'));
+	}
+	else if (typeof define === 'function' && define.amd) {
+		define(['./Sortable'], factory);
+	}
+	else {
+		/* jshint sub:true */
+		window['SortableMixin'] = factory(Sortable);
+	}
+})(function (/** Sortable */Sortable) {
+	'use strict';
+
+	var _nextSibling;
+
+	var _activeComponent;
+
+	var _defaultOptions = {
+		ref: 'list',
+		model: 'items',
+
+		animation: 100,
+		onStart: 'handleStart',
+		onEnd: 'handleEnd',
+		onAdd: 'handleAdd',
+		onUpdate: 'handleUpdate',
+		onRemove: 'handleRemove',
+		onSort: 'handleSort',
+		onFilter: 'handleFilter',
+		onMove: 'handleMove'
+	};
+
+
+	function _getModelName(component) {
+		return component.sortableOptions && component.sortableOptions.model || _defaultOptions.model;
+	}
+
+
+	function _getModelItems(component) {
+		var name = _getModelName(component),
+			items = component.state && component.state[name] || component.props[name];
+
+		return items.slice();
+	}
+
+
+	function _extend(dst, src) {
+		for (var key in src) {
+			if (src.hasOwnProperty(key)) {
+				dst[key] = src[key];
+			}
+		}
+
+		return dst;
+	}
+
+
+	/**
+	 * Simple and easy mixin-wrapper for rubaxa/Sortable library, in order to
+	 * make reorderable drag-and-drop lists on modern browsers and touch devices.
+	 *
+	 * @mixin
+	 */
+	var SortableMixin = {
+		sortableMixinVersion: '0.1.1',
+
+
+		/**
+		 * @type {Sortable}
+		 * @private
+		 */
+		_sortableInstance: null,
+
+
+		componentDidMount: function () {
+			var DOMNode, options = _extend(_extend({}, _defaultOptions), this.sortableOptions || {}),
+				copyOptions = _extend({}, options),
+
+				emitEvent = function (/** string */type, /** Event */evt) {
+					var method = this[options[type]];
+					method && method.call(this, evt, this._sortableInstance);
+				}.bind(this);
+
+
+			// Bind callbacks so that "this" refers to the component
+			'onStart onEnd onAdd onSort onUpdate onRemove onFilter onMove'.split(' ').forEach(function (/** string */name) {
+				copyOptions[name] = function (evt) {
+					if (name === 'onStart') {
+						_nextSibling = evt.item.nextElementSibling;
+						_activeComponent = this;
+					}
+					else if (name === 'onAdd' || name === 'onUpdate') {
+						evt.from.insertBefore(evt.item, _nextSibling);
+
+						var newState = {},
+							remoteState = {},
+							oldIndex = evt.oldIndex,
+							newIndex = evt.newIndex,
+							items = _getModelItems(this),
+							remoteItems,
+							item;
+
+						if (name === 'onAdd') {
+							remoteItems = _getModelItems(_activeComponent);
+							item = remoteItems.splice(oldIndex, 1)[0];
+							items.splice(newIndex, 0, item);
+
+							remoteState[_getModelName(_activeComponent)] = remoteItems;
+						}
+						else {
+							items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]);
+						}
+
+						newState[_getModelName(this)] = items;
+						
+						if (copyOptions.stateHandler) {
+							this[copyOptions.stateHandler](newState);
+						} else {
+							this.setState(newState);
+						}
+						
+						(this !== _activeComponent) && _activeComponent.setState(remoteState);
+					}
+
+					setTimeout(function () {
+						emitEvent(name, evt);
+					}, 0);
+				}.bind(this);
+			}, this);
+
+			DOMNode = this.getDOMNode() ? (this.refs[options.ref] || this).getDOMNode() : this.refs[options.ref] || this;
+
+			/** @namespace this.refs — http://facebook.github.io/react/docs/more-about-refs.html */
+			this._sortableInstance = Sortable.create(DOMNode, copyOptions);
+		},
+
+		componentWillReceiveProps: function (nextProps) {
+			var newState = {},
+				modelName = _getModelName(this),
+				items = nextProps[modelName];
+
+			if (items) {
+				newState[modelName] = items;
+				this.setState(newState);
+			}
+		},
+
+		componentWillUnmount: function () {
+			this._sortableInstance.destroy();
+			this._sortableInstance = null;
+		}
+	};
+
+
+	// Export
+	return SortableMixin;
+});

app/assets/javascripts/Sortable/st/app.js

+(function () {
+	'use strict';
+
+	var byId = function (id) { return document.getElementById(id); },
+
+		loadScripts = function (desc, callback) {
+			var deps = [], key, idx = 0;
+
+			for (key in desc) {
+				deps.push(key);
+			}
+
+			(function _next() {
+				var pid,
+					name = deps[idx],
+					script = document.createElement('script');
+
+				script.type = 'text/javascript';
+				script.src = desc[deps[idx]];
+
+				pid = setInterval(function () {
+					if (window[name]) {
+						clearTimeout(pid);
+
+						deps[idx++] = window[name];
+
+						if (deps[idx]) {
+							_next();
+						} else {
+							callback.apply(null, deps);
+						}
+					}
+				}, 30);
+
+				document.getElementsByTagName('head')[0].appendChild(script);
+			})()
+		},
+
+		console = window.console;
+
+
+	if (!console.log) {
+		console.log = function () {
+			alert([].join.apply(arguments, ' '));
+		};
+	}
+
+
+	Sortable.create(byId('foo'), {
+		group: "words",
+		animation: 150,
+		store: {
+			get: function (sortable) {
+				var order = localStorage.getItem(sortable.options.group);
+				return order ? order.split('|') : [];
+			},
+			set: function (sortable) {
+				var order = sortable.toArray();
+				localStorage.setItem(sortable.options.group, order.join('|'));
+			}
+		},
+		onAdd: function (evt){ console.log('onAdd.foo:', [evt.item, evt.from]); },
+		onUpdate: function (evt){ console.log('onUpdate.foo:', [evt.item, evt.from]); },
+		onRemove: function (evt){ console.log('onRemove.foo:', [evt.item, evt.from]); },
+		onStart:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);},
+		onSort:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);},
+		onEnd: function(evt){ console.log('onEnd.foo:', [evt.item, evt.from]);}
+	});
+
+
+	Sortable.create(byId('bar'), {
+		group: "words",
+		animation: 150,
+		onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },
+		onUpdate: function (evt){ console.log('onUpdate.bar:', evt.item); },
+		onRemove: function (evt){ console.log('onRemove.bar:', evt.item); },
+		onStart:function(evt){ console.log('onStart.foo:', evt.item);},
+		onEnd: function(evt){ console.log('onEnd.foo:', evt.item);}
+	});
+
+
+	// Multi groups
+	Sortable.create(byId('multi'), {
+		animation: 150,
+		draggable: '.tile',
+		handle: '.tile__name'
+	});
+
+	[].forEach.call(byId('multi').getElementsByClassName('tile__list'), function (el){
+		Sortable.create(el, {
+			group: 'photo',
+			animation: 150
+		});
+	});
+
+
+	// Editable list
+	var editableList = Sortable.create(byId('editable'), {
+		animation: 150,
+		filter: '.js-remove',
+		onFilter: function (evt) {
+			evt.item.parentNode.removeChild(evt.item);
+		}
+	});
+
+
+	byId('addUser').onclick = function () {
+		Ply.dialog('prompt', {
+			title: 'Add',
+			form: { name: 'name' }
+		}).done(function (ui) {
+			var el = document.createElement('li');
+			el.innerHTML = ui.data.name + '<i class="js-remove">✖</i>';
+			editableList.el.appendChild(el);
+		});
+	};
+
+
+	// Advanced groups
+	[{
+		name: 'advanced',
+		pull: true,
+		put: true
+	},
+	{
+		name: 'advanced',
+		pull: 'clone',
+		put: false
+	}, {
+		name: 'advanced',
+		pull: false,
+		put: true
+	}].forEach(function (groupOpts, i) {
+		Sortable.create(byId('advanced-' + (i + 1)), {
+			sort: (i != 1),
+			group: groupOpts,
+			animation: 150
+		});
+	});
+
+
+	// 'handle' option
+	Sortable.create(byId('handle-1'), {
+		handle: '.drag-handle',
+		animation: 150
+	});
+
+
+	// Angular example
+	angular.module('todoApp', ['ng-sortable'])
+		.constant('ngSortableConfig', {onEnd: function() {
+			console.log('default onEnd()');
+		}})
+		.controller('TodoController', ['$scope', function ($scope) {
+			$scope.todos = [
+				{text: 'learn angular', done: true},
+				{text: 'build an angular app', done: false}
+			];
+
+			$scope.addTodo = function () {
+				$scope.todos.push({text: $scope.todoText, done: false});
+				$scope.todoText = '';
+			};
+
+			$scope.remaining = function () {
+				var count = 0;
+				angular.forEach($scope.todos, function (todo) {
+					count += todo.done ? 0 : 1;
+				});
+				return count;
+			};
+
+			$scope.archive = function () {
+				var oldTodos = $scope.todos;
+				$scope.todos = [];
+				angular.forEach(oldTodos, function (todo) {
+					if (!todo.done) $scope.todos.push(todo);
+				});
+			};
+		}])
+		.controller('TodoControllerNext', ['$scope', function ($scope) {
+			$scope.todos = [
+				{text: 'learn Sortable', done: true},
+				{text: 'use ng-sortable', done: false},
+				{text: 'Enjoy', done: false}
+			];
+
+			$scope.remaining = function () {
+				var count = 0;
+				angular.forEach($scope.todos, function (todo) {
+					count += todo.done ? 0 : 1;
+				});
+				return count;
+			};
+
+			$scope.sortableConfig = { group: 'todo', animation: 150 };
+			'Start End Add Update Remove Sort'.split(' ').forEach(function (name) {
+				$scope.sortableConfig['on' + name] = console.log.bind(console, name);
+			});
+		}]);
+})();
+
+
+
+// Background
+document.addEventListener("DOMContentLoaded", function () {
+	function setNoiseBackground(el, width, height, opacity) {
+		var canvas = document.createElement("canvas");
+		var context = canvas.getContext("2d");
+
+		canvas.width = width;
+		canvas.height = height;
+
+		for (var i = 0; i < width; i++) {
+			for (var j = 0; j < height; j++) {
+				var val = Math.floor(Math.random() * 255);
+				context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
+				context.fillRect(i, j, 1, 1);
+			}
+		}
+
+		el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
+	}
+
+	setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.02);
+}, false);

app/assets/stylesheets/Sortable/meteor/example/client/define-object-type.scss

+.glyphicon {
+  vertical-align: baseline;
+  font-size: 80%;
+  margin-right: 0.5em;
+}
+
+[class^="mdi-"], [class*=" mdi-"] {
+  vertical-align: baseline;
+  font-size: 90%;
+  margin-right: 0.4em;
+}
+
+.list-pair {
+  display: flex;  /* use the flexbox  model */
+  flex-direction: row;
+}
+.sortable {
+/*  font-size: 2em;*/
+}
+
+.sortable.source {
+  /*background: #9FA8DA;*/
+  flex: 0 0 auto;
+  margin-right: 1em;
+  cursor: move;
+  cursor: -webkit-grabbing;
+}
+
+.sortable.target {
+  /*background: #3F51B5;*/
+  flex: 1 1 auto;
+  margin-left: 1em;
+}
+
+.target .well {
+
+}
+
+.sortable-handle {
+  cursor: move;
+  cursor: -webkit-grabbing;
+}
+.sortable-handle.pull-right {
+  margin-top: 0.3em;
+}
+
+.sortable-ghost {
+  opacity: 0.6;
+}
+
+/* show the remove button on hover */
+.removable .close {
+  display: none;
+}
+.removable:hover .close {
+  display: block;
+}

app/assets/stylesheets/Sortable/st/app.scss

+html {
+	background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
+	background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
+	background-image: linear-gradient(to bottom, #F4E2C9 20%, #F4D7C9 100%);
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	position: relative;
+	color: #464637;
+	min-height: 100%;
+	font-size: 20px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+}
+
+
+h1 {
+	color: #FF3F00;
+	font-size: 20px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+	text-align: center;
+}
+
+
+ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.container {
+	width: 80%;
+	margin: auto;
+	min-width: 1100px;
+	max-width: 1300px;
+	position: relative;
+}
+
+@media (min-width: 750px) and (max-width: 970px){
+	.container {
+		width: 100%;
+		min-width: 750px;
+	}
+}
+
+
+.sortable-ghost {
+	opacity: .2;
+}
+
+
+img {
+	border: 0;
+	vertical-align: middle;
+}
+
+
+.logo {
+	top: 55px;
+	left: 30px;
+	position: absolute;
+}
+
+
+.title {
+	color: #fff;
+	padding: 3px 10px;
+	display: inline-block;
+	position: relative;
+	background-color: #FF7373;
+	z-index: 1000;
+}
+	.title_xl {
+		padding: 3px 15px;
+		font-size: 40px;
+	}
+
+
+
+.tile {
+	width: 22%;
+	min-width: 245px;
+	color: #FF7270;
+	padding: 10px 30px;
+	text-align: center;
+	margin-top: 15px;
+	margin-left: 5px;
+	margin-right: 30px;
+	background-color: #fff;
+	display: inline-block;
+	vertical-align: top;
+}
+	.tile__name {
+		cursor: move;
+		padding-bottom: 10px;
+		border-bottom: 1px solid #FF7373;
+	}
+
+	.tile__list {
+		margin-top: 10px;
+	}
+		.tile__list:last-child {
+			margin-right: 0;
+			min-height: 80px;
+		}
+
+		.tile__list img {
+			cursor: move;
+			margin: 10px;
+			border-radius: 100%;
+		}
+
+
+
+.block {
+	opacity: 1;
+	position: absolute;
+}
+	.block__list {
+		padding: 20px 0;
+		max-width: 360px;
+		margin-top: -8px;
+		margin-left: 5px;
+		background-color: #fff;
+	}
+		.block__list-title {
+			margin: -20px 0 0;
+			padding: 10px;
+			text-align: center;
+			background: #5F9EDF;
+		}
+		.block__list li { cursor: move; }
+
+	.block__list_words li {
+		background-color: #fff;
+		padding: 10px 40px;
+	}
+		.block__list_words .sortable-ghost {
+			opacity: 0.4;
+			background-color: #F4E2C9;
+		}
+
+		.block__list_words li:first-letter {
+			text-transform: uppercase;
+		}
+
+	.block__list_tags {
+		padding-left: 30px;
+	}
+
+	.block__list_tags:after {
+		clear: both;
+		content: '';
+		display: block;
+	}
+		.block__list_tags li {
+			color: #fff;
+			float: left;
+			margin: 8px 20px 10px 0;
+			padding: 5px 10px;
+			min-width: 10px;
+			background-color: #5F9EDF;
+			text-align: center;
+		}
+			.block__list_tags li:first-child:first-letter {
+				text-transform: uppercase;
+			}
+
+
+
+#editable {}
+	#editable li {
+		position: relative;
+	}
+
+	#editable i {
+		-webkit-transition: opacity .2s;
+		transition: opacity .2s;
+		opacity: 0;
+		display: block;
+		cursor: pointer;
+		color: #c00;
+		top: 10px;
+		right: 40px;
+		position: absolute;
+		font-style: normal;
+	}
+
+	#editable li:hover i {
+		opacity: 1;
+	}
+
+
+#filter {}
+	#filter button {
+		color: #fff;
+		width: 100%;
+		border: none;
+		outline: 0;
+		opacity: .5;
+		margin: 10px 0 0;
+		transition: opacity .1s ease;
+		cursor: pointer;
+		background: #5F9EDF;
+		padding: 10px 0;
+		font-size: 20px;
+	}
+		#filter button:hover {
+			opacity: 1;
+		}
+
+	#filter .block__list {
+		padding-bottom: 0;
+	}
+
+.drag-handle {
+	margin-right: 10px;
+	font: bold 20px Sans-Serif;
+	color: #5F9EDF;
+	display: inline-block;
+	cursor: move;
+	cursor: -webkit-grabbing;  /* overrides 'move' */
+}
+
+#todos input {
+	padding: 5px;
+	font-size: 14px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+}
+
+
+
+#nested ul li {
+	background-color: rgba(0,0,0,.05);
+}

app/assets/templates/Sortable/Sortable.html

+<link rel="import" href="../polymer/polymer.html">
+<script src="./Sortable.js"></script>
+
+<dom-module id="sortable-js">
+  <template>
+    <content></content>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: "sortable-js",
+
+    properties: {
+      group             : { type: String, value: () => Math.random(), observer: "groupChanged" },
+      sort              : { type: Boolean, value: true, observer: "sortChanged" },
+      disabled          : { type: Boolean, value: false, observer: "disabledChanged" },
+      store             : { type: Object, value: null, observer: "storeChanged" },
+      handle            : { type: String, value: null, observer: "handleChanged" },
+      scrollSensitivity : { type: Number, value: 30, observer: "scrollSensitivityChanged" },
+      scrollSpeed       : { type: Number, value: 10, observer: "scrollSpeedChanged" },
+      ghostClass        : { type: String, value: "sortable-ghost", observer: "ghostClassChanged" },
+      chosenClass       : { type: String, value: "sortable-chosen", observer: "chosenClassChanged" },
+      ignore            : { type: String, value: "a, img", observer: "ignoreChanged" },
+      filter            : { type: Object, value: null, observer: "filterChanged" },
+      animation         : { type: Number, value: 0, observer: "animationChanged" },
+      dropBubble        : { type: Boolean, value: false, observer: "dropBubbleChanged" },
+      dragoverBubble    : { type: Boolean, value: false, observer: "dragoverBubbleChanged" },
+      dataIdAttr        : { type: String, value: "data-id", observer: "dataIdAttrChanged" },
+      delay             : { type: Number, value: 0, observer: "delayChanged" },
+      forceFallback     : { type: Boolean, value: false, observer: "forceFallbackChanged" },
+      fallbackClass     : { type: String, value: "sortable-fallback", observer: "fallbackClassChanged" },
+      fallbackOnBody    : { type: Boolean, value: false, observer: "fallbackOnBodyChanged" },
+      draggable         : {},
+      scroll            : {}
+    },
+
+    created() {
+      // override default DOM property behavior
+      Object.defineProperties(this, {
+        draggable: { get() { return this._draggable || this.getAttribute("draggable") || ">*"}, set(value) { this._draggable = value; this.draggableChanged(value)} },
+        scroll: { get() { return this._scroll || JSON.parse(this.getAttribute("scroll") || "true") }, set(value) { this._scroll = value; this.scrollChanged(value)} }
+      })
+    },
+
+    attached: function() {
+      // Given
+      //   <sortable-js>
+      //     <template is="dom-repeat" items={{data}}>
+      //       <div>
+      //         <template is="dom-if" if="true">
+      //           <span>hello</span></template></div>
+      // After render, it becomes
+      //   <sortable-js>
+      //     <div>
+      //       <span>hello</span>
+      //       <template is="dom-if">
+      //     <tempalte is="dom-repeat">
+      var templates = this.querySelectorAll("template[is='dom-repeat']")
+      var template = templates[templates.length-1]
+
+      var options = {}
+      Object.keys(this.properties).forEach(key => {
+        options[key] = this[key]
+      })
+
+      this.sortable = Sortable.create(this, Object.assign(options, {
+        onUpdate: e => {
+          if (template) {
+            template.splice("items", e.newIndex, 0, template.splice("items", e.oldIndex, 1)[0])
+          }
+          this.fire("update", e)
+        },
+
+        onAdd: e => {
+          if (template) {
+            var froms = e.from.querySelectorAll("template[is='dom-repeat']")
+            var from = froms[froms.length-1]
+            var item = from.items[e.oldIndex]
+            template.splice("items", e.newIndex, 0, item)
+          }
+          this.fire("add", e)
+        },
+
+        onRemove: e => {
+          if (template) {
+            template.splice("items", e.oldIndex, 1)[0]
+          }
+          this.fire("remove", e)
+        },
+
+        onStart: e => {
+          this.fire("start", e)
+        },
+
+        onEnd: e => {
+          this.fire("end", e)
+        },
+
+        onSort: e => {
+          this.fire("sort", e)
+        },
+
+        onFilter: e => {
+          this.fire("filter", e)
+        },
+
+        onMove: e => {
+          this.fire("move", e)
+        }
+      }))
+    },
+
+    detached: function() {
+      this.sortable.destroy()
+    },
+
+    groupChanged             : function(value) { this.sortable && this.sortable.option("group", value) },
+    sortChanged              : function(value) { this.sortable && this.sortable.option("sort", value) },
+    disabledChanged          : function(value) { this.sortable && this.sortable.option("disabled", value) },
+    storeChanged             : function(value) { this.sortable && this.sortable.option("store", value) },
+    handleChanged            : function(value) { this.sortable && this.sortable.option("handle", value) },
+    scrollChanged           : function(value) { this.sortable && this.sortable.option("scroll", value) },
+    scrollSensitivityChanged : function(value) { this.sortable && this.sortable.option("scrollSensitivity", value) },
+    scrollSpeedChanged       : function(value) { this.sortable && this.sortable.option("scrollSpeed", value) },
+    draggableChanged        : function(value) { this.sortable && this.sortable.option("draggable", value) },
+    ghostClassChanged        : function(value) { this.sortable && this.sortable.option("ghostClass", value) },
+    chosenClassChanged       : function(value) { this.sortable && this.sortable.option("chosenClass", value) },
+    ignoreChanged            : function(value) { this.sortable && this.sortable.option("ignore", value) },
+    filterChanged            : function(value) { this.sortable && this.sortable.option("filter", value) },
+    animationChanged         : function(value) { this.sortable && this.sortable.option("animation", value) },
+    dropBubbleChanged        : function(value) { this.sortable && this.sortable.option("dropBubble", value) },
+    dragoverBubbleChanged    : function(value) { this.sortable && this.sortable.option("dragoverBubble", value) },
+    dataIdAttrChanged        : function(value) { this.sortable && this.sortable.option("dataIdAttr", value) },
+    delayChanged             : function(value) { this.sortable && this.sortable.option("delay", value) },
+    forceFallbackChanged     : function(value) { this.sortable && this.sortable.option("forceFallback", value) },
+    fallbackClassChanged     : function(value) { this.sortable && this.sortable.option("fallbackClass", value) },
+    fallbackOnBodyChanged    : function(value) { this.sortable && this.sortable.option("fallbackOnBody", value) }
+  })
+</script>

app/assets/templates/Sortable/index.html

+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+	<meta property="og:image" content="/st/og-image.png"/>
+
+	<title>Sortable. No jQuery.</title>
+
+	<meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, angular, ng-sortable, react, mixin, effects, rubaxa"/>
+	<meta name="description" content="Sortable - is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap."/>
+	<meta name="viewport" content="width=device-width, initial-scale=0.5"/>
+
+	<link href="//rubaxa.github.io/Ply/ply.css" rel="stylesheet" type="text/css"/>
+	<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css"/>
+
+	<link href="st/app.css" rel="stylesheet" type="text/css"/>
+</head>
+<body>
+
+	<a href="https://github.com/RubaXa/Sortable"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 10000;" src="//s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
+
+	<div class="container">
+		<div style="padding: 80px 150px 0; height: 160px;">
+			<a class="logo" href="https://github.com/RubaXa/Sortable"><img src="st/logo.png"/></a>
+			<h1 data-force="40" data-force-y="2.5">The JavaScript library for modern browsers and touch devices. No&nbsp;jQuery.</h1>
+		</div>
+	</div>
+
+
+	<!-- Connected lists -->
+	<div class="container" style="height: 520px">
+		<div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
+			<div class="layer title">List A</div>
+			<ul id="foo" class="block__list block__list_words">
+				<li>бегемот</li>
+				<li>корм</li>
+				<li>антон</li>
+				<li>сало</li>
+				<li>железосталь</li>
+				<li>валик</li>
+				<li>кровать</li>
+				<li>краб</li>
+			</ul>
+		</div>
+
+		<div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;">
+			<div class="layer title">List B</div>
+			<ul id="bar" class="block__list block__list_tags">
+				<li>казнить</li>
+				<li>,</li>
+				<li>нельзя</li>
+				<li>помиловать</li>
+			</ul>
+		</div>
+	</div>
+
+
+	<!-- Multi connected lists -->
+	<a name="m"></a>
+	<div class="container">
+		<div id="multi" style="margin-left: 30px">
+			<div><div data-force="5" class="layer title title_xl">Multi</div></div>
+
+			<div class="layer tile" data-force="30">
+				<div class="tile__name">Group A</div>
+				<div class="tile__list">
+					<img src="st/face-01.jpg"/><!--
+					--><img src="st/face-02.jpg"/><!--
+					--><img src="st/face-03.jpg"/><!--
+					--><img src="st/face-04.jpg"/>
+				</div>
+			</div>
+
+			<div class="layer tile" data-force="25">
+				<div class="tile__name">Group B</div>
+				<div class="tile__list">
+					<img src="st/face-05.jpg"/><!--
+					--><img src="st/face-06.jpg"/><!--
+					--><img src="st/face-07.jpg"/>
+				</div>
+			</div>
+
+			<div class="layer tile" data-force="20">
+				<div class="tile__name">Group C</div>
+				<div class="tile__list">
+					<img src="st/face-08.jpg"/><!--
+					--><img src="st/face-09.jpg"/>
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+
+	<!-- Editable list -->
+	<a name="e"></a>
+	<div class="container" style="margin-top: 100px">
+		<div id="filter" style="margin-left: 30px">
+			<div><div data-force="5" class="layer title title_xl">Editable list</div></div>
+
+			<div style="margin-top: -8px; margin-left: 10px" class="block__list block__list_words">
+				<ul id="editable">
+					<li>Оля<i class="js-remove">✖</i></li>
+					<li>Владимир<i class="js-remove">✖</i></li>
+					<li>Алина<i class="js-remove">✖</i></li>
+				</ul>
+
+				<button id="addUser">Add</button>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- Advanced connected lists -->
+	<a name="ag"></a>
+	<div class="container" style="margin-top: 100px;">
+		<div id="advanced" style="margin-left: 30px;">
+			<div><div data-force="5" class="layer title title_xl">Advanced groups</div></div>
+
+			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
+				<div class="block__list-title">pull & put</div>
+				<ul id="advanced-1">
+					<li>Meat</li>
+					<li>Potato</li>
+					<li>Tea</li>
+				</ul>
+			</div>
+
+			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
+				<div class="block__list-title">only pull (clone) no&nbsp;reordering</div>
+				<ul id="advanced-2">
+					<li>Sex</li>
+					<li>Drugs</li>
+					<li>Rock'n'roll</li>
+				</ul>
+			</div>
+
+			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
+				<div class="block__list-title">only put</div>
+				<ul id="advanced-3">
+					<li>Money</li>
+					<li>Force</li>
+					<li>Agility</li>
+				</ul>
+			</div>
+
+			<div style="clear: both"></div>
+		</div>
+	</div>
+
+
+	<!-- 'handle' option -->
+	<a name="h"></a>
+	<div class="container" style="margin-top: 100px;">
+		<div id="handle" style="margin-left: 30px;">
+			<div><div data-force="5" class="layer title title_xl">Drag handle and selectable text</div></div>
+
+			<div style="width: 30%; margin-left: 10px" class="block__list_words">
+				<ul id="handle-1">
+					<li><span class="drag-handle">&#9776;</span>Select text freely</li>
+					<li><span class="drag-handle">&#9776;</span>Drag my handle</li>
+					<li><span class="drag-handle">&#9776;</span>Best of both worlds</li>
+				</ul>
+			</div>
+
+			<div style="clear: both"></div>
+		</div>
+	</div>
+
+
+	<!-- Angular -->
+	<a name="ng"></a>
+	<div id="todos" ng-app="todoApp" class="container" style="margin-top: 100px">
+		<div style="margin-left: 30px">
+			<div><div data-force="5" class="layer title title_xl">AngularJS / ng-sortable</div></div>
+
+			<div style="width: 30%; margin-top: -8px; margin-left: 10px; float: left;" class="block__list block__list_words">
+				<div ng-controller="TodoController">
+					<span style="padding-left: 20px">{{remaining()}} of {{todos.length}} remaining</span>
+					[ <a href="" ng-click="archive()">archive</a> ]
+					<ul ng-sortable="{ group: 'todo', animation: 150 }" class="unstyled">
+						<li ng-repeat="todo in todos">
+							<input type="checkbox" ng-model="todo.done">
+							<span class="done-{{todo.done}}">{{todo.text}}</span>
+						</li>
+					</ul>
+					<form ng-submit="addTodo()" style="padding-left: 20px">
+						<input type="text" ng-model="todoText" size="30"
+							   placeholder="add new todo here">
+					</form>
+				</div>
+			</div>
+
+
+			<div style="width: 30%; margin-top: -8px; margin-left: 10px; float: left;" class="block__list block__list_words">
+				<div ng-controller="TodoControllerNext">
+					<span style="padding-left: 20px">{{remaining()}} of {{todos.length}} remaining</span>
+					<ul ng-sortable="sortableConfig" class="unstyled">
+						<li ng-repeat="todo in todos">
+							<input type="checkbox" ng-model="todo.done">
+							<span class="done-{{todo.done}}">{{todo.text}}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<div style="clear: both"></div>
+		</div>
+	</div>
+
+
+	<!-- Code example -->
+	<a name="c"></a>
+	<div class="container" style="margin-top: 100px">
+		<div style="margin-left: 30px">
+			<div><div class="layer title title_xl">Code example</div></div>
+			<pre data-force="100" class="layer javascript" style="margin-top: -8px; margin-left: 10px; width: 90%"><code>// Simple list
+var list = document.getElementById("my-ui-list");
+Sortable.create(list); // That's all.
+
+
+// Grouping
+var foo = document.getElementById("foo");
+Sortable.create(foo, { group: "omega" });
+
+var bar = document.getElementById("bar");
+Sortable.create(bar, { group: "omega" });
+
+
+// Or
+var container = document.getElementById("multi");
+var sort = Sortable.create(container, {
+  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
+  handle: ".tile__title", // Restricts sort start click/touch to the specified element
+  draggable: ".tile", // Specifies which items inside the element should be sortable
+  onUpdate: function (evt/**Event*/){
+     var item = evt.item; // the current dragged HTMLElement
+  }
+});
+
+// ..
+sort.destroy();
+
+
+// Editable list
+var editableList = Sortable.create(editable, {
+  filter: '.js-remove',
+  onFilter: function (evt) {
+    var el = editableList.closest(evt.item); // get dragged item
+    el && el.parentNode.removeChild(el);
+  }
+});
+</code></pre>
+		</div>
+
+		<div class="container" style="margin: 100px 0;">
+			<div style="margin-left: 30px">
+				<div><div class="layer title title_xl">See also</div></div>
+				<div id="rubaxa-repos" data-force="100" class="layer" style="margin-top: -8px; margin-left: 10px; width: 90%; background-color: #fff;">Loading&hellip;</div>
+				<script src="//rubaxa.github.io/repos.js"></script>
+			</div>
+		</div>
+
+	</div>
+
+
+
+	<script src="Sortable.js"></script>
+	<script src="//rubaxa.github.io/Ply/Ply.min.js"></script>
+	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
+	<script src="ng-sortable.js"></script>
+
+	<script src="st/app.js"></script>
+
+
+
+	<!-- highlight.js -->
+	<style>
+		/* Tomorrow Theme */
+		/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+		/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+		/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+		.tomorrow-comment, pre .comment, pre .title {
+		  color: #8e908c;
+		}
+
+		.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
+		  color: #c82829;
+		}
+
+		.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
+		  color: #f5871f;
+		}
+
+		.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
+		  color: #eab700;
+		}
+
+		.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
+		  color: #718c00;
+		}
+
+		.tomorrow-aqua, pre .css .hexcolor {
+		  color: #3e999f;
+		}
+
+		.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
+		  color: #4271ae;
+		}
+
+		.tomorrow-purple, pre .keyword, pre .javascript .function {
+		  color: #8959a8;
+		}
+
+		pre {
+			border: 0;
+			background-color: #fff;
+		}
+
+		pre code {
+		  display: block;
+		  color: #4d4d4c;
+		  font-size: 15px;
+		  font-family: Menlo, Monaco, Consolas, monospace;
+		  line-height: 1.5;
+		  padding: 30px;
+		}
+	</style>
+
+	<script src="//yandex.st/highlightjs/7.5/highlight.min.js"></script>
+	<script>hljs.initHighlightingOnLoad();</script>
+
+	<script>
+	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+	  ga('create', 'UA-16483888-3', 'rubaxa.github.io');
+	  ga('send', 'pageview');
+	</script>
+</body>
+</html>

app/assets/templates/Sortable/meteor/example/client/define-object-type.html

+<head>
+  <title>Reactive RubaXa:Sortable for Meteor</title>
+</head>
+
+<body>
+  {{> navbar}}
+
+  <div class="container">
+    <div class="page-header">
+      <h1>RubaXa:Sortable - reactive reorderable lists for Meteor</h1>
+      <h2>Drag attribute types from the left to define an object type on the right</h2>
+      <h3>Drag the <i class="sortable-handle mdi-action-view-headline"></i> handle to reorder elements</h3>
+    </div>
+
+    {{> typeDefinition}}
+  </div>
+</body>
+
+<template name="typeDefinition">
+
+  <div class="row">
+    <div class="list-pair col-sm-12">
+
+      <div class="sortable source list-group" id="types">
+        {{#sortable items=types options=typesOptions}}
+          <div class="list-group-item well well-sm">
+            {{{icon}}} {{name}}
+          </div>
+        {{/sortable}}
+      </div>
+
+      <div class="sortable target" id="object">
+        {{#sortable items=attributes animation="100" handle=".sortable-handle" ghostClass="sortable-ghost" options=attributesOptions}}
+          {{> sortableItemTarget}}
+        {{/sortable}}
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<template name="sortableItemTarget">
+  <div data-id="{{order}}" class="sortable-item removable well well-sm">
+    {{{icon}}}
+    <i class="sortable-handle mdi-action-view-headline pull-right"></i>
+    <span class="name">{{name}}</span>
+    <span class="badge">{{order}}</span>
+    <button type="button" class="close" data-dismiss="alert">
+      <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+    </button>
+  </div>
+</template>
+
+
+<template name="navbar">
+  <div class="navbar navbar-inverse">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="https://atmospherejs.com/rubaxa/sortable">RubaXa:Sortable</a>
+    </div>
+    <div class="navbar-collapse collapse navbar-inverse-collapse">
+      <ul class="nav navbar-nav">
+        <li class="active"><a href="http://rubaxa-sortable.meteor.com">Meteor Demo</a></li>
+        <li><a href="https://rubaxa.github.io/Sortable/" target="_blank">Sortable standalone demo</a></li>
+        <li class="dropdown">
+          <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Source <b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li class="dropdown-header">GitHub</li>
+            <li><a href="https://github.com/RubaXa/Sortable/tree/dev/meteor/example" target="_blank">This demo</a></li>
+            <li><a href="https://github.com/RubaXa/Sortable/tree/dev/meteor" target="_blank">Meteor integration</a></li>
+            <li><a href="https://github.com/RubaXa/Sortable" target="_blank">rubaxa/sortable</a></li>
+            <li class="divider"></li>
+            <li><a href="https://atmospherejs.com/rubaxa/sortable">Star this package on Atmosphere!</a></li>
+          </ul>
+        </li>
+      </ul>
+
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+          <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Resources <b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a href="http://www.meteorpedia.com/read/Packaging_existing_Libraries">Packaging 3rd party libraries for Meteor</a></li>
+            <li><a href="https://twitter.com/dandv">Author: @dandv</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
\ No newline at end of file

app/assets/templates/Sortable/meteor/template.html

+<template name="sortable">
+	{{#each items}}
+		{{> Template.contentBlock this}}
+	{{/each}}
+</template>

app/assets/templates/Sortable/st/iframe/frame.html

+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+</head>
+<body>
+
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
+
+
+<!-- List with handle -->
+<div id="listWithHandle" class="list-group">
+	<div class="list-group-item">
+		<span class="badge">14</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		Drag me by the handle
+	</div>
+	<div class="list-group-item">
+		<span class="badge">2</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		You can also select text
+	</div>
+	<div class="list-group-item">
+		<span class="badge">1</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		Best of both worlds!
+	</div>
+</div>
+
+</body>
+</html>

app/assets/templates/Sortable/st/iframe/index.html

+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>IFrame playground</title>
+</head>
+<body>
+
+
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
+
+
+<!-- Latest Sortable -->
+<script src="../../Sortable.js"></script>
+
+
+<!-- Simple List -->
+<div id="simpleList" class="list-group">
+	<div class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></div>
+	<div class="list-group-item">It works with Bootstrap...</div>
+	<div class="list-group-item">...out of the box.</div>
+	<div class="list-group-item">It has support for touch devices.</div>
+	<div class="list-group-item">Just drag some elements around.</div>
+</div>
+
+<script>
+	(function () {
+		Sortable.create(simpleList, {group: 'shared'});
+
+
+		var iframe = document.createElement('iframe');
+
+		iframe.src = 'frame.html';
+		iframe.width = '100%';
+		iframe.onload = function () {
+			var doc = iframe.contentDocument,
+					list = doc.getElementById('listWithHandle');
+
+			Sortable.create(list, {group: 'shared'});
+		};
+
+
+		document.body.appendChild(iframe);
+	})();
+</script>
+
+</body>
+</html>

lib/rails-assets-Sortable.rb

+require "rails-assets-Sortable/version"
+
+
+module RailsAssetsSortable
+
+  def self.gem_path
+    Pathname(File.realpath(__FILE__)).join('../..')
+  end
+
+  def self.gem_spec
+    Gem::Specification::load(
+      gem_path.join("rails-assets-Sortable.gemspec").to_s
+    )
+  end
+
+  def self.load_paths
+    gem_path.join('app/assets').each_child.to_a
+  end
+
+  def self.dependencies
+    [
+      
+    ]
+  end
+
+  if defined?(Rails)
+    class Engine < ::Rails::Engine
+      # Rails -> use app/assets directory.
+    end
+  end
+
+end
+
+class RailsAssets
+  @components ||= []
+
+  class << self
+    attr_accessor :components
+
+    def load_paths
+      components.flat_map(&:load_paths)
+    end
+  end
+end
+
+RailsAssets.components << RailsAssetsSortable

lib/rails-assets-Sortable/version.rb

+module RailsAssetsSortable
+  VERSION = "1.4.2"
+end

rails-assets-Sortable.gemspec

+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'rails-assets-Sortable/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "rails-assets-Sortable"
+  spec.version       = RailsAssetsSortable::VERSION
+  spec.authors       = ["rails-assets.org"]
+  spec.description   = "Minimalist library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery."
+  spec.summary       = "Minimalist library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery."
+  spec.homepage      = "http://rubaxa.github.io/Sortable"
+  spec.license       = "MIT"
+
+  spec.files         = `find ./* -type f | cut -b 3-`.split($/)
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+end