Skip to content

Instantly share code, notes, and snippets.

@adicahyaludin

adicahyaludin/wp-jquery-nested-sortable.php

Created July 19, 2024 06:47
Show Gist options
  • Save adicahyaludin/58a7a7b7ded16d12b516c5b5ab1e1bd7 to your computer and use it in GitHub Desktop.
Save adicahyaludin/58a7a7b7ded16d12b516c5b5ab1e1bd7 to your computer and use it in GitHub Desktop.
Download ZIP
wp jquery nested sortable
Raw
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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment