From 374c1821f62d555407aca25477c806f0189afae0 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Thu, 12 Sep 2013 15:23:02 +0200
Subject: [PATCH] [TASK] Improve drag&drop behaviour.

---
 index.html     |  4 ++++
 js/main.js     | 26 ++++++++++++++++++++------
 style/main.css |  5 +++++
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 8ab020a..66550f6 100644
--- a/index.html
+++ b/index.html
@@ -121,6 +121,10 @@
 				</div><!-- footer content -->
 			</div><!-- footer -->
 		</div><!-- wrap-all -->
+		<!-- templates -->
+		<div class="hidden">
+			<div class="droppable-container-placeholder"></div>
+		</div>
 		<!-- main javascript -->
 		<script type="text/javascript" src="js/main.js"></script>
 	</body>
diff --git a/js/main.js b/js/main.js
index 238a25b..d6d655e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -13,14 +13,14 @@ $(function() {
 		"revertDuration": 50,
 		"scope": "widget",
 		"scroll": false,
-		"snap": true,
+		"snap": false,
 		"start": function(event, ui) {
 			//set width and height of dragged clone to originals dimensions
 			$(ui.helper[0]).width(event.target.clientWidth).height(event.target.clientHeight);
 			//change opacity of original to indicate it is being dragged
-			$(event.target).css("opacity", "0.3");
+			$(event.target).css("opacity", "0.25");
 			//also change opacity of dragged clone to help the user see
-			$(ui.helper[0]).css("opacity", "0.3");
+			$(ui.helper[0]).css("opacity", "0.5");
 		},
 		"stop": function(event, ui) {
 			//reset opacity of original
@@ -29,23 +29,31 @@ $(function() {
 	});
 
 	//setup the dropzones
+	//put the dragged object into first position of a column
 	$(".content-column").droppable({
 		"greedy": false,
 		"scope": "widget",
 		"tolerance": "pointer",
 		"drop": function(event, ui) {
 			$("#draggable-temporary-clone").remove();
-			$(ui.draggable[0]).prependTo(event.target);
+			$(ui.draggable[0]).prependTo($(event.target));
 		},
 		"over": function(event, ui) {
 			$("#draggable-temporary-clone").remove();
-			$(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").prependTo(event.target);
+			//create a placeholder and mark it with an id (so we can remove it later)
+			$(".droppable-container-placeholder")
+				.clone(true)
+				.width(ui.draggable[0].clientWidth)
+				.height(ui.draggable[0].clientHeight)
+				.attr("id", "draggable-temporary-clone")
+				.prependTo(event.target);
 		},
 		"out": function(event, ui) {
 			$("#draggable-temporary-clone").remove();
 		}
 	});
 
+	//put the dragged object into a slot after the object it was dropped on
 	$(".content-container-bounding-box").droppable({
 		"greedy": true,
 		"scope": "widget",
@@ -56,7 +64,13 @@ $(function() {
 		},
 		"over": function(event, ui) {
 			$("#draggable-temporary-clone").remove();
-			$(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").insertAfter(event.target);
+			//create a placeholder and mark it with an id (so we can remove it later)
+			$(".droppable-container-placeholder")
+				.clone(true)
+				.width(ui.draggable[0].clientWidth)
+				.height(ui.draggable[0].clientHeight)
+				.attr("id", "draggable-temporary-clone")
+				.insertAfter(event.target);
 		},
 		"out": function(event, ui) {
 			$("#draggable-temporary-clone").remove();
diff --git a/style/main.css b/style/main.css
index e3e34d6..a738763 100644
--- a/style/main.css
+++ b/style/main.css
@@ -49,6 +49,10 @@ h5 {	font-size: 11pt;	}
 	clear: both;
 }
 
+.hidden {
+	display: none;
+}
+
 .vertical-list {
 	list-style: none;
 	clear: left;
@@ -70,6 +74,7 @@ h5 {	font-size: 11pt;	}
 
 .content-column {
 	padding: 2em 1em 0em 1em;
+	min-height: 300px;
 }
 
 .content-container-bounding-box {