基于JQuery的列表拖动排序实现代码

您所在的位置:网站首页 jquery排序行移动效果 基于JQuery的列表拖动排序实现代码

基于JQuery的列表拖动排序实现代码

2023-04-17 15:16| 来源: 网络整理| 查看: 265

/** *  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