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裏面有是向上和向下箭頭（用於移動）。

的JavaScript

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 

我想移動C到第二行，所以爲了將被A, C, B, D。

所以我的邏輯是用$(this).parents().eq(3)去選擇<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);