sortable: Fixed the floating functional demo, implemented forcePlaceholderSize

Author: Paul Bakaus

demos/functional/templates/ui.sortable.ex3.html

@@ -3,13 +3,17 @@
 	<div id="example3">
 
 		<div style="min-height: 50px; min-height:50px; height:auto !important;">
-		
+			<style type="text/css" media="screen">
+				#placeholderSortable li {
+					float: left;
+				}
+			</style>
 			<ul id="placeholderSortable" style="list-style-position: inside; height: 30px; cursor: hand; cursor: pointer;">
-				<li id='user_Jack' style="float: left;">Jack</li>
-				<li id='user_John' style="float: left;">John</li>
-				<li id='user_Marry' style="float: left;">Marry</li>
-				<li id='user_Claire' style="float: left;">Claire</li>
-				<li id='user_Daniel' style="float: left;">Daniel</li>
+				<li id='user_Jack'>Jack</li>
+				<li id='user_John'>John</li>
+				<li id='user_Marry'>Marry</li>
+				<li id='user_Claire'>Claire</li>
+				<li id='user_Daniel'>Daniel</li>
 			</ul>
 
 		</div>

demos/functional/templates/ui.sortable.html

@@ -38,7 +38,7 @@
 				options: [
 					{
 						desc: 'Floating, with defined placeholder class',
-						source: '$("#placeholderSortable").sortable({ placeholder: "ui-selected", revert: true });'
+						source: '$("#placeholderSortable").sortable({ placeholder: "ui-selected", forcePlaceholderSize: true, revert: true });'
 					}
 				]
 			}

tests/sortable.js

@@ -109,7 +109,7 @@ test("disable", function() {
 test("defaults", function() {
 	el = $("#sortable").sortable();
 
-	equals(el.data("helper.sortable"), "clone", "helper");
+	equals(el.data("helper.sortable"), "original", "helper");
 	equals(el.data("tolerance.sortable"), "guess", "tolerance");
 	equals(el.data("distance.sortable"), 1, "distance");
 	equals(el.data("disabled.sortable"), false, "disabled");

ui/ui.sortable.js

@@ -302,9 +302,9 @@ $.widget("ui.sortable", $.extend({}, $.ui.mouse, {
 					return el;
 				},
 				update: function(container, p) {
-					if(className) return;
-					if(!p.height()) { p.height(self.currentItem.innerHeight()); };
-					if(!p.width()) { p.width(self.currentItem.innerWidth()); };
+					if(className && !o.forcePlaceholderSize) return;
+					if(!p.height()) { p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css('paddingTop')||0) - parseInt(self.currentItem.css('paddingBottom')||0)); };
+					if(!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft')||0) - parseInt(self.currentItem.css('paddingRight')||0)); };
 				}
 			};
 		}