Databases
StackOverflow2013
Postsdbo
POjquery plugin - wordpress menu creator
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery plugin - wordpress menu creator
    text
    copied!<p>this is just a quick question, does anyone know of a jquery plugin which replicates the same action as the wordpress menu creator whereas you can drag and drop the menu items and also drag slightly to the right to indent as a child for the above link? I have looked everywhere (and I know it's made using the jquery UI) but cant find anyone who has wrapped it up into a plugin.</p> <p>regards</p> <p><strong>Edit</strong></p> <p>Here's what I have so far... would appreciate any help.</p> <pre><code>$( ".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 ) &gt; 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's 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' }); } } } } }); </code></pre> <p>html example:</p> <pre><code>&lt;ul class="connectedSortable connectSortable sortables ui-sortable" id="sortable2"&gt; &lt;li id="post-id-1" child="1" parent="0" class="ui-state-default posty"&gt;Test 1&lt;/li&gt; &lt;li id="post-id-2" child="2" parent="0" class="ui-state-default posty"&gt;Test 2&lt;/li&gt; &lt;li id="post-id-5" child="5" parent="0" class="ui-state-default posty"&gt;Test 3&lt;/li&gt; &lt;li id="post-id-3" child="3" parent="0" class="ui-state-default posty"&gt;Test 4&lt;/li&gt; &lt;li id="post-id-4" child="4" parent="0" class="ui-state-default posty"&gt;Test 5&lt;/li&gt; &lt;/ul&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload