ajouter des sections draggable dans wordpress plugin page

Question

voulez faire des sections draggable et triable dans la page plugin de wordpress, comme nous voyons sur le tableau de bord. J'ai essayé de trouver mais dint obtenir exactement ce que je veux. Voici le morceau de code bien qu'il ajoute deux divs avec une interface similaire à l'interface draggable dans le tableau de bord, mais je suis incapable de faire glisser.

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


<?php 

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

Answer 1

Vous devez mettre en file d'attente le script de tri et ajouter jQuery et jQuery UI Sortable en tant que dépendances. Votre exemple de code a add_dashboard_page avec des paramètres incorrects, également, utilisez admin_print_scripts au lieu de load-$page.

add_action('admin_menu', 'admin_page_with_draggable_boxes'); 

function admin_page_with_draggable_boxes() 
{ 
    $my_page = add_dashboard_page( 
     'Move it', 
     'Move it', 
     'add_users', 
     'moveit-page', 
     'moveit_callback' 
    ); 
    add_action("admin_print_scripts-$my_page", 'move_me_around_scripts'); 
} 

function move_me_around_scripts() 
{ 
    wp_enqueue_script( 
     'move-it', 
     plugins_url('/moveit.js', __FILE__), // <----- get_stylesheet_directory_uri() if used in a theme 
     array('jquery-ui-sortable', 'jquery') // <---- Dependencies 
    ); 
} 

function moveit_callback() 
{ 
    ?> 
    <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 --> 
    <?php 
} 

Et le fichier moveit.js:

jQuery(document).ready(function($) 
{ 
    $('.meta-box-sortables').sortable({ 
     opacity: 0.6, 
     revert: true, 
     cursor: 'move', 
     handle: '.hndle' 
    }); 
}); 

Answer 2

D'après ce que je peux voir de votre code que vous voulez probablement utiliser triables avec draggable ui http://jqueryui.com/draggable/#sortable dans ou seul avec someway serpentine.