added debug page to work locally with jsfiddles

Author: johnny

config.rb

@@ -21,7 +21,7 @@
 # page "/path/to/file.html", :layout => false
 # 
 # With alternative layout
-# page "/path/to/file.html", :layout => :otherlayout
+page "/debug.html", :layout => 'debug.haml'
 # 
 # A path which all have the same layout
 # with_layout :admin do

source/debug.html.erb

@@ -0,0 +1,52 @@
+<style media="screen" type="text/css">
+.placeholder {
+	background: #ccff00;
+	padding: 30px 5px;
+	clear: both;
+}
+
+.layout {
+	overflow: auto;
+}
+
+.layout > .region:nth-child(1) {
+	float: left;
+	width: 50%;
+}
+
+.layout > .region:nth-child(2) {
+	float: right;
+	width: 47%;
+}
+
+.part {
+	clear: both;
+	background: #ccc;
+	padding: 30px 5px;
+	margin: 5px;
+}
+</style>
+
+	<div data-type="region" class="region" id="root">
+		<div data-type="part" class="part">
+			Part 1
+		</div>
+		<div data-type="layout" class="layout">
+			<div data-type="region" class="region">
+				<div data-type="part" class="part">
+					Part 2
+				</div>
+			</div>
+			<div data-type="region" class="region">
+				<div data-type="part" class="part">
+					Part 3
+				</div>
+				<div data-type="part" class="part">
+					Part 4
+				</div>
+			</div>
+		</div>
+		<div data-type="part" class="part">
+			Part 5
+		</div>
+	</div>

source/js/debug.js

@@ -0,0 +1,12 @@
+//= require "vendor/jquery"
+//= require "jquery-sortable"
+
+$(function () {
+	$('#root.region').sortable({
+		group: 'nested',
+		itemSelector: '.part, .layout',
+    containerSelector: '.region',
+		nested: true,
+		placeholder: '<div class="placeholder">Drop here</div>',
+	});
+})

source/layouts/debug.haml

@@ -0,0 +1,10 @@
+!!!
+%html
+  %head
+    %title jQuery Sortable
+    %link(rel="stylesheet" href="css/vendor.css")
+    %link(rel="stylesheet" href="css/application.css")
+  %body
+    .bootstrap-container
+      = yield
+    %script(src="js/debug.js")