From 61df99ca7b7c00a8c6e5b031f3819da8748f2fb4 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Wed, 11 Sep 2013 15:42:39 +0200
Subject: [PATCH] [TASK] Add a surrounding container for better drag&drop
 handling.

---
 index.html     | 79 ++++++++++++++++++++++++++++++--------------------
 js/main.js     | 22 ++++++++++++--
 style/main.css |  5 +++-
 3 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index 913cd5a..22ae833 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,6 @@
 							<li><span>Oder mach etwas!</span></li>
 						</ol>
 					</div>
-					
 					<div style="padding: 1em; background-color: hsla(0, 0%, 100%, 0.25); border-radius: 5px; color: hsl(0, 0%, 95%); margin-left: 2em; margin-right: 2em; margin-top: 2em; margin-bottom: 1em;">
 						<div style="">
 							<h1>Some random stuff maybe a search bar or some fancy info box?</h1>
@@ -39,47 +38,63 @@
 					<div style="clear: both;"></div>
 					<div id="content-grid-container">
 						<div id="content-column-1" class="content-column">
-							<div class="content-container">
-								<h1>Col1</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Col1</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
 							</div>
-							<div class="content-container">
-								<h1>Irgendne Überschrift ...</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Irgendne Überschrift ...</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
 							</div>
 						</div><!-- content-column-1 -->
-						
 						<div id="content-column-2" class="content-column">
-							<div class="content-container">
-								<h1>Col2</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Col2</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
 							</div>
-							<div class="content-container">
-								<h1>Irgendne Überschrift ...</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Irgendne Überschrift ...</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
 							</div>
-							<div class="content-container">
-								<h1>Irgendne Überschrift ...</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Irgendne Überschrift ...</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
+							</div>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Irgendne Überschrift ...</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
 							</div>
-							<div class="content-container">
-								<h1>Irgendne Überschrift ...</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
-							</div>					
 						</div><!-- content-column-2 -->
-					
 						<div id="content-column-3" class="content-column">
-							<div class="content-container">
-								<h1>Col3</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird. Desoxyribonukleinsäure ist ein wichtiger Bestandteil der Altpapierverwertungszellulosemaschine. Meine Absätze machen Sinn, denn anders geht es eh nicht.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Col3</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird. Desoxyribonukleinsäure ist ein wichtiger Bestandteil der Altpapierverwertungszellulosemaschine. Meine Absätze machen Sinn, denn anders geht es eh nicht.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
 							</div>
-							<div class="content-container">
-								<h1>Irgendne Überschrift ...</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
-							</div>						
-							<div class="content-container">
-								<h1>Irgendne Überschrift ...</h1>
-								<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Irgendne Überschrift ...</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
+							</div>
+							<div class="content-container-bounding-box">
+								<div class="content-container">
+									<h1>Irgendne Überschrift ...</h1>
+									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								</div>
 							</div>
 						</div><!-- content-column-3 -->
 						<div class="clear-both"></div>
diff --git a/js/main.js b/js/main.js
index 50fd971..b19419e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,7 +1,6 @@
 $(function() {
 	//setup the draggable content containers
 	$(".content-container").draggable({
-		//"containment": $("#content-grid-container"), //this seems buggy?
 		"distance": 10,
 		"handle": "h1",
 		"helper": "clone",
@@ -26,6 +25,7 @@ $(function() {
 
 	//setup the dropzones
 	$(".content-column").droppable({
+		"greedy": false,
 		"scope": "widget",
 		"tolerance": "pointer",
 		"drop": function(event, ui) {
@@ -33,7 +33,25 @@ $(function() {
 			console.log(["drop", event, ui]);
 		},
 		"over": function(event, ui) {
-			$(event.target).css("background-color", "hsla(0, 0%, 100%, 0.4);");
+			$(event.target).css("background-color", "hsla(0, 100%, 100%, 0.4);");
+			console.log(["over", event, ui]);
+		},
+		"out": function(event, ui) {
+			$(event.target).css("background-color", "");
+			console.log(["out", event, ui]);
+		}
+	});
+
+	$(".content-container-bounding-box").droppable({
+		"greedy": true,
+		"scope": "widget",
+		"tolerance": "pointer",
+		"drop": function(event, ui) {
+			$(event.target).css("background-color", "");
+			console.log(["drop", event, ui]);
+		},
+		"over": function(event, ui) {
+			$(event.target).css("background-color", "hsla(0, 100%, 50%, 0.4);");
 			console.log(["over", event, ui]);
 		},
 		"out": function(event, ui) {
diff --git a/style/main.css b/style/main.css
index 5562fd4..eb1ac0a 100644
--- a/style/main.css
+++ b/style/main.css
@@ -70,10 +70,13 @@ h5 {	font-size: 11pt;	}
 	margin-bottom: 0em;	
 }
 
+.content-container-bounding-box {
+	padding: 1em 1em 2em 1em;
+}
+
 .content-container {
 	padding-top: 0.3em;
 	padding-bottom: 0.3em;
-	margin: 1em 1em 2em 1em;
 	color: hsla(0, 0%, 10%, 0.9);
 	background-color: hsla(0, 0%, 100%, 0.8);
 	border-radius: 5px;