add draggable sections in wordpress plugin page - php

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'
});
});

Answer 2

From what i can see of your code you probably want to use sortable together with draggable ui
http://jqueryui.com/draggable/#sortable in someway or alone with snapping.