將可拖動的圖像追加到打印的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中

回答

相關問題