This is just a quick question, does anyone know of a jquery plugin that plays the same action as the wordpress menu creator, while you can drag and drop menu items as well as drag them slightly to the right to fall back as a child of the link above? I looked everywhere (and I know that this was done using the jquery user interface), but cannot find anyone who wrapped it in a plugin.
considers
Edit
Here is what I still ... would appreciate any help.
$( ".connectSortable" ).sortable({ placeholder: "ui-state-highlight", connectWith: ".connectedSortable", items: "li:not(.ui-state-disabled)", helper : 'clone', beforeStop : function(event, ui) { var dist = 25; var placeholder = $('.ui-state-highlight'); var currentDepth = placeholder.attr('depth'); ui.item.css({ 'margin-left' : (currentDepth*dist) + 'px' }).attr('depth', currentDepth); }, stop : function(event, ui) { var child = ui.item; var parent = child.prev(); var parentId = parent.attr('child'); child.attr('parent', parentId); }, sort: function(event, ui) { if( $('.ui-sortable-helper').length != 0 ) { // get dragable object var moveable = $('.ui-sortable-helper'); // get the place holder for this object var placeholder = $('.ui-state-highlight'); // find out the offset when draging var moveableOffset = moveable.offset(); // find the placeholder offset var placeholderOffset = placeholder.offset(); // get the left offset for both var moveableLeft = moveableOffset.left; var placeholderLeft = placeholderOffset.left; // set how many pixels to the right you want the indent when pushed as a child var dist = 25; // when dragging, if the draggable is more than the pixels set to go to the right than the placeholder... if( ( moveableLeft - placeholderLeft ) > dist ) { // find the parent element var parent = placeholder.prev(); // if the dragged element has not get been assigned a depth (no parent by default) if( typeof moveable.attr('depth') !== 'undefined' ) { // get the draggable object current depth var thisDepth = moveable.attr('depth'); }else{ // if the dragged element has not been assigned a depth (no parent by default), set to 0 var thisDepth = 0; } // if the parent has been set a depth if( typeof parent.attr('depth') !== 'undefined' ) { // get the parents current depth var currentDepth = parent.attr('depth'); currentDepth = ( currentDepth == '' ? '0' : currentDepth ); // find out the placeholders current margin set var currentMargin = Number(placeholder.css('margin-left').replace('px', '')); // work out the new margin var newMargin = ((Number(currentDepth)+1)*Number(dist)); // move the placeholder so when/if the user releases it is now a child of the above placeholder.attr('depth', (Number(currentDepth)+1)).css({ 'margin-left' : newMargin + 'px' }); }else{ placeholder.attr('depth', '1').css({ 'margin-left' : dist+'px' }); } }else{ // if not, lets go backwards var parent = placeholder.prev(); if( typeof parent.attr('depth') != 'undefined' ) { var currentDepth = parent.attr('depth'); currentDepth = ( currentDepth == '' ? '0' : currentDepth ); if( currentDepth != '0' ) { placeholder.attr('depth', (Number(currentDepth)-1)).css({ 'margin-left' : ((Number(currentDepth)-1)*Number(dist)) + 'px' }); } }else{ placeholder.attr('depth', '0').css({ 'margin-left' : '0' }); } } } } });
Example
html:
<ul class="connectedSortable connectSortable sortables ui-sortable" id="sortable2"> <li id="post-id-1" child="1" parent="0" class="ui-state-default posty">Test 1</li> <li id="post-id-2" child="2" parent="0" class="ui-state-default posty">Test 2</li> <li id="post-id-5" child="5" parent="0" class="ui-state-default posty">Test 3</li> <li id="post-id-3" child="3" parent="0" class="ui-state-default posty">Test 4</li> <li id="post-id-4" child="4" parent="0" class="ui-state-default posty">Test 5</li> </ul>
source share