How can I disable sorting/dragging of a menu item in the custom menu admin?

Question

I think my problem is partially a javascript problem, but if someone knows of a better way to do this I'd love to hear it.

Basically the goal is to "save the client from themselves" by not allowing them to move around certain menu items in the custom menu. For SEO reasons. Whether that makes sense or not is beside the question :)

I'm trying to disable the item from being sortable by adding a script doing this: jQuery("#menu-item-10 dt").sortable("destroy");

The dt is the "handle" for the sortable method called in nav-menu.js from WP core. I'll be making some changes to dynamically get the correct menu item ID but basically this is what I'm trying. I've also tried .sortable({disable: true}) without luck. I always get an error: `Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'destroy'

I've tried a bunch of different things. My script is in a document.ready wrap and I've got it running in the bottom of the admin footer using the admin_footer-hook_suffix hook (hook_suffix is nav-menus.php in this case). I have put it in a setTimeout to make sure it runs after everything else is already loaded.

Any ideas on what I'm doing wrong or how I can do this better? Or what other info I can provide to help make this clearer?

Thanks!

Answer 1

The following does the trick:

add_action( 'admin_footer-nav-menus.php', 'block_sortables_wpse_90610' );

function block_sortables_wpse_90610()
{
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {   
        $("dt.menu-item-handle").sortable({ disabled: false });
    });             
    </script>
    <?php   
}

This also works: sortable(false).

Docs: http://api.jqueryui.com/sortable/#option-disabled

Answer 2

The answer for my situation was, "don't do it this way."

I remove the menu item I wanted to hide, which happened to be the "Home" menu item, and just used the default show_home argument on wp_nav_menu to add it in. Kind of silly I didn't realize I could do this before.

Answer 3

In my case (jQuery UI v1.9.2)

I have only:

$this.sortable("destroy");

and I get:

Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'destroy'

And I fixed when add the validation:

if ($this.data( "ui-sortable" )) {
   $this.sortable("destroy");
}