6

想要在 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'); ?>
4

2 回答 2

5

您必须将排序脚本排入队列，并将 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'
     });
});
于 2013-09-25T12:30:13.030 回答
0

从我可以看到的代码中，您可能希望以某种方式或单独使用可排序的可拖动 ui http://jqueryui.com/draggable/#sortable 与捕捉。

于 2013-09-25T11:24:28.900 回答