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

Answer 2

我在更改您的JS代码的位置添加了注释，最后#clonedContent只是具有该ID的div。请检查一下，

 var clickedElement = ''; // I defined variable here
 $(document).on("contextmenu","div", function(event) {

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

 clickedElement  = $(this); // add your clicked element here
 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":
      $(clickedElement).clone().appendTo('#clonedContent'); // clone to a new dev
      break;
      }

      });

选中我编辑过的fiddle。

克隆右键单击div元素

2 个答案: