javascript - 使用 insertBefore 后无法移动元素

Question

我正在尝试创建一个系统，您可以在其中单击后退和前进以根据重要性重新排列图库图像。我下面的初始代码是将元素向后移动，并且最初似乎工作正常。但是，如果我尝试多次将元素移回原处，就会出现问题。

似乎在 $('#'+current_position).remove().insertBefore($('#'+new_position)); 之后元素变得无响应。

<div class="card-body">
                    <div class="container-fluid">
                      <div class="row">
                        <div class="col-sm gallery-item" id="1">
                          One of three columns
                             <div class="options">
                                <div class="back">b</div>
                                <div class="forward">f</div>
                            </div>
                        </div>
                        <div class="col-sm gallery-item" id="2">
                          Two of three columns
                             <div class="options">
                                <div class="back">b</div>
                                <div class="forward">f</div>
                            </div>
                        </div>
                        <div class="col-sm gallery-item" id="3">
                          Three of three columns
                            <div class="options">
                                <div class="back">b</div>
                                <div class="forward">f</div>
                            </div>
                        </div>
                      </div>
                    </div>
              </div>

<script>
$( ".back" ).click(function() {

 var current_position = $(this).closest('.gallery-item').attr('id')

 console.log(current_position)

 if(current_position > 1){

     var new_position = current_position - 1;

      console.log(new_position)

     $('#'+current_position).remove().insertBefore($('#'+new_position)); 

     $('#'+new_position).attr("id",current_position);
     $(this).closest('.gallery-item').attr("id",new_position);

 }

});

</script>

Answer 1

将remove()与detach()切换即可解决问题。

$( ".back" ).click(function() {
 var current_position = $(this).closest('.gallery-item').attr('id')
 console.log(current_position)

 if(current_position > 1){
     var new_position = current_position - 1;
      console.log(new_position)
     $('#'+current_position).detach().insertBefore($('#'+new_position)); 
     $('#'+new_position).attr("id",current_position);
     $(this).closest('.gallery-item').attr("id",new_position);
 }
});