JavaScript: 让拖动支持iphone/ipad触摸

最新推荐文章于 2023-11-20 09:23:15 发布

huithe

最新推荐文章于 2023-11-20 09:23:15 发布

阅读量1.4k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>ios拖动</title>
	<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, table, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
		#wrap{
			width:640px;
			height:640px;
			margin:0 auto;
			position:relative;
			text-align:center;
		}
		#wrap img{
			margin-top:245px;
		}
		h3{
			text-align:center;
			margin:50px 0;
		}
		#div1,#div2,#div3,#div4{
			position:absolute;
			border:1px dashed #000;
			width:100px;
			height:100px;
		}
		#div1{
			top:0;
			left:0;
		}
		#div2{
			top:0;
			right:0;
		}
		#div3{
			bottom:0;
			left:0;
		}
		#div4{
			bottom:0;
			right:0;
		}
	</style>
</head>
<body>
<h3>点按下方头像拖动,使四角的方框变红</h3>
<div id="wrap"><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div>
	<img id="dragElement" src="img.jpg" alt="" />
</div>

<script type="text/javascript">

var getDragClass=(function(){
var SupportsTouches = ("createTouch" in document),//判断是否支持触摸
	StartEvent = SupportsTouches ? "touchstart" : "mousedown",//支持触摸式使用相应的事件替代
	MoveEvent = SupportsTouches ? "touchmove" : "mousemove",
	EndEvent = SupportsTouches ? "touchend" : "mouseup",
	$=function(id){
		return document.getElementById(id);
	},
	preventDefault=function(ev){
		if(ev)ev.preventDefault();
		else window.event.returnValue = false;
	},
	getMousePoint=function(ev){
		var x = y = 0,
			doc = document.documentElement,
			body = document.body;
			if(!ev) ev=window.event;
			if (window.pageYoffset) {
				x = window.pageXOffset;
				y = window.pageYOffset;
			}else{
				x = (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
				y = (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
			}
			if(SupportsTouches){
				var evt = ev.touches.item(0);//仅支持单点触摸,第一个触摸点
				x=evt.pageX;
				y=evt.pageY;
			}else{
				x += ev.clientX;
				y += ev.clientY;
			}
			return {'x' : x, 'y' : y};
	};
	function _drag(opt){
		this.el=typeof opt.el=='string'?$(opt.el):opt.el;//被拖动节点
		this.onstart=opt.start || new Function();//
		this.onmove=opt.move || new Function();
		this.οnend=opt.end || new Function();
		this.action=false;
		this.init();
	}
	_drag.prototype={
		init:function(){
			this.el.style.position='relative';
			this.el['on'+StartEvent]=this.bind(function(e){//绑定节点的 [鼠标按下/触摸开始] 事件
				preventDefault(e);
				if(this.action)return false;
				else this.action=true;
				this.startPoint=getMousePoint(e);
				this.onstart();
				document['on'+MoveEvent]=this.bind(function(e){
					preventDefault(e);//取消文档的默认行为[鼠标移动、触摸移动]
					this.nowPoint=getMousePoint(e);
					this.el.style.left=this.nowPoint.x-this.startPoint.x+'px';
					this.el.style.top=this.nowPoint.y-this.startPoint.y+'px';
					this.onmove();
				},this);
				document['on'+EndEvent]=document['ontouchcancel']=this.bind(function(){
					document['on'+EndEvent]=document['ontouchcancel']=document['on'+MoveEvent]=null;
					this.action=false;
					this.onend();
				},this);
			},this);
		},
		bind:function(fn,obj){
			return function(){
				fn.apply(obj,arguments);
			}
		},
		tool:null
	}
	return function(opt){
		return new _drag(opt);
	}
})();
var a=getDragClass({
	el:'dragElement',
	move:function(){
		var subx=this.nowPoint.x-this.startPoint.x,
			suby=this.nowPoint.y-this.startPoint.y,
			id='div';
		if(subx<-245 && subx>-295 && suby<-195 && suby>-245){
			id+=1;
		}else if(subx<-245 && subx>-295 && suby>295 && suby<345){
			id+=3;
		}else if(subx>245 && subx<295 && suby<-195 && suby>-245){
			id+=2;
		}else if(subx>245 && subx<295 && suby>295 && suby<345){
			id+=4;
		}else return;
		id=document.getElementById(id);
		id.style.border='1px solid #000';
		id.style.background='red';
	},
	end:function(){
		this.el.style.left='0';
		this.el.style.top='0';
	}
});
</script>
</body>
</html>

huithe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript: 让拖动支持iphone/ipad触摸

ios拖动 html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, str
复制链接

扫一扫

专栏目录