php - 在 wordpress 插件页面中添加可拖动部分

Question

想要在 wordpress 的插件页面中制作可拖动和可排序的部分，就像我们在仪表板上看到的那样。我试着找到但没有得到我想要的。这是一段代码，虽然它添加了两个div，其界面类似于仪表板中的可拖动界面，但我无法拖动。

<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

您必须将排序脚本加入队列，并添加 jQuery 和 jQuery UI Sortable 作为依赖项。您的示例代码包含参数错误的 add_dashboard_page，同时使用 admin_print_scripts 而不是 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
}

还有 moveit.js 文件:

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