append draggable image to a div for print

Question

append draggable image to a div for print

1.4k views Asked by Irene T. At 14 September 2024 at 20:21

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')" />

Original Q&A

There are 1 answers

**T J** · Accepted Answer · 2014-11-28 16:00:05

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 DOM does 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 drop event. Something along:

$("#contentHolder").droppable({
  accept: "img.dragger",
  drop:function(event,ui){
    $(this).append(ui.draggable); // actually append the item on drop
  }
});

TechQA.

append draggable image to a div for print

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in JQUERY-DRAGGABLE

Popular Questions

Popular Tags

Trending Questions