Javascript 将可拖动图像附加到div以进行打印_Javascript_Jquery_Jquery Ui_Jquery Draggable

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

javascript jquery jquery-ui

Javascript 将可拖动图像附加到div以进行打印,javascript,jquery,jquery-ui,jquery-draggable,Javascript,Jquery,Jquery Ui,Jquery Draggable,我正在使用下面的代码来拖动和缩放一些图像。我还使用下面的代码打印一个特定的div。这个div中的所有元素都打印得很好，但是当我拖动新图像并尝试打印时。。。图像不会出现我正在使用jQuery和jQueryUI JavaScript: 打印代码： <script type="text/javascript"> function PrintElem(elem) { Popup($(elem).html()); } function Po

我正在使用下面的代码来拖动和缩放一些图像。我还使用下面的代码打印一个特定的div。这个div中的所有元素都打印得很好，但是当我拖动新图像并尝试打印时。。。图像不会出现

我正在使用jQuery和jQueryUI

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>


函数PrintElem（elem）
{
弹出（$（elem.html（））；
}
功能弹出窗口（数据）
{
var mywindow=window.open（“”，'my div'，'height=800，width=1012'）；
mywindow.document.write（'mydiv'）；
/*可选样式表*///mywindow.document.write（“”）；
mywindow.document.write（“”）；
mywindow.document.write（数据）；
mywindow.document.write（“”）；
mywindow.print（）；
mywindow.close（）；
返回true；
}

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>


$（文档）.ready（函数（）{
window.zindex=999；
$（“.dragger”）。可调整大小（{handles:'ne，se，sw，nw'}）；
$（“.dragger”）.parent（）.draggable({
堆栈：“div”
});
$（“.dragger”）。旋转({
绑定：{
dblclick:function（）{
$（此）.data（'angle'，$（此）.data（'angle'）+90）；
var w=$（this.css（'width'）；
$（this）.parent（）.rotate（{animateTo:$（this）.data（'angle'）}）.css（{width:$（this.css（'height'），height:w}）；
}
}
});
});

可拖动图像：

<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')" />

jQuery UI实际上并没有将要拖动的元素附加到您直观地将其拖放到上面的元素中。相反，它只是操纵DragTables的CSS位置属性，这些元素在

DOM

中的位置在拖放时不会改变

因此

$（elem）.html（）

实际上并不包含您放入其中的元素

为了实现这一点，您应该将drop目标初始化为，并手动将DRAGABLE附加到DROPABLE on事件。一些事情：

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

jQueryUI实际上并没有将要拖动的元素附加到可视化地将其拖放到上面的元素中。相反，它只是操纵DragTables的CSS位置属性，这些元素在

DOM

中的位置在拖放时不会改变

因此

$（elem）.html（）

实际上并不包含您放入其中的元素

为了实现这一点，您应该将drop目标初始化为，并手动将DRAGABLE附加到DROPABLE on事件。一些事情：

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

jQueryUI实际上并没有将要拖动的元素附加到可视化地将其拖放到上面的元素中。相反，它只是操纵DragTables的CSS位置属性，这些元素在

DOM

中的位置在拖放时不会改变

因此

$（elem）.html（）

实际上并不包含您放入其中的元素

为了实现这一点，您应该将drop目标初始化为，并手动将DRAGABLE附加到DROPABLE on事件。一些事情：

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

jQueryUI实际上并没有将要拖动的元素附加到可视化地将其拖放到上面的元素中。相反，它只是操纵DragTables的CSS位置属性，这些元素在

DOM

中的位置在拖放时不会改变

因此

$（elem）.html（）

实际上并不包含您放入其中的元素

为了实现这一点，您应该将drop目标初始化为，并手动将DRAGABLE附加到DROPABLE on事件。一些事情：

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