How can I print this div with drag and drop objects? - php

Question

I can print it but the output is wrong. This is my script for print:
<script type="text/javascript">
function printDiv(divName)
{
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
And this is for the view:
<div class="accordion-body collapse in body" id="printableArea">
<div class="col-lg-12">
<span class="text-left"><h4><b>Course Code-Section: </b><?php echo $class;?></h4></span>
<span class="text-left"><h4><b>Course Description: </b><?php echo $description;?></h4></span>
<span class="text-left"><h4><b>School Year-Semester: </b><?php echo $schoolyearsemester;?></h4></span>
<span class="text-left"><h4><b>Day-Time: </b><?php echo $daytime;?></h4></span>
<span class="text-left"><h4><b>Room: </b><?php echo $room;?></h4></span>
<br>
</div>
<ul class="draglist" style="width:{{config.width * config.col}}px;" ng-cloak>
<li ng-repeat="obj in chairs" ng-drop="false" ng-drop-success="onDropComplete($index, $data,$event)" ng-cloak>
<div ng-drag="false" ng-drag-data="obj" ng-class="obj" ng-cloak>
<span class="student-name">{{obj.length > 3 ? obj: ''}}</span>
</div>
</li>
</ul>
<div class="form-actions">
<h3 class="text-center">Professor's Table</h3>
</div>
</div>
<input type="button" onclick="printDiv('printableArea')" value="Print Seatplan" />
And this is the image or output that displaying:
And this is the one that I am printing, a drag and drop seatplan: