在 Angular 中将一个 DIV 元素移动到另一个 DIV 元素中答案

【问题标题】：Moving one DIV element inside another in Angular在 Angular 中将一个 DIV 元素移动到另一个 DIV 元素中
【发布时间】：2018-10-20 18:36:27
【问题描述】：

我正在使用 Angular 中的 Jquery 代码，我想将一个 DIV 元素移入另一个这是我的代码

.ts 文件

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() 不工作。

【问题讨论】：

你在使用 jquery 吗？

标签： jquery angular angular6 angular7

【解决方案1】：

我不是角度方面的专家，但你在函数中的 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>

【讨论】：

【解决方案2】：

您不需要在同一级别上使用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>

【讨论】：