order users with drag’n’drop?

2 comments

1. Quite a specific feature, never seen any plugin. But it’s a matter of taking a drag’n’drop plugin and adapting it.

   Here, a stripped and adapted version of My Link Order.
   Description and to-do:

   • A new submenu is created in Users, My Users Order.
   • In the plugin page, execute the function orderUsers() in your browser console, you’ll see the current order as an array. Drag and drop and execute again, the array shows the new order.
   • You’ll have to use the Settings API or create your AJAX code to deal with saving the order as User Meta data.
   • The styles and scripts printed within the submenu callback should go in their own CSS and JS files, and enqueued accordingly.

   <?php
   /* Plugin Name: My Users Order */
   
   add_action( 'admin_menu', 'myuserorder_menu' );
   
   function myuserorder_menu()
   {    
       $page = add_users_page(
           __( 'My Users Order', 'myuserorder' ), 
           __( 'My Users Order', 'myuserorder' ), 
           'manage_links', 
           'myuserorder', 
           'myuserorder'
       );
       add_action( "admin_print_scripts-$page", 'myuserorder_js_libs' );
   }
   
   function myuserorder_js_libs() 
   {
       wp_enqueue_script( 'jquery-ui-sortable', false, array( 'jquery-ui-core', 'jquery' ) );
   }
   
   function myuserorder()
   {
       ?>
       <div class='wrap'>
           <form name="frmMyUserOrder" method="post" action="">
               <h2><?php _e('My Users Order', 'myuserorder') ?></h2>   
               <ul id="myUserOrderList">
               <?php
               $results = get_users();
               foreach( $results as $user )
                   echo "<li id='{$user->data->ID}' class='lineitem'>" . $user->data->display_name . "</li>";
               ?>
               </ul>
           </form>
       </div>
   
       <style type="text/css">
           #myUserOrderList {
               width: 90%; 
               border:1px solid #B2B2B2; 
               margin:10px 10px 10px 0px;
               padding:5px 10px 5px 10px;
               list-style:none;
               background-color:#fff;
               -moz-border-radius:3px;
               -webkit-border-radius:3px;
           }
           li.lineitem {
               border:1px solid #B2B2B2;
               -moz-border-radius:3px;
               -webkit-border-radius:3px;
               background-color:#F1F1F1;
               color:#000;
               cursor:move;
               font-size:13px;
               margin-top:5px;
               margin-bottom:5px;
               padding: 2px 5px 2px 5px;
               height:1.5em;
               line-height:1.5em;
           }       
           .sortable-placeholder{ 
               border:1px dashed #B2B2B2;
               margin-top:5px;
               margin-bottom:5px; 
               padding: 2px 5px 2px 5px;
               height:1.5em;
               line-height:1.5em;  
           }
       </style>
   
       <script language="JavaScript" type="text/javascript">
           function orderUsers() 
           {
               var newOrder = jQuery("#myUserOrderList").sortable("toArray");
               console.log( newOrder );
           }
           function myuserorderaddloadevent()
           {
               jQuery("#myUserOrderList").sortable({ 
                   placeholder: "sortable-placeholder", 
                   revert: false,
                   tolerance: "pointer" 
               });
           };
           addLoadEvent( myuserorderaddloadevent );
       </script>
       <?php
   }
   

2. It seems there is no such plugin…

   So I created my own: https://github.com/cek125i/simple-user-ordering
   (~300 php lines, too long to post here)

   Influenced a lot by “Simple Page Ordering” plugin, but created from scratch.

   The lousy truth about this problem is that there seems to be no built-in way to sort users by meta-value. Luckily I have only 10-20 users so hopefully it won’t be too performance-expensive to sort them manually after fetching (that means one additional query per user to fetch meta value).

Comments are closed.