用javascript获取html数据到php数组并存储到wordpress数据库

Question

我想要做的是获取掉落到droppable区域的项目并将其存储为php数组，以便我可以存储到数据库中，以便我可以从wordpress主题的其他部分访问存储的数组。

的index.php

<?php 
/*
Plugin Name: Drag And Drop
Plugin URI: https://wordpress.com/
Description: DD is a test plugin
Version: 1.0.0
Author: Puni Charana
Author URI: https://wordpress.com/
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

// create custom plugin settings menu
add_action( 'admin_menu', 'dd_plugin_create_menu' );
function dd_plugin_create_menu () {

    //create new top-level menu
    add_menu_page( 'DD Settings', 'DD Settings', 'administrator', __FILE__, 'dd_plugin_settings_page' );
    //call register settings function
    add_action( 'admin_init', 'register_dd_plugin_settings' );
}

function register_dd_plugin_settings() {
    //register our settings
     register_setting( 'dd-plugin-settings-group', '' );
}

function dd_plugin_settings_page () {
?>
<div class="wrap">
<h2>DD Plugin</h2>
<hr>
<div id="droppable" class="droppable sortable">
</div>
<div id="draggable" class="draggable">
    <p class="item">Hello1</p>
    <p class="item">Hello2</p>
    <p class="item">Hello3</p>
    <p class="item">Hello4</p>
    <p class="item">Hello5</p>
</div>
<div id="form-container">
    <form method="post" action="options.php">
        <?php settings_fields( 'dd-plugin-settings-group' ); ?>
        <?php do_settings_sections( 'dd-plugin-settings-group' ); ?>
        <!-- Do stuff here -->
        <?php submit_button(); ?>
    </form>
</div>

</div>

<?php
}

add_action( 'admin_init','dd_enqueue_css' );
function dd_enqueue_css () {
    wp_enqueue_style( 'style-name', plugins_url().'/drag-and-drop/style.css', __FILE__);
}
add_action( 'admin_enqueue_scripts', 'load_custom_script' );
function load_custom_script() {
    wp_enqueue_script('custom_js_script', plugins_url().'/drag-and-drop/myscript.js', array('jquery'));
    wp_enqueue_script('custom_js_script_ui', plugins_url().'/drag-and-drop/jquery-ui.min.js');
}

myscript.js

jQuery(document).ready(function($){
    $( ".droppable" ).droppable({
      accept: ".item"
    });
    $( ".sortable" ).sortable();

    $( ".draggable .item" ).draggable({
      connectToSortable: ".sortable"
    });
});

的style.css

.droppable{
    width: 40%;
    height: 500px;
    padding: 10px;
    float: left;
    background-color: #FFCC00;
}
.draggable{
    width: 40%;
    height: 500px;
    float: right;
    padding: 10px;
    background-color: #EECC55;
}
#form-container {
    width: 100%;
    height: auto;
    clear: both;
}
.item {
    width: 200px;
    height: auto;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 10px;
    text-align: center;
}