基于JQuery的列表拖动排序实现代码 |
您所在的位置:网站首页 › jquery排序行移动效果 › 基于JQuery的列表拖动排序实现代码 |
/** * DragList.js* @author fuweiyi * */(function($){ $.fn.DragList=function(setting){ var _setting = { frame : $(this), dgLine : 'DLL', dgButton : 'DLB', id : 'action-id', linePre : 'list_', lineHighlight : '#ffffcc', tipsOpacity : 80, tipsOffsetLeft : 20, tipsOffsetTop : 0, JSONUrl : '', JSONData : {}, maskLoaddingIcon : '', maskBackgroundColor : '#999', maskOpacity : 30, maskColor : '#000', maskLoadIcon:'', }; var setting = $.extend(_setting,setting);
var dgid='',thisIndex,thisLineTop=0,topDistance,downDistance; var tbodyHeight=setting.frame.outerHeight(); var lineNum=$("."+setting.dgLine).length; var lineHeight=Math.ceil(tbodyHeight/lineNum); $("."+setting.dgButton).mousedown(function(e){ dgid=$(this).attr(setting.id); thisIndex=$("#"+setting.linePre+dgid).index(); var left=e.pageX+20; var top=e.pageY; thisLineTop=$("#"+setting.linePre+dgid).offset().top; topDistance=thisIndex*lineHeight; downDistance=(lineNum-thisIndex-1)*lineHeight; $("#"+setting.linePre+dgid).css('background',setting.lineHighlight); dg_tips(left,top); $('body').css('cursor','move'); unselect(); setting.frame.mousemove(function(e){ $("#dgf").css({"left":e.pageX+setting.tipsOffsetLeft+'px',"top":e.pageY+'px'}); }); }); $('body').mouseup(function(e){ if(thisLineTop>0){ var moveDistance=e.pageY-thisLineTop; if(moveDistancelineHeight/2){ if(moveDistance>topDistance){ focusIndex=0; }else{ focusIndex=thisIndex-Math.ceil(moveDistance/lineHeight); } $("."+setting.dgLine).eq(focusIndex).before($("#"+setting.linePre+dgid)); dg_update(thisIndex,focusIndex); } } }else{ if(thisIndex!=lineNum-1){ if(moveDistance>lineHeight/2+lineHeight){ if(moveDistance>downDistance){ focusIndex=lineNum-1; }else{ focusIndex=thisIndex+Math.ceil(moveDistance/lineHeight)-1; } $("."+setting.dgLine).eq(focusIndex).after($("#"+setting.linePre+dgid)); dg_update(thisIndex,focusIndex); } } } $("#dgf").remove(); $("#"+setting.linePre+dgid).css('background',''); dgid=''; thisLineTop=0; $('body').css('cursor','default'); onselect(); } }); function dg_update(thisIndex,focusIndex){ dg_mask(); var start=thisIndex |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |