gpt4 book ai didi

javascript - 将可拖动图像附加到 div 以进行打印

转载 作者:行者123 更新时间:2023-11-28 19:29:41 26 4
gpt4 key购买 nike

我正在使用下面的代码来拖动和缩放一些图像。我还使用下面的代码来打印特定的 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:

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

</div>

还有打印按钮:

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

最佳答案

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
}
});

关于javascript - 将可拖动图像附加到 div 以进行打印,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27115572/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com