Changeset 33030

Timestamp:

07/01/2015 04:43:02 PM (8 years ago)

Author:

ocean90

Message:

Customizer: Make reordering menu items via drag and drop easier.

Introduce wpNavMenu.options.targetTolerance to define a tolerance when dragging items where no margins between the sortable items exists.

props adamsilverstein.
fixes #32821.

Location:

trunk/src/wp-admin/js

Files:

• customize-nav-menus.js (modified) (1 diff)
• nav-menu.js (modified) (3 diffs)

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -9 +9 @@
     wpNavMenu.options.menuItemDepthPerLevel = 20;
     wpNavMenu.options.sortableItems         = '> .customize-control-nav_menu_item';
+    wpNavMenu.options.targetTolerance       = 10;
     wpNavMenu.init = function() {
         this.jQueryExtensions();

trunk/src/wp-admin/js/nav-menu.js

@@ -21 +21 @@
         options : {
             menuItemDepthPerLevel : 30, // Do not use directly. Use depthToPx and pxToDepth instead.
-            globalMaxDepth : 11,
-            sortableItems: '> *'
+            globalMaxDepth:  11,
+            sortableItems:   '> *',
+            targetTolerance: 0
         },
 
@@ -439 +440 @@
                 hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
 
-                menuItem.find( '.field-move' ).toggle( totalMenuItems > 1 ); 
+                menuItem.find( '.field-move' ).toggle( totalMenuItems > 1 );
 
             // Where can they move this menu item?
@@ -722 +723 @@
                         edge = api.isRTL ? offset.left + ui.helper.width() : offset.left,
                         depth = api.negateIfRTL * api.pxToDepth( edge - menuEdge );
+
                     // Check and correct if depth is not within range.
                     // Also, if the dragged element is dragged upwards over
                     // an item, shift the placeholder to a child position.
-                    if ( depth > maxDepth || offset.top < prevBottom ) depth = maxDepth;
-                    else if ( depth < minDepth ) depth = minDepth;
+                    if ( depth > maxDepth || offset.top < ( prevBottom - api.options.targetTolerance ) ) {
+                        depth = maxDepth;
+                    } else if ( depth < minDepth ) {
+                        depth = minDepth;
+                    }
 
                     if( depth != currentDepth )