How to clone selected divs

Question

Javascript report designer should allow to create copies of selected divs into same panel.

I tried to use

function DesignerClone() {
    $(".ui-selected").each(function () {
            var newDiv = $(this).prop('outerHTML'),
                parentpanel = $(this).parent(".designer-panel-body");
            parentpanel.prepend(newDiv);
    });
}

but all divs are lost. and empty panel appears. To reproduce, run code snippet and select some divs by mouse click. After that press clone button.

How to clone boxes ?

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style> .designer-panel-body { min-height: 1px; overflow: hidden; margin: 0; padding: 0; } .panel-footer { background-color: inherit; } .designer-panel, .designer-resetmargins { margin: 0; padding: 0; } .designer-verticalline, .designer-horizontalline, .designer-rectangle { font-size: 1pt; border: 1px solid #000000; } .designer-field { border: 1px solid lightgray; white-space: pre; overflow: hidden; } .ui-selecting { background-color: lightskyblue; color: white; } .ui-selected { background-color: lightskyblue; border-color: darkblue; color: white; } .designer-label { white-space: pre; } .designer-field, .designer-label { font-family: "Times New Roman"; font-size: 10pt; z-index: 2; } .designer-verticalline, .designer-horizontalline, .designer-rectangle, .designer-field, .designer-image, .designer-label { position: absolute; } </style> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> function DesignerClone() { $(".ui-selected").each(function () { var newDiv = $(this).prop('outerHTML'), parentpanel = $(this).parent(".designer-panel-body"); parentpanel.prepend(newDiv); }); } function getpos(e) { return { X: e.pageX, Y: e.pageY }; } function Rect(start, stop) { this.left = Math.min(start.X, stop.X); this.top = Math.min(start.Y, stop.Y); this.width = Math.abs(stop.X - start.X); this.height = Math.abs(stop.Y - start.Y); } $(function () { var startpos; var selected = $([]), offset = { top: 0, left: 0 }; $(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable(); var $liigutatavad = $(".designer-verticalline, .designer-horizontalline, .designer-rectangle, .designer-field, .designer-image, .designer-label"); $liigutatavad.draggable({ start: function (event, ui) { var $this = $(this); if ($this.hasClass("ui-selected")) { // if this is selected, attach current offset // of each selected element to that element selected = $(".ui-selected").each(function () { var el = $(this); el.data("offset", el.offset()); }); } else { // if this is not selected, clear current selection selected = $([]); $liigutatavad.removeClass("ui-selected"); } offset = $this.offset(); }, drag: function (event, ui) { // drag all selected elements simultaneously var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left; selected.not(this).each(function () { var $this = $(this); var elOffset = $this.data("offset"); $this.css({ top: elOffset.top + dt, left: elOffset.left + dl }); }); } }); // ...but manually implement selection to prevent interference from draggable() $(".designer-panel-body").on("click", "div", function (e) { if ( /*!e.metaKey &&*/ !e.shiftKey && !e.ctrlKey) { // deselect other elements if meta/shift not held down $(".designer-panel-body").removeClass("ui-selected"); $(this).addClass("ui-selected"); } else { if ($(this).hasClass("ui-selected")) { $(this).removeClass("ui-selected"); } else { $(this).addClass("ui-selected"); } } }); $(".designer-panel-body").selectable({}); }); </script> </head> <body> <button type="button" class="btn btn-default" onclick="javascript:false;DesignerClone()"> <span class="glyphicon glyphicon-paste"></span> </button> <div class='panel designer-panel'> <div class='panel-body designer-panel-body panel-warning' style='height:4cm'> <div class='designer-field' contenteditable='true' style='top:2.30cm;left:5.84cm;width:10.24cm;height:0.63cm;font-family:Arial;font-size:14pt;font-weight:bold;'>vnimi+&#39; &#39;+dok.tasudok</div> <div class='designer-field' contenteditable='true' style='top:2.30cm;left:16.37cm;width:2.68cm;height:0.61cm;font-size:14pt;'>DOK.kuupaev</div> <div class='rectangle' style='border-width: 1px;background-color:#FFFFFF;top:2.99cm;left:1.34cm;width:18.05cm;height:5.29cm'></div> <div class='designer-field' contenteditable='true' style='top:3.01cm;left:1.53cm;width:9.71cm;height:0.55cm;font-size:12pt;'>m.FIRMA</div> <div class='designer-field' contenteditable='true' style='top:3.01cm;left:12.13cm;width:3.13cm;height:0.53cm;font-size:12pt;'>ise.telefon</div> </div> <div class='bg-warning'> <div class='panel-footer'><i class='glyphicon glyphicon-chevron-up'></i> GroupHeader 1: str(dokumnr)+str(koopia,2)</div> </div> </div> </body> </html>

Answer 1

.appendTo takes selected element and removes it from previous position in the DOM.

jQuery.clone() is what you might be looking for.

How to clone selected divs

Question

1 answers

solution1
0 ACCPTED 2016-08-16 16:35:59

How to clone selected divs

Question

1 answers

solution1 0 ACCPTED 2016-08-16 16:35:59

solution1
0 ACCPTED 2016-08-16 16:35:59