7

I'm attempting to limit the jQuery sortable functionality on certain postboxes/metaboxes when editing a post/page.

So far I've enqueued my custom .js file in admin.

wp_enqueue_script

function jm_load_scripts($hook) {
    if( $hook != 'edit.php' && $hook != 'post.php' && $hook != 'post-new.php' ) 
        return;
    wp_enqueue_script( 'core-functionality-script', plugin_dir_url( __FILE__) . '/js/admin.js' );
}
add_action( 'admin_enqueue_scripts', 'jm_load_scripts' );

I've created a metabox with an added class of "not-sortable" then in the custom .js file, set it's sortability to 'cancel'.

jQuery

jQuery(function($) {
    $(".meta-box-sortables").sortable({
        cancel:".not-sortable"
    });
});

This prevents the user from moving the metabox, but sibling metaboxes can still be dragged above to then push the metabox out of it's position.

I found another solution I found this question 13885665 which suggested using the code below

$( ".meta-box-sortables" ).sortable({
    items : ':not(.not-sortable)'
});

Which makes complete sense and I found the same solution advised around the web, but in this case it disabled sortable functionality on all metaboxes.

My next thought was I may be overwriting the setting that adds the .postbox class to the sortable options field items: . So I changed the code to the following.

jquery

$( ".meta-box-sortables" ).sortable({
    items : '.postbox:not(.not-sortable)'
});

A solution that I found frequently, specific to WordPress, was to disable the admin javascript postbox.js which I don't think anyone trying to disable the sortable functionality of a metabox would want to do as it removes lots of functionality.

One more solution I feel needs to be considered Question 2474. But It doesn't seem to be the way to go either.

I'm not experienced with jQuery and haven't spent much time customising the WordPress admin. I may be missing something obvious but after some time looking at similar questions and studying both the jQuery-ui Docs and specifically the WordPress wp_admin>js>postbox.js file I can't move any further.

I've been asking the question due to it's specificity to the jQuery-ui on Stackoverflow.

stackoverflow Questions

Question 1 Question 2

Away from WordPress I can get sample examples working as desired, but now adding this to my WordPress solution is where I'm stuck.

1
  • You may find the answer by Didier Ghys Here to be quite useful - he outlines a few of your options, including adding classes to your .postbox elements to control them to your liking, and modifying the Sortable Instance to cancel sort event attempts which I imagine essentially throws the box back to its origin place on page. Commented Nov 30, 2020 at 23:21

1 Answer 1

2

Yes, it is possible to limit the drag and drop functionality of your boxes. All one needs to do is find the right selectors for the specific boxes it wants to target. When you use

$(".meta-box-sortables").[...]

you are targeting all elements in the page with the class of meta-box-sortables. If, however, you add a custom class to any of those boxes, for example custom-class and than change your jQuery script to

$(".meta-box-sortables.custom-class").[...]

the [...] will only execute for the element that has both meta-box-sortables and custom-class classes. You don't have to use classes, you can also use element ids to select your desired elements. Just like you do in CSS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.