[wp-hackers] how to use sortable and droppable together

[Khaleel Abdul Karim]

Hi my fellow hackers ,
Hope all are doing well . I am in a trouble . Could anyone please help me .
Thanks in advance .  Here it is:
I am developing a plugin to manage pages which uses jQuery. The pages should
be sorted using jquery(There is a similar plugin : pageMash), And a page can
be made child of another by dragging over it . But i am having problems with
using *droppbale* and *sortable *together . Could any one please tell me a
solution . I am attaching the code below..

*function to generate list of pages

*function get_pages($post_parent)
    {
        global $wpdb;
        $pages=$wpdb->get_results("SELECT * FROM $wpdb->posts WHERE
post_type = 'page' and post_parent='$post_parent' order by menu_order");
        if($pages)
        {
            echo ($post_parent==0)?"<ul class='sortable'
id='sortable'>":"<ul class='sortable' id='sortable'>";
                foreach($pages as $page)
            {
                if($page->post_status=='trash')
                    continue;

 $visibility=get_post_meta($page->ID,'page_visibility','true');

?>
                <LI class="<?php echo ($post_parent==0)?'my':'child';
if($visibility=='hidden') echo " remove"; ?>" id="recordsArray_<?php echo
$page->ID;?>"> <?php  echo $page->post_title."&nbsp;&nbsp;<span
class=\"en_links\" id=\"$page->ID\">&gt;&gt;<span class=\"showopt\"
id=\"sh".$page->ID."\"> <a
href=\"".get_bloginfo("url")."?page_id=".$page->ID."\">View</a> <a
href=\"".get_bloginfo("url")."/wp-admin/post.php?action=edit&post=".$page->ID."\">Edit</a>
</span></span>";   ?></LI>
<?php            }
         ?>
        </UL>

<?php
        }

        return;
    }

*JQuery code*
*sortable*

jQuery("#sortable").sortable({
             opacity: 0.6,
             cursor: 'move',
             update: function() {
             //alert("in function");
                 var order = jQuery(this).sortable("serialize");

                //alert('ORDER : '+order);
 var data={
         action:'save_order',
         ORDER:order
 };

jQuery.post(ajaxurl, data,function(response) {
        document.getElementById("ms_disp").innerHTML='Pages Updated';
     });


            }
        });

*droppable*

jQuery("li.my").droppable({
            drop: function(event, ui) {

            var object=jQuery(this).attr('id');
            inHT=jQuery(this).html();

            var h=jQuery(ui.draggable).html();

            jQuery(this).append('<LI>'+h+'</LI>');
            jQuery(ui.draggable).remove();
            var drg_id=jQuery(ui.draggable).attr('id');


var data={
        action:'my_special_action',
        drop:object,
        drag:drg_id
    };
jQuery.post(ajaxurl, data,function(response) {
        document.getElementById("ms_disp").innerHTML='Pages Updated';
     }
);
}
});  //end droppable
-- 
~~~~~~~~~~~~~~~~~~
http://khaleel.isgreat.org
Khaleel Abdul Karim
Thazhathuveedu
Erumely