代码之家 › 专栏 › 技术社区 › user2828442

克隆右键单击的div元素

css html jquery javascript

user2828442 · 技术社区 · 6 年前

我需要克隆你右键单击的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>

2 回复 | 直到 6 年前

Sarath Mohan 6 年前

我刚给了你一个身份证

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

SilentCoder 6 年前

我在更改JS代码的地方添加了注释,最后 #clonedContent 只是一个有身份证的部门。请检查一下,

 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 我编辑过。