wordpress drag and order posts code example
Example: wordpress php drag and drop
<?php
add_action( 'admin_menu', 'myuserorder_menu' );
function myuserorder_menu()
{
$page = add_users_page(
__( 'My Users Order', 'myuserorder' ),
__( 'My Users Order', 'myuserorder' ),
'manage_links',
'myuserorder',
'myuserorder'
);
add_action( "admin_print_scripts-$page", 'myuserorder_js_libs' );
}
function myuserorder_js_libs()
{
wp_enqueue_script( 'jquery-ui-sortable', false, array( 'jquery-ui-core', 'jquery' ) );
}
function myuserorder()
{
?>
<div class='wrap'>
<form name="frmMyUserOrder" method="post" action="">
<h2><?php _e('My Users Order', 'myuserorder') ?></h2>
<ul id="myUserOrderList">
<?php
$results = get_users();
foreach( $results as $user )
echo "<li id='{$user->data->ID}' class='lineitem'>" . $user->data->display_name . "</li>";
?>
</ul>
</form>
</div>
<style type="text/css">
#myUserOrderList {
width: 90%;
border:1px solid #B2B2B2;
margin:10px 10px 10px 0px;
padding:5px 10px 5px 10px;
list-style:none;
background-color:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
li.lineitem {
border:1px solid #B2B2B2;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#F1F1F1;
color:#000;
cursor:move;
font-size:13px;
margin-top:5px;
margin-bottom:5px;
padding: 2px 5px 2px 5px;
height:1.5em;
line-height:1.5em;
}
.sortable-placeholder{
border:1px dashed #B2B2B2;
margin-top:5px;
margin-bottom:5px;
padding: 2px 5px 2px 5px;
height:1.5em;
line-height:1.5em;
}
</style>
<script language="JavaScript" type="text/javascript">
function orderUsers()
{
var newOrder = jQuery("#myUserOrderList").sortable("toArray");
console.log( newOrder );
}
function myuserorderaddloadevent()
{
jQuery("#myUserOrderList").sortable({
placeholder: "sortable-placeholder",
revert: false,
tolerance: "pointer"
});
};
addLoadEvent( myuserorderaddloadevent );
</script>
<?php
}