[wp-hackers] Drag and drop panels in plugin's page

[Dino Termini]

Hi Helen and all,

sorry for the very late reply to your message. I got involved into a 
project and of course your request to share my method to "move panels 
around" in Wordpress using Jquery slipped through the cracks. But now 
here I am, so get ready to learn this new technique :)

1. Add a new page to the admin interface, like you had explained with 
the function "yourprefix_help_page", using the HTML structure you 
described. Note the ID's associated to each box (p1, p2, etc):

<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 -->


2. Enqueue the only script [dashboard] needed to make everything move 
(at least this works in my case):

function move_me_around_scripts() {
     wp_enqueue_script('dashboard');
}
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');

3. Your boxes should be draggable now. Whenever you move something 
around, Wordpress (via jquery/ajax) sends a list of the boxes ID's back 
to the server, in the order they appear on the page after you moved 
them. All you have to do is to add some PHP to retrieve this information 
and use it. Edit the admin page source code as follows:

<div class="wrap">
<h2>I like to move it, move it</h2>
<div class="meta-box-sortables ui-sortable">

<?php
$user = wp_get_current_user();

// The label has the format: 
meta-box-order_WHERE_PAGE_IS_ATTACHED_page_PAGE_IDENTIFIER
$panels_order = get_user_option('meta-box-order_dashboard_page_moveit', 
$user->ID);
$panels_order = explode(',', $panels_order[0]);
if (!$panels_order) $panels_order = array('p1', 'p2'); // default order

foreach($panels_order as $a_panel_id)
     switch($a_panel_id):
         case 'p1':
?>
<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 -->
<?php break; case 'p2': ?>
<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 -->
<?php break;
     default:
         break;
endswitch; ?>

</div><!-- .meta-box-sortables.ui-sortable-->
</div><!-- .wrap -->

Please let me know if you have any questions! Happy... moving around!

Dino.

On 5/18/2011 10:02 AM, Helen Hou-Sandi wrote:
> I hadn't gotten around to the store in DB part yet (would love to hear how
> you're doing it), but this is what I've got for expand/collapse and
> draggable on a custom panel (a Help/Instructions bit for a client in my
> case). Don't want to guarantee everything I've done is best practice, though
> :)
>
> function yourprefix_admin_menu() {
> // help page menu item
> $help_page = add_dashboard_page( 'Help and Instructions', 'Help and
> Instructions', 'edit_posts', 'instructions', 'yourprefix_help_page');
>   add_action('load-'.$help_page, 'yourprefix_help_page_scripts');
> }
> add_action('admin_menu', 'yourprefix_admin_menu');
>
> function yourprefix_help_page_scripts() {
> wp_enqueue_style('dashboard');
>   wp_enqueue_script('postbox');
> wp_enqueue_script('dashboard');
> }
>
> // help page output
> function yourprefix_help_page() {
> echo '<div class="wrap">
> <h2>Help and Instructions for www.yourdomain.com</h2>
>   <div class="postbox-container" style="width:80%">
>   <div class="metabox-holder">
> <div class="meta-box-sortables">
>   <div id="edit-pages" class="postbox">
> <div class="handlediv" title="Click to toggle"><br /></div>
>   <h3 class="hndle"><span>Editing Pages</span></h3>
> <div class="inside">
>   <p>This is where information about editing pages would go.</p>
> </div><!-- .inside -->
>   </div><!-- #edit-pages -->
>   <div id="add-media" class="postbox">
>   <div class="handlediv" title="Click to toggle"><br /></div>
> <h3 class="hndle"><span>Adding Media</span></h3>
>   <div class="inside">
> <p>This is where information about adding media would go.</p>
>   </div><!-- .inside -->
> </div><!-- #add-media -->
>   </div><!-- .meta-box-sortables -->
> </div><!-- .metabox-holder -->
>   </div><!-- .postbox-container -->
> </div><!-- .wrap -->
>   ';
> }
>
>
> --
> Helen Hou-Sandi
> http://www.helenhousandi.com
>
>
>
> On Wed, May 18, 2011 at 9:01 AM, Andy Charrington-Wilden<
> andycharrington at gmail.com>  wrote:
>
>> Checkout the classes on the widgets page. Once you enque the same scripts
>> you can have it act the same way as the widgets page. I'm not at my computer
>> right now but essentially you're looking for 3 things in the widgets page.
>> 1. The class that defines an area where something can be dragged.
>> 2. The class that defines something as draggable
>> 3. The correct scripts to enque.
>>
>> I would really like to know how you get on. :-)
>>
>> Sent from my iPhone
>>
>> On 18 May 2011, at 13:46, Dino Termini<dino at duechiacchiere.it>  wrote:
>>
>>> Hi all,
>>>
>>> one of the plugins I've developed has a layout made of small panels,
>> something similar to Wordpress Dashboard. I would like to implement the same
>> drag and drop feature, to move those panels around and store their position
>> in the database. I've already figured out the 'store in the DB' part, but I
>> can't seem to be able to leverage the existing JQuery libraries to enable
>> this functionality. Any ideas on how to implement this?
>>>
>>> Thanks,
>>> Dino.
>>> _______________________________________________
>>> wp-hackers mailing list
>>> wp-hackers at lists.automattic.com
>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>> _______________________________________________
>> wp-hackers mailing list
>> wp-hackers at lists.automattic.com
>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>>
> _______________________________________________
> wp-hackers mailing list
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers