在wordpress插件中添加可拖動部分頁面

想要在WordPress插件頁面中製作可拖動和可排序部分，就像我們在儀表板上看到的一樣。我試圖找到，但力量正是我想要的。這是一段代碼，雖然它添加了兩個div，其界面類似於儀表板中的可拖動界面，但我無法拖動。在wordpress插件中添加可拖動部分頁面

<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'); ?>

來源

2013-09-25 codepixlabs

您必須排隊排序腳本，並添加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-25 12:30:13 brasofilo

那真棒，正是我想要的.. – codepixlabs

還有一件事我該如何在頂部添加一個小圖標像wordpress，它會切換盒子的視圖？ – codepixlabs

你的意思是像Widgets和Metaboxes？在自定義頁面中，您必須手動檢查HTML標記以重現它，或者在此處和[wordpress.se]搜索標記關鍵字/ ids。我不知道預製解決方案... – brasofilo

從我可以看到你的代碼，你可能想用拖動UI http://jqueryui.com/draggable/#sortable以某種方式或單獨在一起使用排序與捕捉。

來源

2013-09-25 11:24:28 cpuweb

想知道WordPress的具體程序 – codepixlabs

也許你可以看到在這裏 http://pippinsplugins.com/drag-and-drop-做order-for-plugin-options/ – cpuweb

在wordpress插件中添加可拖動部分頁面

回答

相關問題