打印内容相对位置的事后调整及保存

运行此示例        视频演示

你开发时，使用了一种打印机来调试你的套打程序，但用户上线时，可能会发现有些打印机型号，根本不是你开发时使用的那种，这时，可能会出现在部分打印机上，打出来的位置有些 是对的，有些则不对，这时，你不能改服务端的代码来调整位置，因为服务端代码会影响所有的用户，所有打印机，势必造成顾此失彼的局面。

这时，你可能很自然地想到，能不能让用户，自已（实际上，一般是在项目上线时，由开发人员代劳）来对出现错位的套打内容，进行可视化地拖动，达到微调的目的。当然，调整正确后，还能让用户的机子记住这个设置，以便下次打印同一票据，自动套用调整后的位置，避免每次手工调整。 开发本功能的目的，就要是达到这种效果。

为了实现这种事后调整，必须对套打网页作如下设置：

1. 代码必须加上

myDoc = {
...


dragDesigner:{viewSource:false},  // 必须设置,
settingsID: 'mydoc2',     // 必须设置
...
}

jatoolsPrinter.printPreview(myDoc);

2. 可以拖动的对象，必须设置如下：

<div id='f1' draggable='true' class='f1 my-f1' style='position:absolute;'>423051702880563</div> 

必须有id属性，必须设置draggable为true ，必须引用'my-'+id的样式类，css的position属性，必须为absolute，对象的top、left属性，必须通过样式类来设置，不能通过sytyle属性来设置，下面的指定都是错误的：

//不正确,没有引用 'my-'+id样式类
<div id='f1' draggable='true' class='f1' style='position:absolute;'>423051702880563</div> 

//不正确,在style属性中，指定了top,left属性
<div id='f1' draggable='true' class='f1' style='position:absolute;left:10;top:20' >423051702880563</div>