克隆为元素而不是为整个div工作

时间:2017-04-07 08:10:46

标签: javascript jquery html

说明:我正在尝试克隆元素/ div。我试图通过右键单击它们打开上下文菜单并单击" clone"来实现它。选项。

我有一个非常简单的代码,让我告诉你 -



(function ($, window) {

    $.fn.contextMenu = function (settings) {

        return this.each(function () {

            // Open context menu
            $(this).on("contextmenu", function (e) {
                // return native menu if pressing control
                if (e.ctrlKey) return;
                
                //open menu
                var $menu = $(settings.menuSelector)
                    .data("invokedOn", $(e.target))
                    .show()
                    .css({
                        position: "absolute",
                        left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                        top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                    })
                    .off('click')
                    .on('click', 'a', function (e) {
                        $menu.hide();
                
                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);
                        
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                    });
                
                return false;
            });

            //make sure menu closes on any click
            $('body').click(function () {
                $(settings.menuSelector).hide();
            });
        });
        
        function getMenuPosition(mouse, direction, scrollDir) {
            var win = $(window)[direction](),
                scroll = $(window)[scrollDir](),
                menu = $(settings.menuSelector)[direction](),
                position = mouse + scroll;
                        
            // opening menu would pass the side of the page
            if (mouse + menu > win && menu < mouse) 
                position -= menu;
            
            return position;
        }    

    };
})(jQuery, window);




$("#container").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu) {
		
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
			//var itsId = $(invokedOn).attr('id');
			var selectedText = $(invokedOn).get(0).outerHTML;
			var parentDiv = $(invokedOn).parent();
        alert(selectedText);
		if (selectedMenu.text() == "Clone"){
			//alert("inside");
			$(invokedOn).clone().insertAfter(invokedOn);
		}
    }
});
&#13;
<html>

<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">


</head>


<body>
<div id="container">

<div id="content">content</div>

    <div id="content2">
	<p>This is p </p>
	<h3> This is h3 </h3>
	</div>  
    
</div>



<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Clone</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
 
</ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="contextmenu.js"></script>



</body>
&#13;
&#13;
&#13;

运行代码并右键单击&#34;这是p&#34;或者&#34;这是h3&#34;并选择克隆,它们将被克隆,但我也想根据我的选择克隆整个div。这个要求对我有用,但不知道怎么做上下文菜单,在这里看到这个代码,下面的代码可以左键单击,看到这张图片,我可以克隆整个div或单个元素,具体取决于我的点击区域,同样的事情,我想在上面右键点击 - https://www.dropbox.com/s/mqftyt96s75jc6b/Screenshot%202017-04-07%2013.38.30.png?dl=0

&#13;
&#13;
$('*').on('click', function(e){
    e.stopPropagation()
	var thisDiv_name = $(this).attr('id');
	var thisDiv = $(this);
	var parentDiv = $(this).parent();
   // $(this).clone().appendTo(parentDiv);	
   $(this).attr('style','outline: #6c6b69 solid thin;');
$(this).clone().insertAfter(thisDiv);
//alert($(this).html());				
});
&#13;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

</script>
</head>
<body>
<div id="main">
    <div id="content">content</div>
    <div id="content2">
	<p>This is p </p>
	<h3> This is h3 </h3>
	</div>
    <button id="button">show it</button>
</div>



</body>







</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

要实现此目的,您可以实现一个新的上下文菜单项,该项目克隆触发事件的parent()元素。

另请注意,您可以使用data属性来指定要执行的操作而不是匹配文本,从而整理逻辑。试试这个:

!function(a,b){a.fn.contextMenu=function(c){function d(d,e,f){var g=a(b)[e](),h=a(b)[f](),i=a(c.menuSelector)[e](),j=d+h;return d+i>g&&i<d&&(j-=i),j}return this.each(function(){a(this).on("contextmenu",function(b){if(!b.ctrlKey){var e=a(c.menuSelector).data("invokedOn",a(b.target)).show().css({position:"absolute",left:d(b.clientX,"width","scrollLeft"),top:d(b.clientY,"height","scrollTop")}).off("click").on("click","a",function(b){e.hide();var d=e.data("invokedOn"),f=a(b.target);c.menuSelected.call(this,d,f)});return!1}}),a("body").click(function(){a(c.menuSelector).hide()})})}}(jQuery,window);

$("#container").contextMenu({
  menuSelector: "#contextMenu",
  menuSelected: function($invokedOn, $selectedMenu) {
    var action = $selectedMenu.data('action');
    switch (action) {
      case 'cloneEl':
        $invokedOn.clone().insertAfter($invokedOn);
        break;
      case 'cloneParent':
        var $parent = $invokedOn.parent();
        $parent.clone().insertAfter($parent);
    }
  }
});
/* CSS is only to make the output more obvious */
p { background-color: #CC0; }
h3 { background-color: #0CC; }
#container > div { 
  border: 1px solid #C00; 
  margin: 5px;
}
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="container">
  <div id="content">content</div>
  <div id="content2">
    <p>This is p </p>
    <h3>This is h3</h3>
  </div>
</div>

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none">
  <li><a tabindex="-1" href="#" data-action="cloneEl">Clone</a></li>
  <li><a tabindex="-1" href="#" data-action="cloneParent">Clone parent</a></li>
  <li><a tabindex="-1" href="#" data-action="another">Another action</a></li>
</ul>