gaarf/kittens.html

## kittens.html
<!DOCTYPE HTML>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script>
  $(function() {
    var SLOT_COUNT = 5,
        SLOT_WIDTH = 210, // css must match
        SLOT_HALF_WIDTH = SLOT_WIDTH/2,
        $xreorder = $('#xreorder').css('width',SLOT_WIDTH*SLOT_COUNT);

    function makeDraggable(el) {
      var $drag, // the element currently being dragged
          DOWN = 'mousedown touchstart',
          MOVE = 'mousemove touchmove',
          STOP = 'mouseup touchend';

      $(el).bind(DOWN, function(v) {
        var $this = $(this);
        $drag = $this
          .addClass('dragged')
          .data('startX', getX(v))
          .data('currentSlot', $this.parent().data('slot-id'));
        $(document).bind(MOVE,onGripDrag).bind(STOP,onGripEnd);
        return false;
      });

      function onGripDrag(v) {
        var x = getX(v), // mouse position
            s = Math.floor(x/SLOT_WIDTH), // what slot are we over?
            c = $drag.data('currentSlot'), // what slot is currently empty?
            d = x-$drag.data('startX'); // pixels dragged
        $drag.css('margin-left', d);
        if(s!=c && s>=0 && s<SLOT_COUNT) {
          $drag.data('currentSlot', s);
          moveKitten($xreorder.find('.slot.i'+s+' .kitten').not('.dragged'), s, c);
        }
        return false;
      }

      function onGripEnd(v) {
        $(document).unbind(MOVE,onGripDrag).unbind(STOP,onGripEnd);
        var s = $drag.data('currentSlot');
        moveKitten($drag, s, s);
        $drag.css({marginLeft:0}).removeClass('dragged');
        $drag = null;
        rememberOrder();
      }

      function getX(v) {
        var x = v.pageX,
            t = v.originalEvent.targetTouches;
        if(t) {
          x = t[0]['pageX'];
        }
        return x;
      }

    } // end makeDraggable

    function moveKitten($kitten, fromSlotId, toSlotId) {
      var doIt = function() {
        $kitten.detach()
          .css('marginLeft', 0)
          .appendTo($xreorder.find('.slot.i'+toSlotId));
      }
      if(fromSlotId==toSlotId) { doIt(); }
      else { $kitten.animate({marginLeft:(toSlotId-fromSlotId) * SLOT_WIDTH}, doIt); }
    }

    function rememberOrder() {
      var out = [];
      $xreorder.find(".kitten").each(function() {
        out.push(this.className.split(' ')[0]);
      })
      if(window.localStorage) {
        window.localStorage.setItem('kittenOrder', out.join(','));
      }
    }

    // create feline data
    var data = {};
    for (var i=0; i < SLOT_COUNT; i++) {
      var k = "k"+i;
      data[k] = {
        key: k,
        url: 'http://placekitten.com/'+SLOT_WIDTH+'/'+(300+i),
        txt: (function(s,n) { var r=""; for (var a=0;a<n;a++) r+=s; return r;})("Meow", i)
      };
    };

    // recall kitty order
    var order = window.localStorage && window.localStorage.getItem('kittenOrder');
    if(order) { order = order.split(','); }
    if(!order || order.length!=SLOT_COUNT) { order = []; }

    // create cats
    for (var i=0; i < SLOT_COUNT; i++) {
      var k = data[ (order[i] || "k"+i) ];
      $xreorder.append('<div class="slot i'+i+'" data-slot-id="'+i+'"><div class="'+k.key+' kitten" style="background-image:url('+k.url+')"><em>'+k.txt+'</em></div></div>');
    };

    makeDraggable($xreorder.find('.kitten'));

  });
  </script>
  <style type="text/css" media="screen">

    #xreorder {
      position:relative;
      height:302px;
      -moz-user-select: -moz-none;
      -webkit-user-select: none;
      cursor:ew-resize;
      overflow:hidden;
    }
    #xreorder div.slot {
      width:190px;
      height:290px;
      margin:0 5px;
      padding:4px;
      border:1px dashed gray;
      float:left;
    }
    #xreorder div.kitten {
      position:absolute;
      display:block;
      width:190px;
      height:290px;
      border-radius:5px;
    }
    #xreorder div.dragged {
      opacity:.7;
      z-index: 1;
    }
    #xreorder div.kitten em {
      padding:0 5px;
      background-color:yellow;
    }
  </style>
</head>
<body>
  <noscript>
    Turn JS on!
  </noscript>

  <h1>Re-order yourself some kittens.</h1>
  <div id="xreorder"></div>

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script>
	$(function() {
	var SLOT_COUNT = 5,
	SLOT_WIDTH = 210, // css must match
	SLOT_HALF_WIDTH = SLOT_WIDTH/2,
	$xreorder = $('#xreorder').css('width',SLOT_WIDTH*SLOT_COUNT);

	function makeDraggable(el) {
	var $drag, // the element currently being dragged
	DOWN = 'mousedown touchstart',
	MOVE = 'mousemove touchmove',
	STOP = 'mouseup touchend';

	$(el).bind(DOWN, function(v) {
	var $this = $(this);
	$drag = $this
	.addClass('dragged')
	.data('startX', getX(v))
	.data('currentSlot', $this.parent().data('slot-id'));
	$(document).bind(MOVE,onGripDrag).bind(STOP,onGripEnd);
	return false;
	});

	function onGripDrag(v) {
	var x = getX(v), // mouse position
	s = Math.floor(x/SLOT_WIDTH), // what slot are we over?
	c = $drag.data('currentSlot'), // what slot is currently empty?
	d = x-$drag.data('startX'); // pixels dragged
	$drag.css('margin-left', d);
	if(s!=c && s>=0 && s<SLOT_COUNT) {
	$drag.data('currentSlot', s);
	moveKitten($xreorder.find('.slot.i'+s+' .kitten').not('.dragged'), s, c);
	}
	return false;
	}

	function onGripEnd(v) {
	$(document).unbind(MOVE,onGripDrag).unbind(STOP,onGripEnd);
	var s = $drag.data('currentSlot');
	moveKitten($drag, s, s);
	$drag.css({marginLeft:0}).removeClass('dragged');
	$drag = null;
	rememberOrder();
	}

	function getX(v) {
	var x = v.pageX,
	t = v.originalEvent.targetTouches;
	if(t) {
	x = t[0]['pageX'];
	}
	return x;
	}

	} // end makeDraggable

	function moveKitten($kitten, fromSlotId, toSlotId) {
	var doIt = function() {
	$kitten.detach()
	.css('marginLeft', 0)
	.appendTo($xreorder.find('.slot.i'+toSlotId));
	}
	if(fromSlotId==toSlotId) { doIt(); }
	else { $kitten.animate({marginLeft:(toSlotId-fromSlotId) * SLOT_WIDTH}, doIt); }
	}

	function rememberOrder() {
	var out = [];
	$xreorder.find(".kitten").each(function() {
	out.push(this.className.split(' ')[0]);
	})
	if(window.localStorage) {
	window.localStorage.setItem('kittenOrder', out.join(','));
	}
	}

	// create feline data
	var data = {};
	for (var i=0; i < SLOT_COUNT; i++) {
	var k = "k"+i;
	data[k] = {
	key: k,
	url: 'http://placekitten.com/'+SLOT_WIDTH+'/'+(300+i),
	txt: (function(s,n) { var r=""; for (var a=0;a<n;a++) r+=s; return r;})("Meow", i)
	};
	};

	// recall kitty order
	var order = window.localStorage && window.localStorage.getItem('kittenOrder');
	if(order) { order = order.split(','); }
	if(!order \|\| order.length!=SLOT_COUNT) { order = []; }

	// create cats
	for (var i=0; i < SLOT_COUNT; i++) {
	var k = data[ (order[i] \|\| "k"+i) ];
	$xreorder.append('<div class="slot i'+i+'" data-slot-id="'+i+'"><div class="'+k.key+' kitten" style="background-image:url('+k.url+')"><em>'+k.txt+'</em></div></div>');
	};

	makeDraggable($xreorder.find('.kitten'));

	});
	</script>
	<style type="text/css" media="screen">

	#xreorder {
	position:relative;
	height:302px;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	cursor:ew-resize;
	overflow:hidden;
	}
	#xreorder div.slot {
	width:190px;
	height:290px;
	margin:0 5px;
	padding:4px;
	border:1px dashed gray;
	float:left;
	}
	#xreorder div.kitten {
	position:absolute;
	display:block;
	width:190px;
	height:290px;
	border-radius:5px;
	}
	#xreorder div.dragged {
	opacity:.7;
	z-index: 1;
	}
	#xreorder div.kitten em {
	padding:0 5px;
	background-color:yellow;
	}
	</style>
	</head>
	<body>
	<noscript>
	Turn JS on!
	</noscript>

	<h1>Re-order yourself some kittens.</h1>
	<div id="xreorder"></div>

	</body>
	</html>