I am using the code below to drag and scale some images. Also I am using the code below to print a specific div. All elements inside this div are print well, but when I am dragging the new images on it and trying to print... images doesn't show up.
I am using jQuery and jQuery-UI.
JavaScript:
Printing Code:
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=800,width=1012');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
jQuery drag and scale:
<script>
$(document).ready(function() {
window.zindex = 999;
$(".dragger").resizable({handles: 'ne, se, sw, nw'});
$(".dragger").parent().draggable({
stack: "div"
});
$(".dragger").rotate({
bind: {
dblclick: function() {
$(this).data('angle', $(this).data('angle')+90);
var w = $(this).css('width');
$(this).parent().rotate({ animateTo: $(this).data('angle')}).css({width: $(this).css('height'), height: w});
}
}
});
});
</script>
Draggable images:
<div id="decorations" style="width:180px; height:770px; position:absolute;">
<div style="float:left; margin-left:5px; margin-top:5px;">
<img class="dragger" id="obj1" style="cursor: -webkit-grab;" src="objects/1.png" width="80" height="80">
</div>
<div style="float:left; margin-left:5px; margin-top:5px;">
<img class="dragger" id="obj2" style="cursor: -webkit-grab;" src="objects/2.png" width="80" height="80">
</div>
</div>
Printable div:
<div id="contentHolder" style="background-image:url(objects/papyrus.png); background-repeat:no-repeat;">
</div>
And the button for print:
<input type="button" value="Print Div" onclick="PrintElem('#contentHolder')" />
The jQuery UI draggable widget does not actually append the element being dragged into the element above which you visually drop it. Instead it just manipulates the CSS position properties of draggables and the position of those elements in
DOMdoes not change on drop.So
$(elem).html()doesn't actually contain the elements you dropped into it.For achieving this, you should initialize the drop target as a droppable widget, and manually append the draggable to the droppable on
dropevent. Something along: