[JavaScript] 요소의 위아래 위치 바꾸기, 위치 변경하기

작업 내용

- up, down 버튼을 클릭하면 <span>으로 잡혀있는 영역 전체 위치를 바꾸어야 함.

- 가장 위와 아래는 disabled 처리되어야 함.

 

방법

- 클릭한 위치의 요소를 기준으로 삼아서 부모, 형제, 가까운 요소를 찾아야 함.

 

 

jsp 코드

 <span id="img-form" class="img-form">
            
        <div class="cnt-box" id="cnt-box">
                        
           <div class="ipt-tbl-header">
             	<input type="text"  id="title" name="title" placeholder="제목을 입력해주세요">
             
                <!-- 순서 -->
                <div class="control">
                  <button type="button" id="btnUp" class="btn-up" name="btnUp">up</button>
                  <button type="button" id="btnDown" class="btn-down" name="btnDown">down</button>
                </div>

            </div>	
         </div>
 </span>

 

js 코드

$("button[name='btnUp']").off("click").on("click",function() {
	$popupImg.fnMoveUp(this);
});

$("button[name='btnDown']").off("click").on("click",function() {
	$popupImg.fnMoveDown(this);
});


/**
* Up Down 버튼 클릭시
*/

	fnMoveUp : function(el) {
		var $nowSpan = $(el).closest("span");
		
		console.log("현재 id:" + $nowSpan.attr("id"));
		console.log("이전 형제:" + $nowSpan.prev().attr("id"));	
	
		$nowSpan.prev().before($nowSpan);	
		
	},
	
	fnMoveDown : function(el) {
		//var $nowSpan = $(el).parents().eq(3);
		var $nowSpan = $(el).closest("span");
		console.log("현재 id:" + $nowSpan.attr("id"));
		console.log("다음 형제: " + $nowSpan.next().attr("id"));	
		
		$nowSpan.next().after($nowSpan);			
		
	},

 

* 상황에 따라 closest() 또는 parents()로 요소를 찾으면 됨.