- Patch #649982 by casey: improve the drag-drop handling for dashboard customization.

modules/dashboard/dashboard.css

@@ -66,7 +66,7 @@
   margin: 5px;
 }
 
-#dashboard #disabled-blocks .section {
+#dashboard #disabled-blocks .region {
   background-color: #E0E0D8;
   border: #ccc 1px solid;
   padding: 10px;
@@ -77,12 +77,6 @@
   padding: 5px 0;
 }
 
-#dashboard div.dragging {
-  background: #0074BD;
-  color: #fff;
-  width: 30%;
-}
-
 #dashboard #disabled-blocks h2 {
   display: inline;
   font-weight: normal;
@@ -94,7 +88,7 @@
   color: #fff;
 }
 
-#dashboard #disabled-blocks .block:hover {
+#dashboard.customize-inactive #disabled-blocks .block:hover {
   background: #0074BD;
 }
 
@@ -112,12 +106,12 @@
   padding: 0 17px;
 }
 
-#dashboard #disabled-blocks .block:hover h2 {
+#dashboard.customize-inactive #disabled-blocks .block:hover h2 {
   background: #0074BD url(../../misc/draggable.png) no-repeat 0px -39px;
   color: #fff;
 }
 
-#dashboard .dashboard-region .ui-sortable .block:hover h2 {
+#dashboard.customize-inactive .dashboard-region .ui-sortable .block:hover h2 {
   background: #0074BD url(../../misc/draggable.png) no-repeat;
   background-position: 3px -36px;
   color: #fff;

modules/dashboard/dashboard.js

@@ -44,7 +44,7 @@ Drupal.behaviors.dashboard = {
    * Enter "customize" mode by displaying disabled blocks.
    */
   enterCustomizeMode: function () {
-    $('#dashboard').addClass('customize-mode');
+    $('#dashboard').addClass('customize-mode customize-inactive');
     Drupal.behaviors.dashboard.addPlaceholders();
     // Hide the customize link
     $('#dashboard .customize .action-links').hide();
@@ -56,7 +56,7 @@ Drupal.behaviors.dashboard = {
    * Exit "customize" mode by simply forcing a page refresh.
    */
   exitCustomizeMode: function () {
-    $('#dashboard').removeClass('customize-mode');
+    $('#dashboard').removeClass('customize-mode customize-inactive');
     Drupal.behaviors.dashboard.addPlaceholders();
     location.href = Drupal.settings.dashboard.dashboard;
   },
@@ -75,11 +75,12 @@ Drupal.behaviors.dashboard = {
       cursor: 'move',
       cursorAt: {top:0},
       dropOnEmpty: true,
-      items: '>div.block, div.disabled-block',
-      opacity: 1,
-      helper: 'block-dragging',
+      items: '> div.block, > div.disabled-block',
       placeholder: 'block-placeholder clearfix',
+      tolerance: 'pointer',
       start: Drupal.behaviors.dashboard.start,
+      over: Drupal.behaviors.dashboard.over,
+      sort: Drupal.behaviors.dashboard.sort,
       update: Drupal.behaviors.dashboard.update
     });
   },
@@ -95,6 +96,7 @@ Drupal.behaviors.dashboard = {
    *  An object containing information about the item that is being dragged.
    */
   start: function (event, ui) {
+    $('#dashboard').removeClass('customize-inactive');
     var item = $(ui.item);
 
     // If the block is already in disabled state, don't do anything.
@@ -103,6 +105,48 @@ Drupal.behaviors.dashboard = {
     }
   },
 
+  /**
+   * While dragging, adapt block's width to the width of the region it is moved
+   * into.
+   *
+   * This function is called on the jQuery UI Sortable "over" event.
+   *
+   * @param event
+   *  The event that triggered this callback.
+   * @param ui
+   *  An object containing information about the item that is being dragged.
+   */
+  over: function (event, ui) {
+    var item = $(ui.item);
+
+    // If the block is in disabled state, remove width.
+    if ($(this).closest('#disabled-blocks').length) {
+      item.css('width', '');
+    }
+    else {
+      item.css('width', $(this).width());
+    }
+  },
+
+  /**
+   * While dragging, adapt block's position to stay connected with the position
+   * of the mouse pointer.
+   *
+   * This function is called on the jQuery UI Sortable "sort" event.
+   *
+   * @param event
+   *  The event that triggered this callback.
+   * @param ui
+   *  An object containing information about the item that is being dragged.
+   */
+  sort: function (event, ui) {
+    var item = $(ui.item);
+
+    if (event.pageX > ui.offset.left + item.width()) {
+      item.css('left', event.pageX);
+    }
+  },
+
   /**
    * Send block order to the server, and expand previously disabled blocks.
    *
@@ -114,6 +158,7 @@ Drupal.behaviors.dashboard = {
    *   An object containing information about the item that was just dropped.
    */
   update: function (event, ui) {
+    $('#dashboard').addClass('customize-inactive');
     var item = $(ui.item);
 
     // If the user dragged a disabled block, load the block contents.

modules/dashboard/dashboard.module

@@ -451,7 +451,7 @@ function theme_dashboard_region($variables) {
 function theme_dashboard_disabled_blocks($variables) {
   extract($variables);
   $output = '<div class="canvas-content"><p>' . t('Drag and drop these blocks to the columns below. Changes are automatically saved.') . '</p>';
-  $output .= '<div id="disabled-blocks"><div class="section region disabled-blocks clearfix">';
+  $output .= '<div id="disabled-blocks"><div class="region disabled-blocks clearfix">';
   foreach ($blocks as $block) {
     $output .= theme('dashboard_disabled_block', array('block' => $block));
   }