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

what wanted items dropped droppable area , stored php array can store database can access stored array other parts of wordpress theme.

index.php

<?php  /* plugin name: drag , drop plugin uri: https://wordpress.com/ description: dd 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' ); ?>         <!-- 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; }