大佬教程收集整理的这篇文章主要介绍了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插件 – wordpress菜单创建者全部内容,希望文章能够帮你解决jquery插件 – wordpress菜单创建者所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。