Перемещение одного элемента DIV внутри другого в Angular

Question

Я работаю с кодом Jquery в Angular, где я хочу переместить один элемент DIV в другой. Вот мой код

.ts file

moveButton(elem) {
  alert('hello' + elem);
  if ( $(elem).parent().attr('id') === 'oneDiv' ) {
    alert('hello' + elem);
    $(elem).detach().appendTo('#anotherDiv');

  } else {

    $(elem).detach().appendTo('#oneDiv');
  }
}

.HTML-файл

<div id="oneDiv">   
  <button id="btnDefault" class='btn123' (click)='moveButton(this)' type='button'> Button 1  </button>
  <button id="btnPrimary" class='btn123' (click)='moveButton(this)' type='button' > Button 2 </button>
  <button id="btnDanger" class='btn123' (click)='moveButton(this)' type='button' > Button 3 </button>
</div> 
<div id="anotherDiv"> </div>

Но мой код не работает, возможно, из-за того, что не работают detach (), parent (), attr ().

Answer 1

Вам не нужно использовать detach() и appendTo() на одном уровне, для этого достаточно только функции appendTo().

Я знаю, что вы хотели сделать это в AngularJS, но выможете сделать это полностью в jQuery, проверьте код ниже:

function moveButton(elem) {

  if ( $(elem).parent().attr('id') == 'oneDiv' ) {
    $(elem).appendTo('#anotherDiv');
  } else {
    $(elem).appendTo('#oneDiv');
  }
}

#oneDiv{
border:solid 2px blue;
padding:20px
}


#anotherDiv{
border:solid 2px orange;
padding:20px;
margin-top:10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="oneDiv">   
  <button id="btnDefault" class='btn123' onclick='moveButton(this)' type='button'> Button 1  </button>
  <button id="btnPrimary" class='btn123' onclick='moveButton(this)' type='button' > Button 2 </button>
  <button id="btnDanger" class='btn123' onclick='moveButton(this)' type='button' > Button 3 </button>
</div> 
<div id="anotherDiv"> </div>

Answer 2

Я не разбираюсь в угловых вопросах, но ваш jquery-код внутри функции прекрасно работает для меня .. Ваша проблема может быть в связи между функцией и (click)='moveButton(this)'

, как это работает с jquery без функции

$(document).ready(function(){
  $(document).on('click' , '.btn123' , function(){
    var elem = $(this);
    if ( $(elem).parent().attr('id') === 'oneDiv' ) {
      $(elem).detach().appendTo('#anotherDiv');
    } else {
      $(elem).detach().appendTo('#oneDiv');
    }
  });
});

#oneDiv{
  background : red;
}
#anotherDiv{
  background : blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="oneDiv">   
  <button id="btnDefault" class='btn123' type='button'> Button 1  </button>
  <button id="btnPrimary" class='btn123' type='button' > Button 2 </button>
  <button id="btnDanger" class='btn123' type='button' > Button 3 </button>
</div> 
<div id="anotherDiv"> </div>