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

时间:2015-07-10 作者:Puni

我想做的是将拖放到可拖放区域的项目存储到php数组中,以便存储到数据库中,以便从主题的其他部分访问存储的数组

Here is my code.
索引。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"
    });
});
样式。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;
}

1 个回复
SO网友:Puni

这是我自己的解决方案。在html中,我将id分配给所有项目,并在表单中添加了一个输入选项,通过脚本传递值,然后保存。易于理解的

剧本

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

结束

相关推荐

Ed.php中显示了多个自定义帖子类型

我觉得Wordpress中的自定义帖子类型有点麻烦。我已经创建了多种帖子类型,它们都很有效,但有一件事困扰着我。假设我有3种自定义帖子类型。电影、相册和视频游戏,每一个都有一定数量的帖子。现在,在侧栏菜单i admin中,如果我单击Movies的“All Movies”,它会显示最新的条目,无论是电影、相册还是视频游戏。。有没有办法将它们分开,所以当我按“所有电影”时,它只显示post类型电影中的帖子?我可以补充一下smashing\'s guide 创建自定义帖子类型。下面是我用来注册帖子类型的代码示例