你的位置:首页 > 软件开发 > Java > H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

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

发布时间:2017-06-21 00:00:48
前言:协助项目需要实现一个签名的功能。功能说明:1.有文本签名和头像签名。2.头像签名需要实现可拖拽功能。3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置。功能一:实现拖拽思路:H5拖拽及构造函数实现拖拽及缩放要点:1.需要设置拖拽元素属性     drag ...

前言:

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

功能说明: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 ></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 color: #008080;">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.defaultPage39       });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.defaultPage52       });53     }54   };

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

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。