1

I need to disable drag&drop functionality for dashboard widgets.

This should be realized with jquery, just as it is for the dashboard_browser_nag. I'm no jquery expert - so can anybody tell me how to find and modify my widgets with jquery?

So far, I know that I have to do some .sortable("cancel"), but how exactly?

Thanks!

3 Answers 3

1

This will remove the draggable functionality from each widget:

jQuery('.widget.ui-draggable').draggable('destroy')

You have find a good way to inject this into your code, either through wp_enqueue_script() or echo it inline on the Widget page.

To target a specific Widget you would have to do something along these lines:

jQuery('.widget.ui-draggable').each(function() {
    if (jQuery(this).find('h4').text() == 'Archives')
        jQuery(this).draggable('destroy');
}

Or select your way around to find the widget by id:

widget-2_calendar-__i__
widget-3_categories-__i__
...

If you browse around the source you'll soon find out how these are internally formed by WordPress. The rest is up to jQuery, selectors, maybe regular expressions (though I don't recommend them in this case).

5
  • This is closer to my initial question. It works partially: I can still drag the widget around, but I can't drop it anymore. Results in some weird behaviour. :) How can I prevent dragging as well?
    – johann
    Commented Oct 21, 2011 at 10:39
  • You're doing it wrong, then. I've tested this out of context (through Firebug or whatever you use) and it blocked the dragging. Are you placing this in a .ready() context?
    – soulseekah
    Commented Oct 21, 2011 at 10:56
  • I can understand the php part of wordpress down to its internals quite well - but I have no experience with jquery. Maybe I should have stated this in a clearer way. :) I placed your code in a .ready() context now - looks like it is working. Just out of curiosity, this brings me to my initial question: how can I find specific widgets, and disable drag&drop only for them?
    – johann
    Commented Oct 21, 2011 at 11:10
  • Added the reply to my answer. Please consider using Firebug/Chrome Developer Tools/etc. to find out how you can target individual widgets and check the jQuery selector cheatsheet on how to better get to them. Please limit further questions to WordPress (general jQuery questions do not belong here) or we're at risk of being closed :) Hope this helps.
    – soulseekah
    Commented Oct 21, 2011 at 11:22
  • Good going @Soulseekah! I was struggling with something similar when dealing with feature pointers in 3.3 :)
    – kovshenin
    Commented Nov 29, 2011 at 6:54
0

Not tested, but this would atleast get you started. Add this to functions.php or make your own plugin for it.

function remove_drag_and_drop() {
    wp_dequeue_script( 'jquery-ui-sortable' );
}
add_action('wp_dashboard_setup', 'remove_drag_and_drop' );
1
  • 1
    that will break the menus page.
    – Ijaas
    Commented Oct 21, 2011 at 2:38
0

Interesting approach. Isn't working like that however. My best so far is to prevent adding any footer scripts:

 function remove_footer_scripts() { return false; }
 add_filter('print_footer_scripts', 'remove_footer_scripts');

Clearly not a good solution. But the suggested wp_dequeue_script function to remove a single script is not working - maybe 'wp_dashboard_setup' is the wrong hook? I also tried to hook into 'wp_default_scripts' and to modify $wp_scripts itself, but without any success...

@Ijaas: good point, it would also break admin_widgets and admin_gallery, but isn't it possible to add the action/filter depending on the $current_screen? Should be, as it is a footer script which is added after set_current_screen() was called.

1
  • You can use a built-in __return_false function too, but as you said, this is not the best approach.
    – kovshenin
    Commented Nov 29, 2011 at 6:52

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.