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

집

웹 프론트엔드

JS 튜토리얼

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

May 16, 2016 pm 06:02 PM

jquery 견인 종류

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

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

<!DOCTYPE HTML> 
<html> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> 
<title>테스트된 드래그 기능</title> 
<style type= "text/css"> 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; 
<script type="text/javascript" src="jquery-1.6.1.min.js"< /script> 
<script type= "text/javascript"> 
$(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) 
$("<div class='dash'></div>").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 <= tarFirstY) { 
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; 
});  


<div class ="main" id="main1">div2</div> 
<div class="main" id="main2" >div3</div> 
<div class="main" id="main3">div4</div> 
<div class="main" id="main4">div5< /div> 
</div> 
</html>