Make WordPress Core

Changeset 35809

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

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

1 edited


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

    r34977 r35809  
    110110                tolerance: 'pointer',
    111111                forcePlaceholderSize: true,
    112                 helper: 'clone',
     112                helper: function( event, element ) {
     113                    // `helper: 'clone'` is equilavalent to `return element.clone();`
     114                    // Cloning a checked radio and then inserting that clone next to the original
     115                    // radio unchecks the original radio (since only one of the two can be checked).
     116                    // We get around this by renaming the helper's inputs' name attributes so that,
     117                    // when the helper is inserted into the DOM for the sortable, no radios are
     118                    // duplicated, and no original radio gets unchecked.
     119                    return element.clone()
     120                        .find( ':input' )
     121                            .attr( 'name', function( i, currentName ) {
     122                                return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
     123                            } )
     124                        .end();
     125                },
    113126                opacity: 0.65,
    114127                stop: function() {
Note: See TracChangeset for help on using the changeset viewer.