Geek Answers Handbook

Add draggable sections to wordpress plugin page

you want to make draggable and sortable sections on the wordpress plugin page, as we see on the toolbar. I tried to find, but I want to get exactly what I want. Here is a snippet of code, although it adds two divs with an interface similar to a drag-and-drop interface in the control panel, but I cannot drag.

<div class="wrap"> <h2>I like to move it, move it</h2> <div class="meta-box-sortables ui-sortable"> <div class="postbox" id="p1"> <h3 class="hndle">Drag me around, babe</h3> <div class="container"> <p>Your content goes here</p> </div> </div><!-- .postbox --> <div class="postbox" id="p2"> <h3 class="hndle">Drag me, too</h3> <div class="container"> <p>Your content goes here, again</p> </div> </div><!-- .postbox --> </div><!-- .meta-box-sortables.ui-sortable--> </div><!-- .wrap --> <?php function move_me_around_scripts() { wp_enqueue_script('dashboard'); wp_enqueue_script( 'jquery-ui-sortable'); } function admin_page_with_draggable_boxes(){ $my_page = add_dashboard_page( 'moveit', 'moveit', 'read', 'moveit' ); add_action('load-'.$my_page, 'move_me_around_scripts'); } add_action('admin_menu', 'admin_page_with_draggable_boxes'); ?>
+4
source share
2 answers

You need to queue the sort script and add jQuery and jQuery UI Sortable as dependencies. Your add_dashboard_page sample code add_dashboard_page invalid parameters, also use admin_print_scripts instead of load-$page .

 add_action('admin_menu', 'admin_page_with_draggable_boxes'); function admin_page_with_draggable_boxes() { $my_page = add_dashboard_page( 'Move it', 'Move it', 'add_users', 'moveit-page', 'moveit_callback' ); add_action( "admin_print_scripts-$my_page", 'move_me_around_scripts' ); } function move_me_around_scripts() { wp_enqueue_script( 'move-it', plugins_url( '/moveit.js', __FILE__ ), // <----- get_stylesheet_directory_uri() if used in a theme array( 'jquery-ui-sortable', 'jquery' ) // <---- Dependencies ); } function moveit_callback() { ?> <div class="wrap"> <h2>I like to move it, move it</h2> <div class="meta-box-sortables ui-sortable"> <div class="postbox" id="p1"> <h3 class="hndle">Drag me around, babe</h3> <div class="container"> <p>Your content goes here</p> </div> </div><!-- .postbox --> <div class="postbox" id="p2"> <h3 class="hndle">Drag me, too</h3> <div class="container"> <p>Your content goes here, again</p> </div> </div><!-- .postbox --> </div><!-- .meta-box-sortables.ui-sortable--> </div><!-- .wrap --> <?php }

And the moveit.js file:

 jQuery(document).ready(function($) { $('.meta-box-sortables').sortable({ opacity: 0.6, revert: true, cursor: 'move', handle: '.hndle' }); });
+4
source

From what I see in your code, you probably want to use sorting along with draggable ui http://jqueryui.com/draggable/#sortable in some way or alone with a binding.

0
source

More articles:


All Articles