前言:协助项目需要实现一个签名的功能。功能说明: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
(#换成@)。