wordpress php drag and drop

Solutions on MaxInterview for wordpress php drag and drop by the best coders in the world

showing results for - "wordpress php drag and drop"
Viktoria
15 Sep 2018
1<?php
2/* Plugin Name: My Users Order */
3
4add_action( 'admin_menu', 'myuserorder_menu' );
5
6function myuserorder_menu()
7{    
8    $page = add_users_page(
9        __( 'My Users Order', 'myuserorder' ), 
10        __( 'My Users Order', 'myuserorder' ), 
11        'manage_links', 
12        'myuserorder', 
13        'myuserorder'
14    );
15    add_action( "admin_print_scripts-$page", 'myuserorder_js_libs' );
16}
17
18function myuserorder_js_libs() 
19{
20    wp_enqueue_script( 'jquery-ui-sortable', false, array( 'jquery-ui-core', 'jquery' ) );
21}
22
23function myuserorder()
24{
25    ?>
26    <div class='wrap'>
27        <form name="frmMyUserOrder" method="post" action="">
28            <h2><?php _e('My Users Order', 'myuserorder') ?></h2>   
29            <ul id="myUserOrderList">
30            <?php
31            $results = get_users();
32            foreach( $results as $user )
33                echo "<li id='{$user->data->ID}' class='lineitem'>" . $user->data->display_name . "</li>";
34            ?>
35            </ul>
36        </form>
37    </div>
38
39    <style type="text/css">
40        #myUserOrderList {
41            width: 90%; 
42            border:1px solid #B2B2B2; 
43            margin:10px 10px 10px 0px;
44            padding:5px 10px 5px 10px;
45            list-style:none;
46            background-color:#fff;
47            -moz-border-radius:3px;
48            -webkit-border-radius:3px;
49        }
50        li.lineitem {
51            border:1px solid #B2B2B2;
52            -moz-border-radius:3px;
53            -webkit-border-radius:3px;
54            background-color:#F1F1F1;
55            color:#000;
56            cursor:move;
57            font-size:13px;
58            margin-top:5px;
59            margin-bottom:5px;
60            padding: 2px 5px 2px 5px;
61            height:1.5em;
62            line-height:1.5em;
63        }       
64        .sortable-placeholder{ 
65            border:1px dashed #B2B2B2;
66            margin-top:5px;
67            margin-bottom:5px; 
68            padding: 2px 5px 2px 5px;
69            height:1.5em;
70            line-height:1.5em;  
71        }
72    </style>
73
74    <script language="JavaScript" type="text/javascript">
75        function orderUsers() 
76        {
77            var newOrder = jQuery("#myUserOrderList").sortable("toArray");
78            console.log( newOrder );
79        }
80        function myuserorderaddloadevent()
81        {
82            jQuery("#myUserOrderList").sortable({ 
83                placeholder: "sortable-placeholder", 
84                revert: false,
85                tolerance: "pointer" 
86            });
87        };
88        addLoadEvent( myuserorderaddloadevent );
89    </script>
90    <?php
91}