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>然后使用更多的j来在元素之前或之后移动它。

（额外奖励）如果我已经到达终点或开始，我们会很高兴。所以也许某种方式来检测我的目标之后或之前是否有另一个兄弟姐妹。

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

JQuery - 移动Divs / Rows

1 个答案: