Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit c952c4e3d40215a651aba0b76b39558232cc7dfc @mmavko committed Nov 21, 2011
Showing with 220 additions and 0 deletions.
  1. +25 −0 index.html
  2. +91 −0 lib.js
  3. +104 −0 sort.js
@@ -0,0 +1,25 @@
+
+<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
+<script src="sort.js"></script>
+
+<style>
+ ul#list {
+ list-style: none;
+ width: 400px;
+ padding: 0;
+ }
+ ul#list li {
+ margin: 10px;
+ padding: 5px;
+ border: 1px solid #aaa;
+ background-color: #ddd;
+ }
+</style>
+
+<ul id="list">
+ <li>item 1</li>
+ <li>item 2</li>
+ <li>item 3</li>
+ <li>item 4</li>
+ <li>item 5</li>
+</ul>
@@ -0,0 +1,91 @@
+$ = (function () {
+ var Nodes = function (selector) {
+ switch (true) {
+ case selector instanceof HTMLElement || selector instanceof Document:
+ this.elements = [selector];
+ break;
+ case selector instanceof NodeList:
+ this.elements = Array.prototype.slice.call(selector);
+ break;
+ case typeof selector === 'string':
+ this.elements = Array.prototype.slice.call(document.querySelectorAll(selector));
+ break;
+ default:
+ this.elements = selector;
+ }
+ };
+ Nodes.prototype = {
+ get: function (index) {
+ return this.elements[index];
+ },
+ first: function () {
+ return $(this.elements[0]);
+ },
+ each: function (callback) {
+ this.elements.forEach(function (el) {
+ callback.call(el, el);
+ });
+ return this;
+ },
+ on: function (event, listener) {
+ var e, l;
+ if (typeof event === 'object') {
+ for (e in event) {
+ l = event[e];
+ this.elements.forEach(function (el) {
+ el.addEventListener(e, l);
+ });
+ }
+ }
+ else {
+ this.elements.forEach(function (el) {
+ el.addEventListener(event, listener);
+ });
+ }
+ return this;
+ },
+ children: function (selector) {
+ var result = [];
+ this.elements.forEach(function (el) {
+ var children = document.querySelectorAll(selector, el);
+ result = result.concat(Array.prototype.slice.call(children));
+ });
+ return $(result);
+ },
+ css: function (prop, val) {
+ var p, v;
+ if (typeof prop === 'object') {
+ for (p in prop) {
+ v = prop[p];
+ this.elements.forEach(function (el) {
+ el.style[p] = v;
+ });
+ }
+ }
+ else if (val) {
+ this.elements.forEach(function (el) {
+ el.style[prop] = val;
+ });
+ }
+ else {
+ return this.elements[0].style[prop];
+ }
+ return this;
+ }
+ };
+ var $ = function (selector) {
+ return selector instanceof Nodes ? selector : new Nodes(selector);
+ };
+ $.extend = function () {
+ var result = arguments[0];
+ Array.prototype.slice.call(arguments).forEach(function (obj, i) {
+ if (i === 0) return;
+ var k;
+ for (k in obj) {
+ result[k] = obj[k];
+ }
+ });
+ return result;
+ };
+ return $;
+})();
@@ -0,0 +1,104 @@
+
+
+Sort = (function () {
+ function _bind(f, scope) {
+ return function () {
+ f.apply(scope, arguments);
+ }
+ }
+ var constructor = function (el, options) {
+ $.extend(this, this.constructor.defaultOptions, options);
+ this.$list = $(el).first().css({position: 'relative'})
+ .on({
+ mousemove: _bind(this.onMouseMove, this),
+ mouseup: _bind(this.onMouseUp, this),
+ mouseout: _bind(this.onMouseOut, this)
+ });
+ this.$items = this.$list.children(this.itemsSelector)
+ .on({
+ mousedown: _bind(this.onMouseDown, this)
+ });
+ this.$items.last().after(this.$items.last().clone().css('display', 'none'));
+ this.$items = this.$list.children(this.itemsSelector);
+ this.height = this.$items.get(1).offsetTop - this.$items.get(0).offsetTop;
+ };
+ constructor.defaultOptions = {
+ itemsSelector: 'li'
+ };
+ constructor.prototype = {
+ onMouseDown: function (e) {
+ this.$target = $(e.target);
+ this.$placeholder = this.$target.clone().html('&nbsp;');
+ this.$target.css({
+ width: this.$target.css('width'),
+ position: 'absolute'
+ });
+ $.extend(this, this.$target.position());
+ if (this.$items.index(this.$target.get(0)) == 0) this.$target.css('margin-top', 0);
+ this.$target.css({
+ top: this.top,
+ left: this.left
+ }).before(this.$placeholder);
+ this.x1 = e.pageX;
+ this.y1 = e.pageY;
+ },
+ onMouseMove: function (e) {
+ if (!this.$target) return;
+ var
+ dx = e.pageX - this.x1,
+ dy = e.pageY - this.y1,
+ di = Math.round(dy / this.height);
+ this.$target.css({
+ top: this.top + dy,
+ left: this.left + dx
+ });
+ if (di !== this.lastDi) this.move(di);
+ this.lastDi = di;
+ },
+ onMouseOut: function (e) {
+ this.cancel();
+ },
+ onMouseUp: function (e) {
+ this.end();
+ },
+ move: function (di) {
+ if (di > 0) di++;
+ this.$placeholder.detach();
+ var
+ i = this.$items.index(this.$target.get(0)),
+ current, ci;
+ if (i+di < 0) ci = 0;
+ else if (i+di >= this.$items.length) ci = this.$items.length-1;
+ else ci = i+di;
+ current = this.$items.get(ci);
+ $(current).before(this.$placeholder);
+ },
+ cancel: function () {
+ if (!this.$target) return;
+ this.$placeholder.remove();
+ this.$target.css({
+ position: '',
+ top: '',
+ left: '',
+ 'margin-top': '',
+ width: ''
+ });
+ delete this.$placeholder;
+ delete this.$target;
+ },
+ end: function () {
+ if (!this.$target) return;
+ this.$target.detach();
+ this.$placeholder.before(this.$target);
+ this.cancel();
+ this.$items = this.$list.children(this.itemsSelector);
+ }
+ };
+ return constructor;
+})();
+
+
+
+$(function () {
+ new Sort($('ul#list'));
+});

0 comments on commit c952c4e

Please sign in to comment.