From b914e09f358bb72b9aa0d46c17d687a0fd4d8c41 Mon Sep 17 00:00:00 2001
From: Ed <edchipman@gmail.com>
Date: Wed, 20 Jun 2012 21:13:07 -0300
Subject: [PATCH] Added placeholder

---
 css/WidgetAreaEditor.css       | 10 ++++++++++
 javascript/WidgetAreaEditor.js |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/css/WidgetAreaEditor.css b/css/WidgetAreaEditor.css
index 95ac21e..8a5bf6f 100644
--- a/css/WidgetAreaEditor.css
+++ b/css/WidgetAreaEditor.css
@@ -15,6 +15,16 @@ div.usedWidgetsHolder {
 	float: right;
 }
 
+div.usedWidgets .ui-state-highlight {
+    background: #EEEEEE;
+    
+    border: 1px solid #DDDDDD;
+    
+    width: 98%;
+    
+    margin-bottom: 5px;
+}
+
 .NoWidgets {
 	padding: 50px; /* Make this nice and big and easily 'droppable' */
 }
diff --git a/javascript/WidgetAreaEditor.js b/javascript/WidgetAreaEditor.js
index f2af9c4..11fbf1e 100644
--- a/javascript/WidgetAreaEditor.js
+++ b/javascript/WidgetAreaEditor.js
@@ -20,7 +20,9 @@
 				$(this).find('.usedWidgets').sortable({
 					opacity: 0.6,
 					handle: '.handle',
-					update: function(e, ui) {parentRef.updateWidgets(e, ui)}
+					update: function(e, ui) {parentRef.updateWidgets(e, ui)},
+                    placeholder: 'ui-state-highlight',
+                    forcePlaceholderSize: true
 				});
 				
 				// Figure out maxid, this is used when creating new widgets