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

Dino Termini dino at duechiacchiere.it
Wed May 18 20:14:24 UTC 2011


Actually it turns out Wp already sends the positions back to the server (but you have to provide a valid nounce via hidden input field)... God bless those who developed Live Http Headers :) So it's just a matter of reading the information from the database and displaying your panels accordingly (foreach... Switch)

Please let me know if you have questions...

Dino

On May 18, 2011, at 10:02 AM, Helen Hou-Sandi <helen.y.hou at gmail.com> 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


More information about the wp-hackers mailing list