javascript - JQuery - 移动 Div/行

Question

我有一组行，我试图通过单击来选择该行，然后将其移动到其同级行之前或之后。

我正在尝试使用一系列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>类 arrow 和里面的两个 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将其移动到元素之前或之后。

(奖励)很高兴知道我是否已经到达终点或起点。所以也许有某种方法可以检测我的目标之后或之前是否有另一个 sibling 。

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