需要克隆选定的<div> - angular 2

时间:2017-06-16 05:37:49

标签: angular typescript clone

  

我需要克隆一个div,右键单击时会显示一个克隆按钮。

我在editpage.ts中使用此代码打开带有clone按钮的上下文菜单

 detectRightMouseClick($event) {
    // disabling the default browser window which comes on right click
    document.addEventListener('contextmenu', event => event.preventDefault());

       if($event.which === 3) {
           this.rightPanelStyle = {'display':'block','left':$event.clientX + 'px','top':$event.clientY + 'px'};
            return false;
       }
  }


 //for clone
  clone(){
    console.log("Clone function here");
  }

现在我如何克隆我右键单击的<div>。我的editpage.html代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Full screen sections with CSS</title>
      <link rel="stylesheet" href="./assets/files/css/style.css"> 
      {{template_skeleton_top_param}} 
</head>

<body>
<div #child>

<div>
<p>Clone me</p>
</div>

</div>
</body>
</html>

我想右键点击div并克隆<div>标记<p>以及div

1 个答案:

答案 0 :(得分:0)

 document.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  console.log(e, e.srcElement.outerHTML);
  this.htmlstring = e.srcElement.outerHTML;
});