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.


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>
<div id="droppable" class="droppable sortable">
<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 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(); ?>



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


    $( ".droppable" ).droppable({
      accept: ".item"
    $( ".sortable" ).sortable();

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


    width: 40%;
    height: 500px;
    padding: 10px;
    float: left;
    background-color: #FFCC00;
    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;
  • I'm trying to get a better idea of your question. Is it, how do I send data to php from javascript?
    – colecmc
    Jul 14, 2015 at 16:49
  • 1
    @colecmc Thanks for asking. No one replied to my question but I've found the solution myself.
    – Puni
    Jul 15, 2015 at 15:17

1 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...


        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;
        return idArray;
  • where is the snippet that you actually save it in WP DB? Also how do you handle composite items? thanks Dec 16, 2019 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.