Get html data with javascript to php array and store to wordpress database

Question

What I wanted to do is get the items that are dropped to the droppable area and stored it a php array so that I can store into database so that I can access the stored array from other parts of my theme

Here is my code.

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;
}

Answer 1

Here is my own solution. In my html I've assign id to all the item and inside the form I've added an input option where I pass the value through the script and it was saved later. Simple...

script

    jQuery(document).ready(function($){
    $(".sortable").sortable({
        connectWith: '.sortable',
        receive: function (event, ui) {
            document.getElementById('hello1').value = myFunction();
        },
        out: function (event, ui) {
            document.getElementById('hello1').value = myFunction();
        }
    });
    function myFunction(){
        var idArray = $("#droppable > p").map(function(){
            return this.id;
        }).get();
        return idArray;
    }
});