drag and drop wordpress builder code example

Example: wordpress php drag and drop

<?php
/* Plugin Name: My Users Order */

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
}