MixMox.co

...

by sperske

HTML

<ul id='mix'>
    <li><span class="drag-handle">☰</span>Yellow<small>Cold Play</small>
    </li>
    <li class='active'><span class="drag-handle">☰</span>See You Soon<small>Cold Play</small>
    </li>
    <li><span class="drag-handle">☰</span>Only Love is Real<small>Stew</small>
    </li>
    <li><span class="drag-handle">☰</span>Mr. Jones<small>Countign Crows</small>
    </li>
    <li><span class="drag-handle">☰</span>God Head Bird<small>Sufjan Stevens</small>
    </li>
</ul>

CSS

body {
    font-size: 55px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    padding: 0;
    margin: 0;
    background: transparent url("http://subtlepatterns.com/patterns/black_twill.png") repeat scroll 0% 0%;
}
ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}
li span.drag-handle {
    cursor: move;
}
li {
    color: #333;
    padding-top: 26px;
}
li > small {
    display:block;
    font-size: 20px;
    text-align: right;
    color: #aaa;
}
li.active {
    background: linear-gradient(223deg, #00ffbd, #7d00ff, #ef583a);
    background-size: 600% 600%;
    -webkit-animation: RainbowTron 5s ease infinite;
    -moz-animation: RainbowTron 5s ease infinite;
    animation: RainbowTron 5s ease infinite;
}
.rainbowtron {
    background: linear-gradient(223deg, #00ffbd, #7d00ff, #ef583a);
    background-size: 600% 600%;
    -webkit-animation: RainbowTron 5s ease infinite;
    -moz-animation: RainbowTron 5s ease infinite;
    animation: RainbowTron 5s ease infinite;
}
.rainbowtron h1, .rainbowtron p {
    color: white;
    text-shadow: 2px 1px 1px #aaa;
}
@-webkit-keyframes RainbowTron {
    0% {
        background-position: 81% 0%;
    }
    50% {
        background-position: 20% 100%;
    }
    100% {
        background-position: 81% 0%;
    }
}
@-moz-keyframes RainbowTron {
    0% {
        background-position: 81% 0%;
    }
    50% {
        background-position: 20% 100%;
    }
    100% {
        background-position: 81% 0%;
    }
}
@keyframes RainbowTron {
    0% {
        background-position: 81% 0%;
    }
    50% {
        background-position: 20% 100%;
    }
    100% {
        background-position: 81% 0%;
    }
}
.sortable-ghost {
    opacity: 0.5;
}

JavaScript

/**!
 * Sortable
 * @author	RubaXa   <[email protected]>
 * @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,
		ghostEl,
		cloneEl,
		rootEl,
		nextEl,

		scrollEl,
		scrollParentEl,

		lastEl,
		lastCSS,

		oldIndex,
		newIndex,

		activeGroup,
		autoScroll = {},

		tapEvt,
		touchEvt,

		/** @const */
		RSPACE = /\s+/g,

		expando = 'Sortable' + (new Date).getTime(),

		win = window,
		document = win.document,
		parseInt = win.parseInt,

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

		_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)...