append draggable image to div для печати

Я использую следующий код для перетаскивания и масштабирования некоторых изображений. Кроме того, я использую следующий код для печати определенного div. Все элементы внутри этого div хорошо печатаются, но когда я перетаскиваю на него новые изображения и пытаюсь распечатать ... изображения не отображаются.append draggable image to 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 draggables, и положение этих элементов в DOM не меняется при падении.

Таким образом, $(elem).html() фактически не содержит элементы, которые вы в него вложили.

Для достижения этой цели вы должны инициализировать цель сбрасывания как droppable widget и вручную добавить перетаскиваемый в droppable на событие 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

append draggable image to div для печати

ответ

Смежные вопросы