[TASK] Add a surrounding container for better drag&drop handling.

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,48 +38,64 @@
 					<div style="clear: both;"></div>
 					<div id="content-grid-container">
 						<div id="content-column-1" class="content-column">
+							<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-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-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-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-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-2 -->
-					
 						<div id="content-column-3" class="content-column">
+							<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-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>
 					</div> <!-- content-grid-container -->

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) {

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;