fügen Sie ziehbare Abschnitte auf der WordPress-Plug-in-Seite hinzu

Question 1

Ich möchte ziehbare und sortierbare Abschnitte auf der Plugin-Seite von WordPress erstellen, wie wir auf dem Dashboard sehen. Ich habe versucht zu finden, aber ich bekomme nicht genau das, was ich will. Hier ist das Stück Code, obwohl es zwei Divs mit einer Schnittstelle hinzufügt, die der ziehbaren Schnittstelle im Dashboard ähnelt, aber ich kann nicht ziehen.

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

Question 2

Sie müssen das Sortierskript in die Warteschlange einreihen und jQuery und jQuery UI Sortable als Abhängigkeiten hinzufügen. Ihr Beispielcode hat add_dashboard_page mit falschen Parametern auch verwenden admin_print_scripts Anstatt von 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
}

Und die moveit.js Datei:

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

Question 3

Von dem, was ich von Ihrem Code sehen kann, möchten Sie wahrscheinlich sortierbar zusammen mit ziehbarer Benutzeroberfläche verwenden
http://jqueryui.com/dragable/#sortable in irgendeiner Weise oder allein mit Schnappen.