Index: wp-admin/css/widgets.css
===================================================================
--- wp-admin/css/widgets.css	(revision 5886)
+++ wp-admin/css/widgets.css	(working copy)
@@ -14,10 +14,10 @@
 }
 
 .dropzone {
+	border: 1px solid #bbb;
 	float: left;
 	margin-right: 10px;
 	padding: 5px;
-	border: 1px solid #bbb;
 	background-color: #f0f8ff;
 }
 
@@ -26,15 +26,21 @@
 	color: #333;
 }
 
+.dropzone input {
+	display: none;
+}
+
 .dropzone ul {
+	float: left;
 	list-style-type: none;
 	width: 240px;
-	float: left;
 	margin: 0;
+	min-height: 200px;
 	padding: 0;
+	display: block;
 }
 
-* .module, #lastmodule {
+* .module {
 	width: 238px;
 	padding: 0;
 	margin: 5px 0;
@@ -42,14 +48,16 @@
 	display: block;
 	border: 1px solid #ccc;
 	background-color: #fbfbfb;
+	position: relative;
 	text-align: left;
 	line-height: 25px;
 }
 
-* .handle, #lastmodule span {
+* .handle {
 	display: block;
 	width: 216px;
 	padding: 0 10px;
+	position: relative;
 	border-top: 1px solid #f2f2f2;
 	border-right: 1px solid #e8e8e8;
 	border-bottom: 1px solid #e8e8e8;
@@ -83,53 +91,67 @@
 	clear: left;
 }
 
-.placematt {
+.placemat {
 	cursor: default;
-	margin: 10px 0 0;
+	margin: 0;
 	padding: 0;
-	width: 238px;
-	float:left;
-	background-color: #ffe;
+	position: relative;
 }
 
-* html .placematt {
-	margin-top: 5px;
-}
-
-.placematt h4 {
+.placemat h4 {
 	text-align: center;
-	margin-bottom: 5px;
 }
 
-.placematt span {
+.placemat span {
+	background-color: #ffe;
+	border: 1px solid #ccc;
 	padding: 0 10px 10px;
+	position: absolute;
 	text-align: justify;
 }
 
-
 #palettediv {
 	border: 1px solid #bbb;
 	background-color: #f0f8ff;
 	height:auto;
 	margin-top: 10px;
+	padding-bottom: 10px;
 }
 
+#palettediv:after, #zones:after, .dropzone:after {
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+}
+
+#palettediv, #zones, .dropzone {
+	display: block;
+	min-height: 1px;
+}
+
+* html #palettediv, * html #zones, * html .dropzone {
+	height: 1%;
+}
+
 #palettediv h3 {
 	text-align: center;
 	color: #333;
+	min-height: 1px;
 }
 
 #palettediv ul {
 	padding: 0 0 0 10px;
 }
 
-#palettediv .module, #lastmodule {
+#palettediv .module {
 	margin-right: 10px;
 	float: left;
 	width: 120px;
 }
 
-#palettediv .handle, #lastmodule span {
+#palettediv .handle {
 	height: 40px;
 	font-size: 90%;
 	width: 110px;
@@ -140,20 +162,11 @@
 	visibility: hidden;
 }
 
-#lastmodule {
-	visibility: hidden;
-}
-
 * html #palettediv ul {
 	margin: 0;
 	padding: 0 0 0 10px;
 }
 
-* html #palettediv .module {
-	float: none;
-	display: inline;
-}
-
 #controls {
 	height: 0px;
 }
@@ -212,3 +225,12 @@
 	left: 0px;
 	width: 100%;
 }
+
+#dragHelper {
+	position: absolute;
+}
+
+#dragHelper li.module {
+	display: block;
+	float: left;
+}
Index: wp-admin/widgets.php
===================================================================
--- wp-admin/widgets.php	(revision 5886)
+++ wp-admin/widgets.php	(working copy)
@@ -5,14 +5,10 @@
 if ( ! current_user_can('switch_themes') )
 	wp_die( __( 'Cheatin&#8217; uh?' ));
 
-wp_enqueue_script( 'scriptaculous-effects' );
-wp_enqueue_script( 'scriptaculous-dragdrop' );
+wp_enqueue_script('interface');
 
 function wp_widgets_admin_head() {
 	global $wp_registered_sidebars, $wp_registered_widgets, $wp_registered_widget_controls;
-
-	define( 'WP_WIDGETS_WIDTH', 1 + 262 * ( count( $wp_registered_sidebars ) ) );
-	define( 'WP_WIDGETS_HEIGHT', 35 * ( count( $wp_registered_widgets ) ) );
 ?>
 	<link rel="stylesheet" href="<?php bloginfo( 'wpurl' ); ?>/wp-admin/css/widgets.css?version=<?php bloginfo('version'); ?>" type="text/css" />
 	<!--[if IE 7]>
@@ -20,10 +16,6 @@
 		#palette { float: <?php echo ( get_bloginfo( 'text_direction' ) == 'rtl' ) ? 'right' : 'left'; ?>; }
 	</style>
 	<![endif]-->
-	<style type="text/css">
-		.dropzone ul { height: <?php echo constant( 'WP_WIDGETS_HEIGHT' ); ?>px; }
-		#sbadmin #zones { width: <?php echo constant( 'WP_WIDGETS_WIDTH' ); ?>px; }
-	</style>
 <?php
 	if ( get_bloginfo( 'text_direction' ) == 'rtl' ) { 
 ?>
@@ -49,127 +41,111 @@
 	var widgets = [<?php echo $widgets; ?>];
 	var controldims = new Array;
 	<?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?>
-		controldims['<?php echo $widget['id']; ?>control'] = new Array;
-		controldims['<?php echo $widget['id']; ?>control']['width'] = <?php echo (int) $widget['width']; ?>;
-		controldims['<?php echo $widget['id']; ?>control']['height'] = <?php echo (int) $widget['height']; ?>;
+		controldims['#<?php echo $widget['id']; ?>control'] = new Array;
+		controldims['#<?php echo $widget['id']; ?>control']['width'] = <?php echo (int) $widget['width']; ?>;
+		controldims['#<?php echo $widget['id']; ?>control']['height'] = <?php echo (int) $widget['height']; ?>;
 	<?php endforeach; ?>
 	function initWidgets() {
 	<?php foreach ( $wp_registered_widget_controls as $name => $widget ) : ?>
-		$('<?php echo $widget['id']; ?>popper').onclick = function() {popControl('<?php echo $widget['id']; ?>control');};
-		$('<?php echo $widget['id']; ?>closer').onclick = function() {unpopControl('<?php echo $widget['id']; ?>control');};
-		new Draggable('<?php echo $widget['id']; ?>control', {revert:false,handle:'controlhandle',starteffect:function(){},endeffect:function(){},change:function(o){dragChange(o);}});
+		jQuery('#<?php echo $widget['id']; ?>popper').click(function() {popControl('#<?php echo $widget['id']; ?>control');});
+		jQuery('#<?php echo $widget['id']; ?>closer').click(function() {unpopControl('#<?php echo $widget['id']; ?>control');});
+		jQuery('#<?php echo $widget['id']; ?>control').Draggable({handle: '.controlhandle', zIndex: 1000});
 		if ( true && window.opera )
-			$('<?php echo $widget['id']; ?>control').style.border = '1px solid #bbb';
+			jQuery('#<?php echo $widget['id']; ?>control').css('border','1px solid #bbb');
 	<?php endforeach; ?>
-		if ( true && window.opera )
-			$('shadow').style.background = 'transparent';
-		new Effect.Opacity('shadow', {to:0.0});
-		widgets.map(function(o) {o='widgetprefix-'+o; Position.absolutize(o); Position.relativize(o);} );
-		$A(Draggables.drags).map(function(o) {o.startDrag(null); o.finishDrag(null);});
-		//for ( var n in Draggables.drags ) {
-		for ( n=0; n<=Draggables.drags.length; n++ ) {
-			if ( parseInt( n ) ) {
-				if ( Draggables.drags[n].element.id == 'lastmodule' ) {
-					Draggables.drags[n].destroy();
-					break;
-				}
-			}
-		}
-		resetPaletteHeight();
+		jQuery('#shadow').css('opacity','0');
+		jQuery(widgets).each(function(o) {o='#widgetprefix-'+o; jQuery(o).css('position','relative');} );
 	}
 	function resetDroppableHeights() {
 		var max = 6;
-		cols.map(function(o) {var c = $(o).childNodes.length; if ( c > max ) max = c;} );
-		var height = 35 * ( max + 1);
-		cols.map(function(o) {h = (($(o).childNodes.length + 1) * 35); $(o).style.height = (h > 280 ? h : 280) + 'px';} );
+		jQuery.map(cols, function(o) {
+			var c = jQuery('#' + o + ' li').length;
+			if ( c > max ) max = c;
+		});
+		var maxheight = 35 * ( max + 1);
+		jQuery.map(cols, function(o) {
+			height = 0 == jQuery('#' + o + ' li').length ? maxheight - jQuery('#' + o + 'placemat').height() : maxheight;
+			jQuery('#' + o).height(height);
+		});
 	}
-	function resetPaletteHeight() {
-		var p = $('palette'), pd = $('palettediv'), last = $('lastmodule');
-		p.appendChild(last);
-		if ( Draggables.activeDraggable && last.id == Draggables.activeDraggable.element.id )
-			last = last.previousSibling;
-		var y1 = Position.cumulativeOffset(last)[1] + last.offsetHeight;
-		var y2 = Position.cumulativeOffset(pd)[1] + pd.offsetHeight;
-		var dy = y1 - y2;
-		pd.style.height = (pd.offsetHeight + dy + 9) + "px";
-	}
 	function maxHeight(elm) {
 		htmlheight = document.body.parentNode.clientHeight;
 		bodyheight = document.body.clientHeight;
 		var height = htmlheight > bodyheight ? htmlheight : bodyheight;
-		$(elm).style.height = height + 'px';
+		jQuery(elm).height(height);
 	}
+	function getViewportDims() {
+		var x,y;
+		if (self.innerHeight) { // all except Explorer
+			x = self.innerWidth;
+			y = self.innerHeight;
+		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
+			x = document.documentElement.clientWidth;
+			y = document.documentElement.clientHeight;
+		} else if (document.body) { // other Explorers
+			x = document.body.clientWidth;
+			y = document.body.clientHeight;
+		}
+		return new Array(x,y);
+	}
 	function dragChange(o) {
-		el = o.element ? o.element : $(o);
-		var p = Position.page(el);
-		var right = p[0];
-		var top = p[1];
-		var left = $('shadow').offsetWidth - (el.offsetWidth + right);
-		var bottom = $('shadow').offsetHeight - (el.offsetHeight + top);
-		if ( right < 1 ) el.style.left = 0;
-		if ( top < 1 ) el.style.top = 0;
-		if ( left < 1 ) el.style.left = (left + right) + 'px';
-		if ( bottom < 1 ) el.style.top = (top + bottom) + 'px';
+		var p = getViewportDims();
+		var screenWidth = p[0];
+		var screenHeight = p[1];
+		var elWidth = parseInt( jQuery(o).css('width') );
+		var elHeight = parseInt( jQuery(o).css('height') );
+		var elLeft = parseInt( jQuery(o).css('left') );
+		var elTop = parseInt( jQuery(o).css('top') );
+		if ( screenWidth < ( parseInt(elLeft) + parseInt(elWidth) ) ) 
+			jQuery(o).css('left', ( screenWidth - elWidth ) + 'px' );
+		if ( screenHeight < ( parseInt(elTop) + parseInt(elHeight) ) ) 
+			jQuery(o).css('top', ( screenHeight - elHeight ) + 'px' );
+		if ( elLeft < 1 ) 
+			jQuery(o).css('left', '1px');
+		if ( elTop < 1 )
+			jQuery(o).css('top', '1px');
 	}
 	function popControl(elm) {
-		el = $(elm);
-		el.style.width = controldims[elm]['width'] + 'px';
-		el.style.height = controldims[elm]['height'] + 'px';
 		var x = ( document.body.clientWidth - controldims[elm]['width'] ) / 2;
 		var y = ( document.body.parentNode.clientHeight - controldims[elm]['height'] ) / 2;
-		el.style.position = 'absolute';
-		el.style.right = '' + x + 'px';
-		el.style.top = '' + y + 'px';
-		el.style.zIndex = 1000;
-		el.className='control';
-		$('shadow').onclick = function() {unpopControl(elm);};
-	    window.onresize = function(){maxHeight('shadow');dragChange(elm);};
+		jQuery(elm).css({display: 'block', width: controldims[elm]['width'] + 'px', height: controldims[elm]['height'] + 'px', position: 'absolute', right: x + 'px', top: y + 'px', zIndex: '1000' });
+		jQuery(elm).attr('class','control');
+		jQuery('#shadow').click(function() {unpopControl(elm);});
+		window.onresize = function(){maxHeight('#shadow');dragChange(elm);};
 		popShadow();
 	}
 	function popShadow() {
-		maxHeight('shadow');
-		var shadow = $('shadow');
-		shadow.style.zIndex = 999;
-		shadow.style.display = 'block';
-	    new Effect.Opacity('shadow', {duration:0.5, from:0.0, to:0.2});
+		maxHeight('#shadow');
+		jQuery('#shadow').css({zIndex: '999', display: 'block'});
+		jQuery('#shadow').fadeTo('fast', 0.2);
 	}
 	function unpopShadow() {
-	    new Effect.Opacity('shadow', {to:0.0});
-		$('shadow').style.display = 'none';
+		jQuery('#shadow').fadeOut('fast', function() {jQuery('#shadow').hide()});
 	}
 	function unpopControl(el) {
-		$(el).className='hidden';
+		jQuery(el).attr('class','hidden');
+		jQuery(el).hide();
 		unpopShadow();
 	}
 	function serializeAll() {
-	<?php foreach ( $wp_registered_sidebars as $index => $sidebar ) : ?>
-		$('<?php echo $index; ?>order').value = Sortable.serialize('<?php echo $index; ?>');
+	<?php $i = 0; foreach ( $wp_registered_sidebars as $index => $sidebar ) : $i++; ?>
+		var serial<?php echo $i ?> = jQuery.SortSerialize('<?php echo $index ?>');
+		jQuery('#<?php echo $index ?>order').attr('value',serial<?php echo $i ?>.hash.replace(/widgetprefix-/g, ''));
 	<?php endforeach; ?>
 	}
 	function updateAll() {
-		resetDroppableHeights();
-		resetPaletteHeight();
-		cols.map(function(o){
-			var pm = $(o+'placematt');
-			if ( $(o).childNodes.length == 0 ) {
-				pm.style.display = 'block';
-				//Position.absolutize(o+'placematt');
-			} else {
-				pm.style.display = 'none';
-			}
+		jQuery.map(cols, function(o) { 
+			if ( jQuery('#' + o + ' li').length )
+				jQuery('#'+o+'placemat span.handle').hide();
+			else 
+				jQuery('#'+o+'placemat span.handle').show();
 		});
+		resetDroppableHeights();
 	}
-	function noSelection(event) {
-		if ( document.selection ) {
-			var range = document.selection.createRange();
-			range.collapse(false);
-			range.select();
-			return false;
-		}
-	}
-	addLoadEvent(updateAll);
-	addLoadEvent(initWidgets);
-	Event.observe(window, 'resize', resetPaletteHeight);
+	jQuery(document).ready( function() {
+		updateAll();
+		initWidgets();
+	});
 // ]]>
 </script>
 <?php
@@ -313,7 +289,7 @@
 				<div class="dropzone">
 					<h3><?php echo $sidebar['name']; ?></h3>
 
-					<div id="<?php echo $index; ?>placematt" class="module placemat">
+					<div id="<?php echo $index; ?>placemat" class="placemat">
 						<span class="handle">
 							<h4><?php _e( 'Default Sidebar' ); ?></h4>
 							<?php _e( 'Your theme will display its usual sidebar when this box is empty. Dragging widgets into this box will replace the usual sidebar with your customized sidebar.' ); ?>
@@ -334,8 +310,6 @@
 				}
 			?>
 
-			<br class="clear" />
-
 			</div>
 
 			<div id="palettediv">
@@ -347,19 +321,18 @@
 						wp_widget_draggable( $name );
 					}
 				?>
-					<li id="lastmodule"><span></span></li>
 				</ul>
 			</div>
 
 			<script type="text/javascript">
 			// <![CDATA[
+				jQuery(document).ready(function(){
 			<?php foreach ( $containers as $container ) { ?>
-				Sortable.create("<?php echo $container; ?>", {
-					dropOnEmpty: true, containment: [<?php echo $c_string; ?>], 
-					handle: 'handle', constraint: false, onUpdate: updateAll, 
-					format: /^widgetprefix-(.*)$/
-				});
+					jQuery('ul#<?php echo $container; ?>').Sortable({
+						accept: 'module', activeclass: 'activeDraggable', opacity: 0.8, revert: true, onStop: updateAll
+					});
 			<?php } ?>
+				});
 			// ]]>
 			</script>
 

