Question

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

Answer 1

jQuery用户界面draggable widget实际上追加被拖动到您可视地删除它的元素中的元素。相反，它只是操纵draggables的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
  }
});

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

1 个答案: