javascript - 克隆右键单击的 div 元素

Question

我需要克隆您右键单击的 div。右键单击打开上下文菜单，单击克隆选项以克隆它。

我正在努力实现同样的目标，但不知道为什么它不起作用，这是我的 jsfiddle

我已经添加了代码来克隆我们右键单击的 div，我不知道为什么它是否有效。

$(document).on("contextmenu", "div", function(event) {
  $(".custom-menu")
    .show(100)
    .css({
      top: event.pageY + "px",
      left: event.pageX + "px"
    });

  alert("right clicked");
  event.preventDefault();
  $("div.selected").removeClass("selected");
  $("div.selected").addClass("selected");
  return false;
});

$(document).on("mouseup", function() {
  $(".selecteddiv").removeClass("selecteddiv");
  $(".selected").removeClass("selected");
  $(".custom-menu").hide(100);
});

$(".custom-menu li").click(function() {
  switch ($(this).attr("data-action")) {
    case "first":
      alert("clone button clicked");

                if($("div.selected").hasClass('selected')) {
								var clonned = $(this).clone();
              clonned.removeClass('selected');
             clonned.insertAfter($(this));
          }

      break;
  }
});

.selected {
  border: 1px solid red;
}


.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  overflow: hidden;
  width: 120px;
  white-space: nowrap;
  font-family: sans-serif;
  -webkit-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
}

.custom-menu li {
  padding: 5px 10px;
}

.custom-menu li:hover {
  background-color: #4679BD;
  cursor: pointer;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6 col-md-6 col-sm-12" style=" padding:20px; ">

    <div class="col-md-12 context_image">
        <img src="http://pngimg.com/uploads/ferrari/ferrari_PNG10680.png" class="imgsen-117 sim-row-edit">
    </div>

    <div contenteditable="true" class="col-md-12 smalltxt20-l">Why is building with Variant so darn fun and dead-easy?
    </div>

    <div contenteditable="true" class="col-md-12 smalltxt">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
    </div>

    <div class="col-md-12 smalltxt context_menu context_link">
        <a href="http://google.com" target="_blank" class="btntst-b">LEARN MORE</a>
    </div>

</div>

<ul class='custom-menu'>
    <li data-action="first">Clone</li>
    <li data-action="second">Remove</li>
    <li data-action="third">Edit</li>
    <li data-action="fourth">Action</li>
</ul>

Answer 1

我刚给你的图片一个id

<img src="http://pngimg.com/uploads/ferrari/ferrari_PNG10680.png" class="imgsen-117 sim-row-edit" id="img1">

当点击克隆选项时，下面的代码会创建相同图像的副本，id 为“img2”

var div = document.getElementById('img1'); 
clone = div.cloneNode(true);  
clone.id = "img2";
document.body.appendChild(clone);