这只是一个简单的问题,没有人知道一个jquery插件,它复制了与wordpress菜单创建者相同的动作,而您可以拖放菜单项并稍微向右拖动缩小为上述链接的孩子?我到处寻找(我知道它是用jQuery UI制作的),但找不到任何将它封装到插件中的人。jquery插件 - wordpress菜单创建者
问候
编辑
这里是我迄今为止...希望得到任何帮助。
$(".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();
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例如:
<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>
是的,这个功能在jQuery的UI.Why你不使用[这] http://jqueryui.com/demos/draggable/#sortable – Gowri
'((我知道它是使用jQuery UI),但无法找到任何已将它包装到插件中的人。“# –
我相信,没有插件仅用于排序脚本。为什么需要详细解释 – Gowri