定位 jquery.draggable() div 以使用 @media print 打印的问题答案

【问题标题】：problems positioning a jquery.draggable() div for printing with @media print定位 jquery.draggable() div 以使用 @media print 打印的问题
【发布时间】：2016-01-15 12:23:47
【问题描述】：

我有一个具有可拖动 div 的 Web 应用程序，当用户从 Web 浏览器中选择打印时，我需要打印。

到目前为止，我发现的最简洁的建议是 this 堆栈溢出答案，建议我让我的页面不可见并仅针对 @media print 显示 #plotArea，如下所示：

@media print {
    body * {
        visibility: hidden;
    }
    #plotArea, #plotArea * {
        visibility: visible;
    }
    #plotArea {
        /* this positioning ignores .draggable() divs */
        position: absolute;
        left: 0;   
        top: 0;
    }
}

但是，由于此 div 是可拖动的，因此我无法终生删除偏移量，以便 div 正确定位以进行打印。是否可以以某种方式暂时删除可拖动 div 的偏移量？下面是div的jquery/css

//jquery
$( "#plotArea" ).draggable().offset({ top: 15, left: 400});

/* css */
#plotArea {
    background-color: #FFFFFF;
    width: 42em;
    height: 54.5em;
    float:left;
    font-size: 12pt;
    overflow:hidden;
}

【问题讨论】：

标签： javascript jquery css printing

【解决方案1】：

那么您的意思是，可拖动插件正在将内联样式应用于您的 #plotArea div，因此会覆盖您使用打印媒体查询添加到其中的定位 css？

您需要做的是将其顶部/左侧等位置值重置为 auto 并使用 !important 规则覆盖覆盖通过 javascript 插件应用到它的内联样式。

例如；

@media print {
    #plotArea {
        left: auto !important;   
        top: auto !important;
    }
}

【讨论】：