H5拖拽构造拖拽及缩放 pdf文件转换为html预览

前言：

协助项目需要实现一个签名的功能。

功能说明：1.有文本签名和头像签名。2.头像签名需要实现可拖拽功能。3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置。

功能一：实现拖拽

思路：H5拖拽及构造函数实现拖拽及缩放

要点：1.需要设置拖拽元素属性

　　　　draggable="true"　　

　　　2.可拖拽的元素设置ondragstart获取数据　　

　　 3.对可放置拖拽元素的设置ondragover函数

　　　　默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

　　 4.ondrop函数

　　设置放置后需要执行的方法。

 1  /*H5拖拽并复制*/
 2     var moveDemo=null;
 3     var _type;
 4     var divs=document.querySelectorAll(".left_list li");
 5     var showBox=document.querySelector(".section_main_pdf");
 6     for(var i=0;i<divs.length;i++){
 7         divs[i].ondragstart=function(e){
 8             moveDemo=this.querySelector("img");
 9             _type=this.querySelector('.list_name').innerText;
10         }
11     };
12     showBox.ondragover =function(e){
13         e.preventDefault();
14         //console.log('x:'+ e.pageX+';y:'+ e.pageY);
15     };
16     showBox.ondrop=function(e){
17         var _clone=moveDemo.cloneNode();
18         this.append(_clone);
19         console.log(_clone);
20         _clone.className='dragIcon';
21         $(_clone).css({
22             'width':'100%',
23             'height':'100%'
24         }).attr('draggable',false);
25         $(_clone).wrap('<span class="img_outer"></span>');
26         if(_type=='Signature'){
27             $(_clone).parent().css({
28                 'position':'absolute',
29                 'top': e.pageY,
30                 'left': e.pageX,
31                 'cursor':'move',
32                 'display':'inline-block',
33                 'border':'2px solid'
34             }).append('<span class="iconResize" style="position:absolute;display: inline-block; 10px;height: 10px;' +
35                 'cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;' +
36                 'border:2px solid;border-radius:50%"></span>').attr({
37                 'data-icon':'signature',
38                 'data-page':config.defaultPage
39             });
40         }
41         else if(_type=='PIN'){
42             $(_clone).parent().css({
43                 'position':'absolute',
44                 'top': e.pageY,
45                 'left': e.pageX,
46                 'cursor':'move',
47                 'display':'inline-block',
48                 'border':'2px solid'
49             }).attr({
50                 'data-icon':'pin',
51                 'data-page':config.defaultPage
52             });
53         }
54     };

功能二：构造拖拽及缩放函数

思路：通过获取鼠标事件及元素位置

 1 /*构造拖拽及缩放函数*/
 2     $(document).mousemove(function(e) {
 3         if (!!this.move) {
 4             var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
 5                 callback = document.call_down || function() {
 6                         $(this.move_target).css({
 7                             'top': e.pageY - posix.y,
 8                             'left': e.pageX - posix.x
 9                         });
10                     };
11             callback.call(this, e, posix);
12         }
13     }).mouseup(function(e) {
14         if (!!this.move) {
15             var callback = document.call_up || function(){};
16             callback.call(this, e);
17             $.extend(this, {
18                 'move': false,
19                 'move_target': null,
20                 'call_down': false,
21                 'call_up': false
22             });
23         }
24     });

备注于2017/7/26

而在拖拽过程中，由于说拖拽中也要限制不能拖拽出canvas画布外，于是又在构造函数这里添加了判断实现不可拖拽出canvas

附带如下代码：

 1 $(document).mousemove(function(e) {
 2         if (!!this.move) {
 3             var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
 4                 callback = document.call_down || function() {
 5                         var _toTop=e.pageY-posix.y,
 6                             _toLeft=e.pageX-posix.x;
 7 
 8                         /*获取canvas左下角位置*/
 9                         var canvasHigh=$("#canvas").height();//pdf高
10                         var canvasWid=$("#canvas").width();//pdf宽
11                         var canvasPosTop=$("#canvas").offset().top;//pdf距离顶部
12                         var canvasPosBottom=$("#canvas").offset().top+canvasHigh;//pdf底部距离顶部
13                         var canvasPosLeft=$("#canvas").offset().left;//pdf距离左边
14                         var canvasPosRight=canvasPosLeft+canvasWid;//pdf右边距离左边
15 
16                         if(_toTop < canvasPosTop){
17                             _toTop = canvasPosTop
18                         }
19                         if(_toTop > (canvasPosBottom - $(this.move_target).height()) ){
20                             _toTop = (canvasPosBottom - $(this.move_target).height())
21                         }
22                         if(_toLeft < canvasPosLeft){
23                             _toLeft = canvasPosLeft
24                         }
25                         if(_toLeft > (canvasPosRight - $(this.move_target).width()) ){
26                             _toLeft =(canvasPosRight - $(this.move_target).width())
27                         }
28 
29                         $(this.move_target).css({
30                             'top': _toTop ,//e.pageY - posix.y,
31                             'left': _toLeft//e.pageX - posix.x
32                         });
33                     };
34             callback.call(this, e, posix);
35         }
36     })

功能三：pdf展示

要点：引入pdf.js和pdf.worker.js进行API解析和核心解析

说明：1.pdf.js不能打开本地文件，需要服务器启动

　　 2.需要Firefox下运行报错才有提示(firefox的pdf解析)

 1 var loadingTask=PDFJS.getDocument(config.url);
 2         loadingTask.promise.then(
 3             function getPdf(pdf){
 4                 pdf.getPage(config.defaultPage).then(
 5                     function getPage(page){
 6                         var scale=1;
 7                         var viewport=page.getViewport(scale);
 8                         var canvas=document.getElementById('canvas');
 9                         var context=canvas.getContext('2d');
10                         canvas.height=config.outerHigh;
11                         canvas.width=config.outerWid;
12                         var renderContext={
13                             canvasContext:context,
14                             viewport:viewport
15                         };
16                         page.render(renderContext);
17                     },
18                     function pageError(msg){
19                         console.log(msg);
20                     }
21                 )
22             },
23             function pdfError(msg){
24                 alert(msg);
25             }
26         );

备注于2017/7/26

由于pdf文件的大小各异，于是进行了如下调整，是canvas展示的pdf进行缩放显示

调整上段代码后的结果：

 1 var loadingTask=PDFJS.getDocument(config.url);
 2         loadingTask.promise.then(
 3             function getPdf(pdf){
 4                 pdf.getPage(config.defaultPage).then(
 5                     function getPage(page){
 6                         var scale=1;
 7                         var viewport=page.getViewport(scale);
 8                         var canvas=document.getElementById('canvas');
 9                         var context=canvas.getContext('2d');
10                         var ch2vh=(config.outerHigh/viewport.height).toFixed(2),
11                             cw2vw=(config.outerWid/viewport.width).toFixed(2);
12                         if(ch2vh < cw2vw){
13                             viewport=page.getViewport(ch2vh);
14                         }else{
15                             viewport=page.getViewport(cw2vw);
16                         }
17                         canvas.height=config.outerHigh;
18                         canvas.width=config.outerWid;
19                         var renderContext={
20                             canvasContext:context,
21                             viewport:viewport
22                         };
23                         page.render(renderContext);
24                     },
25                     function pageError(msg){
26                         console.log(msg);
27                     }
28                 )
29             },
30             function pdfError(msg){
31                 alert(msg);
32             }
33         );

汇总：

1.签名js文件

备注：在交付的时候那边发现了在ie下拖拽时获取的图片有问题，然后又来找到了我，经过一轮的调试(ps：ie调试真不爽)，

发现获取字符串时候，ie好像默认添加了空格符，所以进不了if语句，现见if判断调整为：

if(

(_type).toLowerCase().trim()=='signature'

)

elseif同理。

再则ie报错不支持append()，所以将this.append()调整为this.appendChild()。

(备注：调整于2017/07/05)

  1 $(function(){
  2 
  3     /*H5拖拽并复制*/
  4     var moveDemo=null;
  5     var _type;
  6     var divs=document.querySelectorAll(".left_list li");
  7     var showBox=document.querySelector(".section_main_pdf");
  8     for(var i=0;i<divs.length;i++){
  9         divs[i].ondragstart=function(e){
 10             moveDemo=this.querySelector("img");
 11             _type=this.querySelector('.list_name').innerText;
 12         }
 13     };
 14     showBox.ondragover =function(e){
 15         e.preventDefault();
 16         //console.log('x:'+ e.pageX+';y:'+ e.pageY);
 17     };
 18     showBox.ondrop=function(e){
 19         var _clone=moveDemo.cloneNode();
 20         this.append(_clone);
 21         console.log(_clone);
 22         _clone.className='dragIcon';
 23         $(_clone).css({
 24             'width':'100%',
 25             'height':'100%'
 26         }).attr('draggable',false);
 27         $(_clone).wrap('<span class="img_outer"></span>');
 28         if(_type=='Signature'){
 29             $(_clone).parent().css({
 30                 'position':'absolute',
 31                 'top': e.pageY,
 32                 'left': e.pageX,
 33                 'cursor':'move',
 34                 'display':'inline-block',
 35                 'border':'2px solid'
 36             }).append('<span class="iconResize" style="position:absolute;display: inline-block; 10px;height: 10px;' +
 37                 'cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;' +
 38                 'border:2px solid;border-radius:50%"></span>').attr({
 39                 'data-icon':'signature',
 40                 'data-page':config.defaultPage
 41             });
 42         }
 43         else if(_type=='PIN'){
 44             $(_clone).parent().css({
 45                 'position':'absolute',
 46                 'top': e.pageY,
 47                 'left': e.pageX,
 48                 'cursor':'move',
 49                 'display':'inline-block',
 50                 'border':'2px solid'
 51             }).attr({
 52                 'data-icon':'pin',
 53                 'data-page':config.defaultPage
 54             });
 55         }
 56     };
 57 
 58     /*构造拖拽及缩放函数*/
 59     $(document).mousemove(function(e) {
 60         if (!!this.move) {
 61             var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
 62                 callback = document.call_down || function() {
 63                         $(this.move_target).css({
 64                             'top': e.pageY - posix.y,
 65                             'left': e.pageX - posix.x
 66                         });
 67                     };
 68             callback.call(this, e, posix);
 69         }
 70     }).mouseup(function(e) {
 71         if (!!this.move) {
 72             var callback = document.call_up || function(){};
 73             callback.call(this, e);
 74             $.extend(this, {
 75                 'move': false,
 76                 'move_target': null,
 77                 'call_down': false,
 78                 'call_up': false
 79             });
 80         }
 81     });
 82 
 83     /*实例化*/
 84     $(document).on('mousedown','.img_outer',function(e){
 85         var offset=$(this).offset();
 86         this.posix={
 87             'x': e.pageX-offset.left,
 88             'y': e.pageY-offset.top
 89         };
 90         $.extend(document,{
 91             'move':true,
 92             'move_target':this
 93         });
 94     });
 95     $(document).on('mousedown','.iconResize',function(e){
 96         var that=this;
 97         var posix = {
 98             'w': $(this).parent().width(),
 99             'h': $(this).parent().height(),
100             'x': e.pageX,
101             'y': e.pageY
102         };
103         $.extend(document, {'move': true, 'call_down': function(e) {
104             $(that).parent().css({
105                 'width': Math.max(30, e.pageX - posix.x + posix.w),
106                 'height': Math.max(30, e.pageY - posix.y + posix.h)
107             });
108         }});
109         return false;
110     });
111 
112 
113     //获取选中元素
114     $(document).on('click','.img_outer',function(e){
115         $(".img_outer").removeClass("active");
116         var _active=$(this).hasClass("active");
117         if(_active){
118             $(this).removeClass("active");
119         }else{
120             $(this).addClass("active");
121         }
122     });
123 
124     /*渲染PDF*/
125    /* var _container=$(".section_main_pdf");
126     PDFJS.workerSrc='js/pdf.worker.js';
127 
128     var config={
129         //url:'txt/userAgreeDoc.pdf',//pdf路径
130         url:'txt/webpack.pdf',
131         outerHigh:_container.height(),//容器高
132         outerWid:_container.width(),//容器宽
133         defaultPage:1,//默认第一页
134         totalPage:6//总页数
135     };*/
136 
137     renderPdf();
138     /*上一页*/
139     $("input.page_pre").on('click',function(){
140         if(config.defaultPage>1){
141             --config.defaultPage;
142             $(".page_num_cur").text(config.defaultPage);
143             renderPdf();
144         }
145     });
146     /*下一页*/
147     $("input.page_next").on('click',function(){
148         if(config.defaultPage<config.totalPage){
149             ++config.defaultPage;
150             $(".page_num_cur").text(config.defaultPage);
151             renderPdf();
152         }
153     });
154     /*GO*/
155     $("input.page_go_val").on('click',function(){
156         var _val=$("input.page_val").val();
157         if(_val>0 && _val<=config.totalPage){
158             config.defaultPage=parseInt(_val);//pdf不会自动转换字符串为数字
159             console.log(config.defaultPage);
160             $(".page_num_cur").text(_val);
161             renderPdf();
162         }
163     });
164 
165     function renderPdf(){
166         var loadingTask=PDFJS.getDocument(config.url);
167         loadingTask.promise.then(
168             function getPdf(pdf){
169                 pdf.getPage(config.defaultPage).then(
170                     function getPage(page){
171                         var scale=1;
172                         var viewport=page.getViewport(scale);
173                         var canvas=document.getElementById('canvas');
174                         var context=canvas.getContext('2d');
175                         canvas.height=config.outerHigh;
176                         canvas.width=config.outerWid;
177                         var renderContext={
178                             canvasContext:context,
179                             viewport:viewport
180                         };
181                         page.render(renderContext);
182                     },
183                     function pageError(msg){
184                         console.log(msg);
185                     }
186                 )
187             },
188             function pdfError(msg){
189                 alert(msg);
190             }
191         );
192 
193         //对不在当前页面的签名进行隐藏或显示
194         var lists=$(".section_main_pdf .img_outer");
195         for(var i=0;i<lists.length;i++){
196             if(lists.eq(i).data('page')==config.defaultPage){
197                 lists.eq(i).css({
198                     'visibility':'visible'
199                 });
200             }else{
201                 lists.eq(i).css({
202                     'visibility':'hidden'
203                 });
204             }
205         }
206     }
207 });
208 
209 //选择头像
210 $(document).on('change','#selectUser',function(e){
211     //通过字符串拼接选中值来实现切换图片
212     var _val=$(this).find('option:selected').val();
213     var _imgVal=$(".img_outer.active");
214     if(_val=='spouse'){
215         _imgVal.find('img').attr({
216             'src':'images/pin.png'
217         });
218         _imgVal.attr('data-id',_val);
219     }
220  });
221 
222 //保存信息
223 $(document).on('click','#saveMsg',function(e){
224     /*获取canvas左下角位置*/
225     var canvasHigh=$("#canvas").height();//pdf高
226     var canvasWid=$("#canvas").width();//pdf宽
227     //console.log('canvasHigh:'+canvasHigh);
228     var canvasPosTop=$("#canvas").offset().top;//pdf距离顶部
229     var canvasPosBottom=$("#canvas").offset().top+canvasHigh;//pdf底部距离顶部
230     var canvasPosLeft=$("#canvas").offset().left;//pdf距离左边
231     var canvasPosRight=canvasPosLeft+canvasWid;//pdf右边距离左边
232     //console.log('canvasPosTop:'+canvasPosTop+';canvasPosLeft:'+canvasPosLeft);
233 
234     /*遍历获取每个签名的位置*/
235     var obj=new Array();
236     var lists=$(".section_main_pdf .img_outer");
237     for(var i=0;i<lists.length;i++){
238         var _left=parseInt(lists.eq(i).css('left'));
239         if(_left<canvasPosLeft || _left> canvasPosRight){
240             alert('请在文件中签名');
241             return;
242         }
243         var _top=parseInt(lists.eq(i).css('top'));
244         if(_top<canvasPosTop || _top>canvasPosBottom){
245             alert('请在文件中签名');
246             return;
247         }
248         var arr={
249             type:lists.eq(i).data('icon'),//签名类型
250             wid:lists.eq(i).width(),//签名的宽
251             high:lists.eq(i).height(),//签名的高
252             id:lists.eq(i).data('id'),//用户id
253             x:_left-canvasPosLeft,//距离pdf左下角的x,
254             y:Math.abs(_top+lists.eq(i).height()-canvasPosBottom),//距离pdf左下角的y,
255             page:lists.eq(i).data('page'),//签名所在页
256         };
257         obj.push(arr);
258     }
259     console.log('obj:'+JSON.stringify(obj));
260     //下一步：异步提交
261 });

2.签名html文件

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>签名</title>
  6     <link rel="stylesheet" href="css/reset.css">
  7     <link rel="stylesheet" href="css/signature.css">
  8 </head>
  9 <body>
 10 <div class="container">
 11     <div class="header">
 12         <div class="header_inner clearfix">
 13             <div class="header_left">
 14                 <span class="header_left_name">webpack中文指南.pdf</span>
 15             </div>
 16             <div class="header_right">
 17                 <input id="saveMsg" type="button" value="Save" class="header_right_save">
 18             </div>
 19         </div>
 20     </div>
 21     <div class="section clearfix">
 22         <div class="section_left">
 23             <h3 class="left_title">Select and Drag Icon</h3>
 24             <ul class="left_list">
 25                 <li draggable="true">
 26                     <span class="img_outer">
 27                         <img src="images/signature.png">
 28                     </span>
 29                     <span class="list_name">
 30                         Signature
 31                     </span>
 32                 </li>
 33                 <li draggable="true">
 34                     <span class="img_outer">
 35                         <img src="images/pin.png">
 36                     </span>
 37                     <span class="list_name">
 38                         PIN
 39                     </span>
 40                 </li>
 41             </ul>
 42         </div>
 43         <div class="section_main">
 44             <div class="section_main_pdf">
 45                <canvas id="canvas"></canvas>
 46             </div>
 47             <div class="section_main_page">
 48                 <div class="page clearfix">
 49                     <div class="page_detail">
 50                         <input type="button" value="<" class="page_pre">
 51                         <span class="page_num">
 52                             <span class="page_num_cur">1</span>
 53                             /
 54                             <span class="total_page">29</span>
 55                         </span>
 56                         <input type="button" value=">" class="page_next active">
 57                     </div>
 58                     <div class="page_go">
 59                         <span class="page_go_page">Page</span>
 60                         <input type="text" class="page_val">
 61                         <input type="button" value="GO" class="page_go_val"/>
 62                     </div>
 63                 </div>
 64             </div>
 65         </div>
 66         <div class="section_right">
 67             <h3 class="right_title">Select the Signature</h3>
 68             <div class="right_select">
 69                 <select id="selectUser">
 70                     <option>Please Select</option>
 71                     <option value="spouse">Spouse</option>
 72                 </select>
 73             </div>
 74         </div>
 75     </div>
 76 </div>
 77 
 78 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
 79 <!--API解析-->
 80 <script src="js/pdf.js"></script>
 81 <!--核心解析-->
 82 <!--<script src="js/pdf.worker.js"></script>-->
 83 <script src="js/signature.js"></script>
 84 <script>
 85     /*渲染PDF*/
 86     var _container=$(".section_main_pdf");
 87     PDFJS.workerSrc='js/pdf.worker.js';
 88 
 89     var config={
 90         //url:'txt/userAgreeDoc.pdf',//pdf路径
 91         url:'txt/webpack.pdf',
 92         outerHigh:_container.height(),//容器高
 93         outerWid:_container.width(),//容器宽
 94         defaultPage:1,//默认第一页
 95         totalPage:29//总页数
 96     };
 97 </script>
 98 <script src="js/responseData.js"></script>
 99 <script>
100 </script>
101 </body>
102 </html>

html

3.签名已存在时的反显

备注：之前上传的版本后来发现了位置反显有误，调整了.img_outer的top位置：

top:'+(this.canvasBottom-resData[i].y-resData[i].high)+'px;
(修改时间：17/06/30)

 1 /**
 2  * Created by aaron on 2017/6/16.
 3  */
 4 
 5 //var data=[{"type":"pin","wid":44,"high":44,"x":332,"y":379,"page":1},{"type":"signature","wid":44,"high":44,"x":187,"y":608,"page":1}];
 6 
 7 (function($,window,undefined){
 8     var resData={
 9         canvasLeft:$(".section_main_pdf").offset().left,
10         canvasBottom:$(".section_main_pdf").height()+$(".section_main_pdf").offset().top,
11         init:function(){
12             this.getData();
13         },
14         getData:function(){
15             var that=this;
16             $.ajax({
17                 url:'./data/signature.json',
18                 type:'post',
19                 dataType:'json',
20                 async:false,
21                 success:function(data){
22                     console.log(data);
23                     if(data.isSuccess){
24                         that.resolveData(data.dataList);
25                     }
26                 }
27             })
28         },
29         resolveData:function(data){
30             console.log(this);
31             console.log(JSON.stringify(data));
32             var html='';
33             var resData=data;
34             console.log('resData:'+resData.length);
35             for(var i=0;i<resData.length;i++){
36                 html+='<span class="img_outer" data-icon="'+resData[i].type+'" data-page="'+resData[i].page+'" ' +
37                     'style="position:absolute;cursor:move;display:inline-block;border:2px solid;top:'+(resData[i].y+this.canvasBottom-resData[i].high)+'px;' +
38                     'left:'+(resData[i].x+this.canvasLeft)+'px;'+(resData[i].wid+4)+'px;height:'+(resData[i].high+4)+'px;">' ;
39                 if(resData[i].type=='signature'){
40                     html+='<img src="" class="dragIcon" style=" 100%;height: 100%"/>'+
41                             '<span class="iconResize" style="display: inline-block;10px;position:absolute;' +
42                         'height:10px;cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;border:2px solid ;border-radius:50%"></span>';
43                 }else{
44                     html+='<img src="" class="dragIcon" style=" 100%;height: 100%"/>';
45                 }
46                 html+='</span>';
47             }
48             $(".section_main_pdf").append(html);
49         }
50     };
51     resData.init();
52 })(jQuery,window,undefined);

setData

4.样式css

 1 /*CSS RESET*/
 2 @charset "utf-8";
 3 html, body, div, span,
 4 h1, h2, h3, h4, h5, h6, p,
 5 img, small, strong,
 6 b, i,
 7 dl, dt, dd, ol, ul, li,
 8 fieldset, form, label, legend,
 9 table, caption, tbody, tfoot, thead, tr, th, td,
10 article, aside, canvas, details, figcaption, figure,
11 footer, header, menu, nav, section, summary,
12 time, mark, audio, video {
13     margin:0;
14     padding:0;
15     border:0;
16     outline:0;
17     font-size:100%;
18     vertical-align:baseline;
19     background:transparent;
20 }
21 /*重置界面字体字号色号*/
22 body {
23     font-family:'Microsoft YaHei',"Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
24     font-size:16px;
25     color:#000000;
26     min-width:1200px;
27 }
28 dl li,ul li{
29     list-style-type: none;
30 }
31 a {
32     margin:0;
33     padding:0;
34     font-size:100%;
35     text-decoration: none;
36     vertical-align:baseline;
37     background:transparent;
38 }
39 table {
40     border-collapse:collapse;
41     border-spacing:0;
42 }
43 i,b{
44     font-style: normal;
45     font-weight: normal;
46 }
47 img{
48     border:0;
49     vertical-align: middle;
50 }
51 *{
52     box-sizing: border-box;
53 }
54 /*清除浮动*/
55 .clearfix:after{
56     content:'';
57     display:block;
58     height:0;
59     visibility:hidden;
60     clear:both;
61 }
62 .clearfix{
63     zoom:1;
64 }
65 
66 /*重置input/select样式*/
67 input,select{
68     -webkit-appearance: none;
69     -moz-appearance: none;
70     appearance: none;
71 }
72 
73 ::-webkit-input-placeholder {
74     color: #d2d2d2; }
75 :-moz-placeholder {
76     color: #d2d2d2; }
77 ::-moz-placeholder {
78     color: #d2d2d2; }
79 :-ms-input-placeholder {
80     color: #d2d2d2; }
81 input:focus::-webkit-input-placeholder{ color:#d2d2d2;}

reset

  1 @charset "utf-8";
  2 body{
  3     background-color: #e2e2ee;
  4 }
  5 .header{
  6     width: 100%;
  7     background-color:#3d62ad;
  8 }
  9 .header .header_inner,.section{
 10     width: 1200px;
 11     margin:0 auto;
 12 }
 13 .header .header_inner{
 14     line-height: 60px;
 15 }
 16 .header .header_left{
 17     float: left;
 18 }
 19 .header .header_left_name{
 20     font-size: 18px;
 21     color:#ffffff;
 22 }
 23 .header .header_right{
 24     float: right;
 25 }
 26 .header input.header_right_save{
 27     font-size: 16px;
 28     width: 140px;
 29     height: 34px;
 30     line-height: 34px;
 31     background-color: #ffffff;
 32     color:#3d62ad;
 33     border: 0;
 34     -webkit-border-radius: 4px;
 35     -moz-border-radius: 4px;
 36     border-radius: 4px;
 37     cursor: pointer;
 38 }
 39 
 40 .section .section_left{
 41     float: left;
 42     width: 230px;
 43     background-color: #ffffff;
 44     margin-right: 20px;
 45     min-height: 840px;
 46 }
 47 .section .section_main{
 48     float: left;
 49     width: 700px;
 50     background-color: #ffffff;
 51     min-height: 840px;
 52 }
 53 .section .section_right{
 54     float: right;
 55     width: 230px;
 56     background-color: #ffffff;
 57     min-height: 840px;
 58 }
 59 
 60 .section h3.left_title,
 61 .section h3.right_title{
 62     line-height: 55px;
 63     text-align: center;
 64 }
 65 /*实现可拖拽*/
 66 .section ul.left_list li{
 67     display: inline-block;
 68     width: 230px;
 69     height: 45px;
 70     line-height: 45px;
 71     padding-left: 25px;
 72     margin:10px 0;
 73     color:#3d62ad;
 74     cursor: move;
 75 }
 76 .section span.list_name{
 77     margin-left:15px;
 78 }
 79 .section ul.left_list li:first-child{
 80     margin-top:0;
 81 }
 82 
 83 .section_main .section_main_pdf{
 84     width: 550px;
 85     height: 755px;
 86     margin: 15px auto;
 87     box-shadow: 0 1px 3px 0 rgba(0,0,0,0.30);
 88 }
 89 .section_main .page{
 90     width: 310px;
 91     height: 45px;
 92     line-height: 45px;
 93     margin: 0 auto;
 94 }
 95 .section_main .page_detail{
 96     float: left;
 97 }
 98 .section_main .page_go{
 99     float: right;
100 }
101 .section_main input.page_pre,
102 .section_main input.page_next{
103     width: 22px;
104     height: 22px;
105     line-height: 22px;
106     color:#a7a7a7;
107     background-color:#e9edf5;
108     border:0;
109     cursor: pointer;
110 }
111 .section_main input.page_pre.active,
112 .section_main input.page_next.active{
113     color:#3d62ad;
114 }
115 .section_main span.page_num{
116     padding:0 10px;
117 }
118 .section_main span.page_num_cur{
119     color:#3d62ad;
120 }
121 
122 .section_main input.page_val{
123     width: 35px;
124     height: 20px;
125     line-height: 20px;
126     margin:0 2px 0 10px;
127     text-align: center;
128     border:1px solid #3d62ad;
129 }
130 .section_main input.page_go_val{
131     font-weight: 800;
132     color:#3d62ad;
133     background-color: transparent;
134     border: 0;
135     font-size: 16px;
136     cursor: pointer;
137 }
138 input:focus{
139     outline: none;
140 }
141 
142 .section_right{
143     text-align: center;
144 }
145 .section_right .right_select{
146     width: 185px;
147     height: 29px;
148     line-height: 29px;
149     margin: 0 auto;
150     position: relative;
151 }
152 .section_right .right_select:after{
153     position: absolute;
154     content: '';
155     right: 1px;
156     top: 1px;
157     display: inline-block;
158     width: 34px;
159     height: 27px;
160     background:url("../images/arrow_bottom.png") no-repeat center;
161     color:#ffffff;
162     z-index: 0;
163 }
164 .section_right .right_select select{
165     width: 185px;
166     height: 29px;
167     padding:0 34px 0 15px ;
168     border:1px solid #6b6e82;
169     outline: none;
170     background-color: transparent;
171     position: absolute;
172     left: 0;
173     top: 0;
174     z-index: 1;
175 }
176 
177 .img_outer.active{
178     border-color:#3d62ad !important;
179 }

css

5.文件结构

相关阅读:
一个很简单的脑筋急转弯问题
 DataGrid PCV排序学习
 VS2010 出现打开关联文档错误的解决方案
 JS 简繁体互转代码
 js 常用正则表达式表单验证代码
 【转】自然语言处理（NLP）网上资源整理
 声卡编程讲解
 视频会议1
转语音处理资源
 编译WebRTC
原文地址：https://www.cnblogs.com/aaron-pan/p/7052992.html

H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

前言：

功能一：实现拖拽

功能二：构造拖拽及缩放函数

功能三：pdf展示

汇总：

H5拖拽构造拖拽及缩放 pdf文件转换为html预览