간단한 jquery 드래그 앤 드롭 정렬 효과 구현 code_jquery

단계: 1. 마우스로 이동하는 효과 구현 2. 개체의 마지막 좌표를 드래그하고 해당 좌표로 계산합니다. 삽입할 요소를 결정하는 요소 4. insertBefore 메소드를 사용하여 대상 요소 앞에 삽입합니다. 구체적인 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. 테스트된 드래그 기능 body , div { margin: 0; 글꼴 크기: 12px } body { width: 960px; margin: 0 auto; { 여백: 0; 목록 스타일: 없음; } .clear: 둘 다; 높이: 0px; 글꼴 크기: 1px .box { 너비: 600px; 높이: 25px 0 0; 테두리: 1px 솔리드 #f00; } .main { 위치: 정적; 하단: 5px; 단색 파란색; 배경: #ccc; ; 불투명도: 0.7; } .hide { 너비: 600px; 여백-하단: 5px; } .dash { 위치: sta;tic; 높이: 80px; : 5px; 테두리: 1px 점선 #f00; $(document).ready( function () { var range = { x: 0, y: 0 };// 마우스 요소 오프셋 var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //드래그 객체의 4개 좌표 var tarPos = { x: 0, y: 0, x1: 0, y1: 0 } ; //대상 요소 객체의 좌표 초기화 var theDiv = null, move = false; //드래그 객체 드래그 상태 var theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; //드래그 객체의 인덱스와 높이를 초기화합니다. var tarDiv = null, tarFirst, tempDiv; //삽입할 대상 요소의 객체, 임시 점선 객체 $(".main").each(function(){ $(this ) .mousedown(function (event){ //객체 드래그 theDiv = $(this); //마우스 요소의 상대 오프셋 range.x = event.pageX - theDiv.offset ().left; range.y = event.pageY - theDiv.offset().top; theDivId = theDiv.index() theDivHeight = theDiv.height(); = theDivHeight/2; move = true; theDiv.attr("class","maindash") // 드래그한 요소 앞 위치에 삽입합니다(점선). box) $(" ").insertBefore(theDiv) }) $(문서) .mousemove(function (event) { if (!move) return false; lastPos.x = event.pageX - range.x; lastPos.y = event.pageY - range.y; lastPos.y1 = lastPos.y theDivHeight; // 마우스로 이동할 요소를 드래그하세요 theDiv.css({left: lastPos.x 'px',top: lastPos.y 'px'} ); / / 요소를 드래그하고 마우스를 움직여 대상 요소를 찾아 삽입합니다. var $main = $('.main') // 지역 변수: 각 요소의 좌표를 다시 가져옵니다. 재배열된 순서, tempDiv = $ (".dash"); //임시 점선 상자의 객체 가져오기 $main.each(function () { tarDiv = $(this); tarPos.x = tarDiv.offset().left; tarPos.y = tarDiv.offset().top; tarPos.y1 = tarPos.y tarDiv.height()/2; = $main.eq(0); // 첫 번째 요소 가져오기 tarFirstY = tarFirst.offset().top theDivHalf; //첫 번째 요소 객체의 중심 세로좌표 //객체를 첫 번째 요소로 드래그 position if (lastPos .y tempDiv.insertBefore(tarFirst); } //삽입할 대상 요소의 좌표를 판단한 후 if (lastPos.y >= tarPos .y - theDivHalf && lastPos.y1 >= tarPos.y1 ) { tempDiv.insertAfter(tarDiv) } }); ).mouseup(function(event) { theDiv.insertBefore(tempDiv); // 요소를 드래그 앤 드롭하여 점선 div 위치에 삽입합니다 theDiv.attr("class", "main" ); //객체의 초기 스타일 복원 tempDiv.remove (); // 새로 생성된 점선 div 삭제 move=false; });

div2 div3 div4 div5