将可拖动的图像追加到打印的div中

我使用下面的代码来拖动和缩放一些图像。此外，我正在使用下面的代码来打印特定的div。这个div里面的所有元素都打印良好，但是当我拖动新图像并尝试打印时...图像不显示。将可拖动的图像追加到打印的div中

我正在使用jQuery和jQuery-UI。

的JavaScript：

打印代码：

<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的阻力及规模：

<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>

可拖动图片：

<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>

打印格：

<div id="contentHolder" style="background-image:url(objects/papyrus.png); background-repeat:no-repeat;"> 

</div>

而对于打印按钮：

<input type="button" value="Print Div" onclick="PrintElem('#contentHolder')" />

来源

2014-11-24 Irene T.

的jQuery UI的draggable widget实际上并不追加元素被拖入上面您直观地拖放的元素。相反，它只是操纵可拖动的CSS位置属性，并且这些元素在DOM中的位置在拖放时不会改变。

因此$(elem).html()实际上并不包含包含您放入它的元素。

为实现此目的，您应该将放置目标初始化为droppable widget，并手动将可拖动的追加到drop事件的可放置区域。沿途：

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

来源

2014-11-28 16:00:05

将可拖动的图像追加到打印的div中

回答

相关问题