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

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

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

").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;
});

div1

div2

div3

div4

div5