You're gonna have to have 2 tiers to this, a PHP script to store the user's preference and recreate it upon reentry and a JS script to allow them to place it. How you handle placing it is up to you, I'd probably go with a drag-and-drop interface. My script would go something like the following:
add_action( 'wp_enqueue_scripts', 'my_divider_enqueue' );
add_action( 'wp_ajax_insert-divider', 'ajax_insert_divider' );
// enqueue the script
function my_divider_enqueue() {
// register the script elsewhere, preferably in an init hook
wp_enqueue_script( 'divider-js' );
$passed_vars = array(
'ajaxurl' => admin_url('admin-ajax.php' ),
'nonce' => wp_create_nonce( 'divider-ajax-nonce' )
);
if( is_user_logged_in() )
$passed_vars['prev'] => get_user_meta( $current_user->ID, 'divider_location', true ); // you shouldn't need to declare $current_user, but you may
wp_localize_script( 'divider-js', 'divider', $passed_vars );
}
// handle the js
function ajax_insert_divider() {
if( !wp_verify_nonce( $_POST['divider_nonce'], 'divider-ajax-nonce' ) ) {
header("HTTP/1.0 401 Internal Server Error", true, 401);
exit;
} else {
//may not be necessary, you can test this
global $current_user;
get_currentuserinfo();
//update user meta
update_user_meta( $current_user->ID, 'divider_location', $_POST['divider_location'] );
}
exit;
}
Docs: wp_register_script()
, wp_enqueue_script()
, wp_localize_script()
, wp_create_nonce()
, is_user_logged_in()
, get_user_meta()
, wp_verify_nonce()
, get_currentuserinfo()
, update_user_meta()
and then after that have some javascript/jQuery to handle when the user changes (this is pseudocode, since implementation is something you'll need to decide on)
jQuery(document).ready(function(){
//when the user releases the divider in the desired location, do some stuff
jQuery('.divider').mouseup(function() {
if( divider_is_valid() ) {
place_divider();
} else {
reset_divider();
}
});
//using divider.prev, place the desired dividers
});
function reset_divider() {
//put the divider back where it started, either in a holder for unused dividers or where it was in the menu previously
}
function place_divider() {
//place divider where it's going
jQuery.post(
divider.ajaxurl,
{
action : 'insert-divider',
divider_nonce : divider.nonce,
location : //some representation of the location that you can call later
},
function( response ) {
//execute any actions you need to do on response
}
);
}
Script is entirely untested (I wrote it directly into the answer editor lol), but it should get you going in the right direction.