在Angular中将一个DIV元素移入另一个

Question

I am working with Jquery code in Angular where I want to move one DIV element inside another Here is my code

.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 file

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

But My code is not working may be because detach() , parent() , attr() do not work .

Answer 1

I'm not expert in angular but your jquery code inside the function works fine for me .. your problem maybe in the relation between the function and (click)='moveButton(this)'

this is how it works with jquery without a function

 $(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> 

Answer 2

You don't need to use detach() and appendTo() on same level, only appendTo() function is enough to do this.

I know you wanted to do this in AngularJS, but you can do this totally in jQuery, check below code:

 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>