javascript - Clone working for an element but not for entire div -
explanation: trying clone elements / div. trying achieve right clicking on them opening context menu , clicking on "clone" option.
i have simple code, let me show -
(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 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 pass side of 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 menu item '" + selectedmenu.text() + "' on 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); } } });<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 p </p> <h3> 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>run code , right click on "this p" or "this h3" , select clone, cloned want clone entire div according selection. requirement works me on click dont know how context menu, see code here, below code work left click, see pic, can clone entire div or single element depending on area of click, same thing want above right click - https://www.dropbox.com/s/mqftyt96s75jc6b/screenshot%202017-04-07%2013.38.30.png?dl=0
$('*').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()); });<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 p </p> <h3> h3 </h3> </div> <button id="button">show it</button> </div> </body> </html>
to achieve implement new context menu item clones parent() element of 1 triggered event.
also note can tidy logic using data attribute specify action performed instead of matching text. try this:
!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 make 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 p </p> <h3>this 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>
Comments
Post a Comment