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; };
});
});
});
});
다양성을 고려하여 다음 코드에서는 .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);
사용
| 拖动 | name称 |
 | 这里是一行 |
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7648
15
1392
52
91
11
73
19
36
110
jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드
Feb 27, 2024 pm 06:45 PM
jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery는 웹 사이트 개발에 널리 사용되는 JavaScript 라이브러리로, JavaScript 프로그래밍을 단순화하고 개발자에게 풍부한 기능을 제공합니다. 이 기사에서는 jQuery의 참조 방법을 자세히 소개하고 독자가 빠르게 시작할 수 있도록 구체적인 코드 예제를 제공합니다. jQuery 소개 먼저 HTML 파일에 jQuery 라이브러리를 도입해야 합니다. CDN 링크를 통해 소개하거나 다운로드할 수 있습니다.
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까?
Feb 28, 2024 pm 03:12 PM
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.
심층 분석: jQuery의 장점과 단점
Feb 27, 2024 pm 05:18 PM
jQuery는 프런트엔드 개발에 널리 사용되는 빠르고, 작고, 기능이 풍부한 JavaScript 라이브러리입니다. 2006년 출시 이후 jQuery는 많은 개발자가 선택하는 도구 중 하나가 되었지만 실제 애플리케이션에서는 몇 가지 장점과 단점도 있습니다. 이 기사에서는 jQuery의 장점과 단점을 심층적으로 분석하고 구체적인 코드 예제를 통해 설명합니다. 장점: 1. 간결한 구문 jQuery의 구문 디자인은 간결하고 명확하여 코드의 가독성과 쓰기 효율성을 크게 향상시킬 수 있습니다. 예를 들어,
jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까?
Feb 28, 2024 am 08:39 AM
jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.
jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.
Feb 28, 2024 pm 09:06 PM
제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <
jQuery를 사용하여 모든 태그의 텍스트 내용 수정
Feb 28, 2024 pm 05:42 PM
제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.
jQuery에서 eq의 역할 및 적용 시나리오 이해
Feb 28, 2024 pm 01:15 PM
jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s
jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요?
Feb 29, 2024 am 09:03 AM
jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인
