想在wordpress的插件页面中制作可拖动和可排序的部分,就像我们在仪表板上看到的那样。我试着寻找,但dint得到了我想要的。 这是一段代码虽然它添加了两个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'); ?>
答案 0 :(得分: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'
});
});
答案 1 :(得分:0)
从我所看到的代码中你可能想要与draggable ui一起使用 http://jqueryui.com/draggable/#sortable在某种程度上或单独与捕捉。