JQuery_jquery를 기반으로 드래그 정렬 구현 코드 나열
- WBOY원래의
- 2016-05-16 17:20:541321검색
요구사항
드래그 정렬은 이름에서 짐작할 수 있듯이 데이터 행을 길게 누른 채 원하는 정렬 위치로 드래그한 후 새로운 정렬 대기열을 저장하는 것입니다.
생각
먼저 목록 행에 대한 앵커 포인트를 만들고, 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; };
});
});
});
});
다양성을 고려하여 다음 코드에서는 .disableSelection();
을 사용하지 않습니다.
자, 여기 mouseup 이벤트가 있습니다. 여기서 mouseup 이벤트는 본체에 바인딩됩니다. 왜냐하면 mouseup이 앵커 포인트에만 바인딩된 경우 마우스가 앵커 포인트 밖으로 이동한 후 마우스를 놓으면 mouseup 이벤트가 실행되지 않는다는 것을 알 수 있기 때문입니다. 다른 물체를 마우스업한 것이라고 생각할 것입니다. 따라서 가장 안전한 방법은 $('body').mouseup을 사용하는 것입니다. 기본적으로 문제는 없을 것입니다.
var moveDistance=e.pageY-thisLineTop;
방향에 따라 가공을 다르게 합니다
코드 복사
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이 됩니다.
위로 이동과 아래로 이동 시 삽입 방법이 서로 다릅니다. 이전과 이후가 왜 사용되는지 생각해 보세요.
코드 복사
기본적으로 이런 상황인데, 가장 큰 문제는 움직임을 처리하고 삽입할 위치를 결정하는 것입니다. 다른 모든 것은 매우 간단합니다.
업데이트 데이터 부분을 포함한 전체 패키지 프로그램이 아래에 나와 있습니다
/*
*
* 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<0){
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
for(var i=start;i<=end;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);
사용
