add draggable sections in wordpress plugin page

Question

want to make draggable and sortable sections in plugin page of wordpress, like we see on dashboard. i tried finding but dint get exactly what I want. Here is the piece of code though it add two divs with interface similar to draggable interface in dashboard, but i am unable to 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'); ?>

Answer 1

You have to enqueue the sorting script, and add jQuery and jQuery UI Sortable as dependencies. Your sample code has add_dashboard_page with wrong 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'
     });
});