我想做的是将拖放到可拖放区域的项目存储到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;
}