Changeset 35809

Timestamp:

12/06/2015 10:22:44 PM (7 years ago)

Author:

mdawaffe

Message:

Meta Boxes: Preserve radio inputs' state when sorting metaboxes.

When sorting a metabox, a clone of that metabox is created as a drag/drop "helper".
Previously, any checked radio input in the original metabox would become unchecked, when its clone "helper" was inserted into the DOM
(since only one radio within a set of radios of the same name can be checked).

Continued use of the clone helper is important so that the element being dragged isn't subject to the click and other event handlers attached to the real metabox,
so we can't just switch to dragging around the real metabox. See, for example, comment:10:ticket:16972.

Preserve the radios' state via some name attribute trickery.

Fixes #16972

File:

• trunk/src/wp-admin/js/postbox.js (modified) (1 diff)

trunk/src/wp-admin/js/postbox.js

@@ -110 +110 @@
                 tolerance: 'pointer',
                 forcePlaceholderSize: true,
-                helper: 'clone',
+                helper: function( event, element ) {
+                    // `helper: 'clone'` is equilavalent to `return element.clone();`
+                    // Cloning a checked radio and then inserting that clone next to the original
+                    // radio unchecks the original radio (since only one of the two can be checked).
+                    // We get around this by renaming the helper's inputs' name attributes so that,
+                    // when the helper is inserted into the DOM for the sortable, no radios are
+                    // duplicated, and no original radio gets unchecked.
+                    return element.clone()
+                        .find( ':input' )
+                            .attr( 'name', function( i, currentName ) {
+                                return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
+                            } )
+                        .end();
+                },
                 opacity: 0.65,
                 stop: function() {