워드프레스 플러그인 페이지에 드래그 가능한 섹션 추가

워드프레스 플러그인 페이지에 드래그 가능한 섹션 추가

우리가 대시보드에서 보는 것처럼 워드프레스의 플러그인 페이지에서 드래그 가능하고 정렬 가능한 섹션을 만들고 싶습니다. 나는 찾으려고 노력했지만 정확히 내가 원하는 것을 얻지 못했습니다.여기 코드 조각이 있는데 대시보드에서 드래그 가능한 인터페이스와 비슷한 인터페이스를 가진 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'); ?>

정렬 스크립트를 대기열에 넣고 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
}

그리고 파일은:

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

코드를 보면 드래그 가능 UI http://jqueryui.com/draggable/ # sortable과 함께 정렬 가능한 정렬 가능을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/18997774/add-draggable-sections-in-wordpress-plugin-page