wp jquery nested sortable

wp-jquery-nested-sortable.php

add_action('admin_menu', 'smooth_nested_sortable_menu');

function smooth_nested_sortable_menu()
{
	add_menu_page(
		'Smooth Nested Sortable', // Page title
		'Nested Sortable',        // Menu title
		'manage_options',         // Capability
		'smooth-nested-sortable', // Menu slug
		'smooth_nested_sortable_page', // Function to display the content
		'dashicons-sort',         // Icon URL
		6                         // Position
	);
}

function smooth_nested_sortable_page()
{
?>
	<div class="wrap">
		<h1>Smooth Nested Sortable</h1>
		<ol class="wpk-sortable">
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
				<ol>
					<li>
						<div class="wpk-sortable-item">
							<p>Item</p>
						</div>
						<ol>
							<li>
								<div class="wpk-sortable-item">
									<p>Item</p>
								</div>
							</li>
						</ol>
					</li>
					<li>
						<div class="wpk-sortable-item">
							<p>Item</p>
						</div>
					</li>
				</ol>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
			<li>
				<div class="wpk-sortable-item">
					<p>Item</p>
				</div>
			</li>
		</ol>
	</div>

	<style type="text/css">
		ol.wpk-sortable,
		ol.wpk-sortable ol {
			list-style-type: none;
		}

		ol.wpk-sortable li .wpk-sortable-item {
			background: #eee;
			border: 1px solid #ddd;
			cursor: move;
			margin: 0;
			padding: 10px;
		}

		ol.wpk-sortable li .wpk-sortable-item p {
			margin: 0;
		}

		ol.wpk-sortable .placeholder {
			outline: 1px dashed green;
			background: rgba(0, 128, 0, 0.105);
		}

		ol.wpk-sortable .mjs-nestedSortable-error {
			outline: 1px dashed red;
			background: rgba(255, 0, 0, 0.105);
		}
	</style>

	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
	<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/nestedSortable/2.0.0/jquery.mjs.nestedSortable.min.js"></script>

	<script>
		jQuery(document).ready(function($) {
			var ns = $('ol.wpk-sortable').nestedSortable({
				forcePlaceholderSize: true,
				handle: 'div',
				helper: 'clone',
				items: 'li',
				opacity: .6,
				placeholder: 'placeholder',
				revert: 250,
				tabSize: 25,
				tolerance: 'pointer',
				toleranceElement: '> div',
				maxLevels: 4,
				isTree: true,
				expandOnHover: 700,
				startCollapsed: false,
				change: function() {
					console.log('Relocated item');
				}
			});
		});
	</script>
<?php
}