jquery plugin - wordpress menu creator
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.
regards
Edit
Here's what I have so far... 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'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();
开发者_Go百科 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' });
}
}
}
}
});
html example:
<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>
Think I found a plugin like this, if you are still looking.
http://mjsarfatti.com/sandbox/nestedSortable/
Have not tried it out yet, but about to do just that.
精彩评论