JQuery_jquery를 기반으로 드래그 정렬 구현 코드 나열

요구사항

드래그 정렬은 이름에서 짐작할 수 있듯이 데이터 행을 길게 누른 채 원하는 정렬 위치로 드래그한 후 새로운 정렬 대기열을 저장하는 것입니다.

생각

먼저 목록 행에 대한 앵커 포인트를 만들고, mousedown 및 mouseup 이벤트를 바인딩하고, 마우스가 삽입하려는 위치로 이동하면 개체 행을 대상 행으로 이동한 다음 통과하는 모든 행을 정렬합니다.

아이디어는 매우 간단하지만, 아직 주목해야 할 문제가 몇 가지 있습니다

1. 이동하는 위치는 대상 행에 삽입되는 위치로 간주할 수 있습니다.
2. 상단과 하단에서 나갈 때 처음과 마지막으로 판단합니다.
3. 위로 이동하고 아래로 이동하는 처리

솔루션

이벤트 안내

Javascript의 마우스 누르기 및 놓기 이벤트는 onmousedown 및 onmouseup입니다. 따라서 JQuery에서는 mousedown 및 mouseup을 사용합니다.

우선 마우스의 이동거리를 판단해야 하기 때문에 인터페이스에 몇 줄이 있는지, 각 줄의 높이가 얼마나 되는지 알아야 합니다

코드 복사코드는 다음과 같습니다.

var tbodyHeight=setting.frame.outerHeight() //setting.frame, parent object
var lineNum=$("." settings.dgLine) .length; //setting.dgLine, 각 라인의 클래스 이름
var lineHeight=Math.ceil(tbodyHeight/lineNum);

lineNum(줄 수)을 가져오기만 하면 됩니다. 줄 높이를 계산하는 것 외에도 index()를 사용하여 시퀀스 인덱스 값을 통해 줄을 대상 위치로 이동하는 것이 또 다른 목적입니다

mousedown 이벤트가 트리거되면 마우스 이동 거리 계산을 시작해야 하며, 이는 선을 이동해야 하는 위치를 결정하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

dgid=$(this).attr( settings.id ); //모바일 행의 ID인 settings.id는 각 행의 ID를 표시하는 데 사용되는 이름입니다.
thisIndex=$("#" settings.linePre dgid).index() / /행의 인덱스, .linePre 설정, 각 라인 ID는 off
thisLineTop=$("#" settings.linePre dgid).offset().top; //이 라인의 상단 값
topDistance =thisIndex*lineHeight; //이 선은 첫 번째 선의 상단으로부터의 거리
downDistance=(lineNum-thisIndex-1)*lineHeight; //이 선과 마지막 선의 하단 사이의 거리

dgid는 주로 각 줄의 식별자를 구별하는 데 사용됩니다. 일반 목록은 프로그램 루프에 의해 출력됩니다. 이러한 ID가 없으면 어떤 줄이 무엇인지 알 수 없습니다. ID를 저장할 사람을 정의합니다. 프로그램은 attr을 사용하여 이 값을 가져오고 각 행이 고유한 값을 갖도록 합니다.

thisLineTop은 주로 마우스 이동 위치를 기준으로 높이를 계산하고, 선 높이와 인덱스 값을 기준으로 어느 선으로 이동했는지 확인하는 데 사용됩니다. 또 다른 기능은 움직이는 앵커 포인트가 눌렸는지 확인하는 것입니다. 값이 있으면 yes를 의미하고, 값이 없으면 후속 mouseup이 설정된다는 의미이며, mouseup이 수행되지 않습니다. 어떤 작업. 왜 이런 일을 하는가? 페이지의 어느 위치에서 마우스를 클릭해도 mouseup 이벤트가 발생하기 때문에 판단이 없으면 계속 실행되므로 몇 가지 문제가 발생할 수 있습니다.

topDistance와 downDistance는 마우스가 목록 밖으로 이동했는지 여부를 확인하는 데 사용됩니다. 제거된 경우, 즉 마우스가 이동한 거리가 topDistance 또는 downDistance보다 크다고 판단할 수 있습니다. 첫 번째 또는 마지막 행으로 이동했습니다.

mousedown 이벤트는 주로 이러한 몇 가지 작업을 수행합니다. 물론 효과를 위해 몇 가지 작업을 추가할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$("#" 설정.linePre dgid ).css ('Background',setting.lineHighlight); //모바일 라인 강조
var left=e.pageX 20;
var top=e.pageY;
dg_tips(left,top) / /프롬프트 레이어 생성
$('body').css('cursor','move'); //페이지의 마우스 동작 변경
$("body").disableSelection() / /누르기 비활성화 마우스가 마우스 뒤로 움직일 때 페이지 요소를 선택합니다
setting.frame.mousemove(function(e){ //프롬프트 레이어가 마우스 움직임을 따르도록 합니다
$("#dgf"). css({"left":e.pageX settings.tipsOffsetLeft 'px',"top":e.pageY 'px'});
});

이 기능의 목적은 작업을 보다 효율적으로 만드는 것입니다. 예를 들어 행을 강조 표시하면 사용자가 작업 중인 행을 알 수 있습니다. 프롬프트 레이어도 같은 방식으로 작동합니다.

선택 비활성화에 대해서는 .disableSelection(); jQuery_UI를 사용하는 경우 직접 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$('body').each(function() {                                                                           '선택:'없음',
사용자 선택':'없음',
'사용자 선택' :'none'
}).each(function() {
this.onselectstart = function() { return false; };
});
});

금지 선택 취소

코드 복사 코드는 다음과 같습니다.

$('body').each( function() {              ',

'user-select':''
});
});



다양성을 고려하여 다음 코드에서는 .disableSelection();
을 사용하지 않습니다.
자, 여기 mouseup 이벤트가 있습니다. 여기서 mouseup 이벤트는 본체에 바인딩됩니다. 왜냐하면 mouseup이 앵커 포인트에만 바인딩된 경우 마우스가 앵커 포인트 밖으로 이동한 후 마우스를 놓으면 mouseup 이벤트가 실행되지 않는다는 것을 알 수 있기 때문입니다. 다른 물체를 마우스업한 것이라고 생각할 것입니다. 따라서 가장 안전한 방법은 $('body').mouseup을 사용하는 것입니다. 기본적으로 문제는 없을 것입니다.

mouseup이 트리거된 후에는 의미 없는 이벤트 실행을 방지하기 위해 먼저 thisLineTop에 값이 있는지 확인해야 합니다. 그런 다음 마우스가 이동한 거리가 양수인지 음수인지, 즉 위쪽 또는 아래쪽으로 이동하는지 확인합니다.

var moveDistance=e.pageY-thisLineTop;

방향에 따라 가공을 다르게 합니다

코드 복사

코드는 다음과 같습니다.if(moveDistance if( thisIndex!=0){ moveDistance=Math.abs(moveDistance); //음수일 경우 절대값을 취함

if(moveDistance>lineHeight/2){ //여부 판단 이동 거리가 줄 높이의 1/2을 초과합니다

if(moveDistance>topDistance){ //이동 거리가 행에서 상단 가장자리까지의 거리보다 큰 경우
focusIndex=0;
}else {
focusIndex=thisIndex-Math.ceil( moveDistance/lineHeight);
}
$("." settings.dgLine).eq(focusIndex).before($("#" settings.linePre dgid ));//대상 위치에 선 삽입
}
}
}else{
if(thisIndex!=lineNum-1){
if(moveDistance>lineHeight/2 lineHeight ){
if(moveDistance>downDistance){
focusIndex=lineNum-1;
}else{
focusIndex=thisIndex Math.ceil(moveDistance/lineHeight)-1;
}
$("." settings.dgLine).eq( focusIndex).after($("#" settings.linePre dgid));
}
}
}



이동 거리가 행 높이의 1/2을 초과하는지 판단하는 이유는 작은 점만 이동하면 움직이지 않는 것으로 간주할 수 있기 때문입니다. 목표 인덱스 값을 계산할 때는 Math.ceil을 사용하며 이동 거리가 0보다 클 경우 아래쪽이므로 캐리가 -1이 됩니다.

위로 이동과 아래로 이동 시 삽입 방법이 서로 다릅니다. 이전과 이후가 왜 사용되는지 생각해 보세요.

이동한 후에도 마우스를 누를 때 사용된 효과를 제거해야 합니다

코드 복사

코드는 다음과 같습니다.$("#dgf").remove (); //프롬프트 레이어 제거$("#" settings.linePre dgid).css('Background','');//강조표시된 줄을 일반으로 변환dgid='';/ / 모바일 회선의 ID 값을 비워 둡니다

thisLineTop=0;//모바일 회선의 Top 값을 0으로 변경

$('body').css('cursor','default'); //마우스 동작 변경이 기본값입니다



기본적으로 이런 상황인데, 가장 큰 문제는 움직임을 처리하고 삽입할 위치를 결정하는 것입니다. 다른 모든 것은 매우 간단합니다.

업데이트 데이터 부분을 포함한 전체 패키지 프로그램이 아래에 나와 있습니다

코드 복사

코드는 다음과 같습니다.

/*
*
*  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(moveDistance     if(thisIndex!=0){
      moveDistance=Math.abs(moveDistance);
      if(moveDistance>lineHeight/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   var end=thisIndex   var ids='',vals='';
   for(var i=start;i    ids+=i==start?$("."+setting.dgLine).eq(i).attr(setting.id):','+$("."+setting.dgLine).eq(i).attr(setting.id);
    vals+=i==start?i:','+i;
   }
   $.getJSON(setting.JSONUrl,{'do':'changeorders','ids':ids,'vals':vals},function(d){
    $("#dg_mask").remove(); 
   });
  }

  function dg_mask(){
   var W=setting.frame.outerWidth();
   var H=setting.frame.outerHeight();
   var top=setting.frame.offset().top;
   var left=setting.frame.offset().left;
   var mask="

正在使劲的保存...

";
   $('body').append(mask);
   $("#dg_mask").css({"배경":"#999","위치":'절대',' 너비':W 'px','높이':H 'px','line-height':H 'px','top':상단 'px','왼쪽':왼쪽 'px','filter': 'alpha(opacity=' settings.maskOpacity ')','moz-opacity':setting.maskOpacity/100,'opacity':setting.maskOpacity/100,'text-align':'center','color':' #000'});
  }

  function dg_tips(left,top){
   var floatdiv="

移动一条记录

";
   $('body').append(floatdiv);
  }

  function unselect(){
   $('body').each(function() {          
    $(this).attr('unselectable', 'on').css({
     '- moz-user-select':'none',
     '-webkit-user-select':'none',
     'user-select':'none'
    }).each(function() {
     this.onselectstart = function() { return false; };
    });
   });
  }

  function onselect(){
   $('body').each(function() {          
    $( this).attr('선택할 수 없음', '').css({
     '-moz-user-select':'',
     '-webkit-user-select':'',
     ' user-select':''
    });
   });
  }
 }
})(jQuery);

사용

复主代码 代码如下:

 
  
   

  
 
 
  
  
   
   
  < ;/tr>
  
 

拖动	name称
	这里是一行

参数主要是dgLine，dgButton，id，linePre和JSONUrl，通过看HTML代码，应该不难理解。

关于拖动排序就是这么多了, 当然还可以把效果做得更漂亮些, 提示更清楚点, 有助于用户体验