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

[Heiko Rabe]

I wrote an example plugin and tutorial here: http://www.code-styling.de/english/how-to-use-wordpress-metaboxes-at-own-plugins

Feel free to test and inspect it, the source is also fully commented to explain everything. 

Am 18.05.2011 um 22:24 schrieb Helen Hou-Sandi <helen.y.hou at gmail.com>:

> I'd love to see a working example if you're willing to share! I'm sure I
> could poke around and figure it out, but can't hurt to ask :)
> 
> --
> Helen Hou-Sandi
> http://www.helenhousandi.com
> 
> 
> 
> On Wed, May 18, 2011 at 4:14 PM, Dino Termini <dino at duechiacchiere.it>wrote:
> 
>> 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
>> _______________________________________________
>> 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