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);