From 52f2f2bf54da8c9a0fa9cf17ee9b0ecb1269cd0a Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Wed, 11 Sep 2013 16:25:43 +0200
Subject: [PATCH] [TASK] Implement basic drag&drop feature.

---
 js/main.js     | 24 +++++++++++-------------
 style/main.css |  2 +-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/js/main.js b/js/main.js
index b19419e..fec3205 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,6 @@
 $(function() {
 	//setup the draggable content containers
-	$(".content-container").draggable({
+	$(".content-container-bounding-box").draggable({
 		"distance": 10,
 		"handle": "h1",
 		"helper": "clone",
@@ -29,16 +29,15 @@ $(function() {
 		"scope": "widget",
 		"tolerance": "pointer",
 		"drop": function(event, ui) {
-			$(event.target).css("background-color", "");
-			console.log(["drop", event, ui]);
+			$("#draggable-temporary-clone").remove();
+			$(ui.draggable[0]).prependTo(event.target);
 		},
 		"over": function(event, ui) {
-			$(event.target).css("background-color", "hsla(0, 100%, 100%, 0.4);");
-			console.log(["over", event, ui]);
+			$("#draggable-temporary-clone").remove();
+			$(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").prependTo(event.target);
 		},
 		"out": function(event, ui) {
-			$(event.target).css("background-color", "");
-			console.log(["out", event, ui]);
+			$("#draggable-temporary-clone").remove();
 		}
 	});
 
@@ -47,16 +46,15 @@ $(function() {
 		"scope": "widget",
 		"tolerance": "pointer",
 		"drop": function(event, ui) {
-			$(event.target).css("background-color", "");
-			console.log(["drop", event, ui]);
+			$("#draggable-temporary-clone").remove();
+			$(ui.draggable[0]).insertAfter(event.target);
 		},
 		"over": function(event, ui) {
-			$(event.target).css("background-color", "hsla(0, 100%, 50%, 0.4);");
-			console.log(["over", event, ui]);
+			$("#draggable-temporary-clone").remove();
+			$(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").insertAfter(event.target);
 		},
 		"out": function(event, ui) {
-			$(event.target).css("background-color", "");
-			console.log(["out", event, ui]);
+			$("#draggable-temporary-clone").remove();
 		}
 	});
 
diff --git a/style/main.css b/style/main.css
index c2c62a1..a0ea352 100644
--- a/style/main.css
+++ b/style/main.css
@@ -69,7 +69,7 @@ h5 {	font-size: 11pt;	}
 }
 
 .content-column {
-	padding: 2em 1em 2em 1em;
+	padding: 2em 1em 0em 1em;
 }
 
 .content-container-bounding-box {