JQuery - 이동 divs/행

Question

나는 일련의 행을 가지고 있고 행을 선택하기 위해 onclick을 시도하고 있으며, 형제 행의 전후에 그것을 움직인다.

내가 insertBefore(), insertAfter(), prev() 및 next() 선택하고 요소를 이동하는 일련의를 사용하는 것을 시도하고있다. 나는 이것들이 사용하기 좋은 방법인지 아니면 그들의 비추천 시간이나 이것 저것에 도달하고 있는지 확실하지 않다.

이 코드는 다음과 같습니다 :

HTML

<div> 
    <div class="row"> 
     <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-12 medium-5 large-5 columns"></div> 
     <div class="show-for-medium-up medium-1 large-1 columns"> 
     <div class="row"> 
      <div class="small-6 columns close-thik"></div> 
      <div class="small-6 columns arrow"> 
       <div class="arrow-up"></div> 
       <div class="arrow-down"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-12 medium-5 large-5 columns"></div> 
     <div class="show-for-medium-up medium-1 large-1 columns"> 
     <div class="row"> 
      <div class="small-6 columns close-thik"></div> 
      <div class="small-6 columns arrow"> 
       <div class="arrow-up"></div> 
       <div class="arrow-down"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-4 medium-1 large-1 text-center columns"></div> 
     <div class="small-12 medium-5 large-5 columns"></div> 
     <div class="show-for-medium-up medium-1 large-1 columns"> 
     <div class="row"> 
      <div class="small-6 columns close-thik"></div> 
      <div class="small-6 columns arrow"> 
       <div class="arrow-up"></div> 
       <div class="arrow-down"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

당신이 볼 수 있듯이, 클래스 와 <div>을 위해 (위, 아래 화살표있는 그 내부가 두 개의 div의 화살표있다 움직이는). 당신이 상상할 수있는 경우 자바 스크립트

var MovePerson = { 

    up: function() { 

     $(document).on("click", ".arrow-up", function() { 

      $(this).parents().eq(3).insertBefore($(this).prev()); 

     }); 

    }, 

    down: function() { 

     $(document).on("click", ".arrow-down", function() { 

      $(this).parents().eq(3).insertAfter($(this).next()); 

     }); 

    } 

}; 

$(document).ready(MovePerson.up); 
$(document).ready(MovePerson.down); 

그래서, 나는 행

A B C D 

을 그리고 순서는 다음 A, C, B, D 될 것이다, 그래서 두 번째 행에 C를 이동하려는.

내 논리는 을 사용하여 <row>을 선택한 다음 요소를 앞뒤로 이동하려면 더 많은 js를 사용하는 것이 좋습니다.

(보너스) 내가 끝이나 처음에 도달했는지 알면 좋을 것 같습니다. 그래서 아마 내 표적의 전후에 또 다른 형제가 있는지를 감지 할 수있는 방법 일 겁니다.

Answer 1

생각은 단순히 현재 행을 선택하고 이전/다음 행을 식별하고 현재 행을 분리하고 이전 행 또는 다음 행 다음에 슬롯을 분리하는 것입니다.

다음은 코드 스 니펫의 빠른 모드입니다.

var MovePerson = { 

    up: function() { 

     $(document).on("click", ".arrow-up", function() { 

      var thisRow = $(this).parents().eq(3); 
      var prevRow = $(thisRow).prev(); 

      //we only want to move this row up if there is a row before this row. 
      if(prevRow){ 
       $(prevRow).before($(thisRow).detach()); 
      } 
     }); 

    }, 

    down: function() { 

     $(document).on("click", ".arrow-down", function() { 

      var thisRow = $(this).parents().eq(3); 
      var nextRow = $(thisRow).next(); 

      //we only want to move this row down if there is a row after this row. 
      if(nextRow){ 
       $(nextRow).after($(thisRow).detach()); 
      } 
     }); 

    } 

}; 

$(document).ready(MovePerson.up); 
$(document).ready(MovePerson.down);