ios android 电脑端拖动
最近要做个一个手机端的拖动效果，在网上找到一个例子，最后自己改造了一下。实现了，兼容ios android 和电脑端的 拖动效果。 小记一下
主要知识点
1：与mousedown、mousemove、mouseup对应的触摸事件分别是touchstart、touchmove、touchend。
2：js 的 apply方法
apply() 方法有两个参数，用作 this 的对象和要传递给函数的参数的数组。例如：
function sayColor(sPrefix,sSuffix) {
alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));
这个例子与前面的例子相同，只是现在调用的是 apply() 方法。调用 apply() 方法时，第一个参数仍是 obj，说明应该赋予 sayColor() 函数中的 this 关键字值是 obj。第二个参数是由两个字符串构成的数组，与 sayColor() 函数中的参数 sPrefix 和 sSuffix 匹配，最后生成的消息仍是 "The color is blue, a very nice color indeed."，将被显示出来。
该方法也用于替换前三行的赋值、调用和删除新方法的代码：
function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.apply(this, new Array(sColor));
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}同样的，第一个参数仍是 this，第二个参数是只有一个值 color 的数组。可以把 ClassB 的整个 arguments 对象作为第二个参数传递给 apply() 方法：
function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.apply(this, arguments);
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}明白了 这两个下面就直接看代码就行了
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="./jquery.js"></script>
<title>ios android 拖动</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:240px;
height:380px;
margin:0 auto;
text-align:center;
}
h3{
text-align:center;
margin:50px 0;
}
#div1,#div2,#div3,#div4{
position:absolute;
border:1px dashed #000;
width:100px;
height:100px;
}
#div1{
top:122px;
left:554px;
}
#div2{
top:122px;
left:691px;
}
#div3{
top:399px;
left:554px;
}
#div4{
top:399px;
left:691px;
}
</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="./14_wqx.png" alt="" />
</div>
<div id="mousexy">鼠标：x:0, y:0</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 = 0;
y = 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.onend=opt.end || new Function();
this.action=false;
this.init();
}
_drag.prototype={
init:function(){
this.el.style.position='absolute';
this.el.style.left='625px';
this.el.style.top='260px';
this.el['on'+StartEvent]=this.bind(function(e){//绑定节点的 [鼠标按下/触摸开始] 事件 e 是传进来的点击事件
preventDefault(e);
if(this.action)return false;
else this.action=true;
this.onstart();
document['on'+MoveEvent]=this.bind(function(e){
preventDefault(e);//取消文档的默认行为[鼠标移动、触摸移动]
this.nowPoint=getMousePoint(e);
this.el.style.left=this.nowPoint.x - 50 +'px';
this.el.style.top=this.nowPoint.y - 50 +'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);
}
})();
getDragClass({
el:'dragElement',
end:function(){
var change = function(id, img, x, y) {
id=document.getElementById(id);
id.style.border='1px solid #000';
id.style.background = 'red';
img.style.left=x+'px';
img.style.top=y+'px';
}
var subx=this.nowPoint.x,
suby=this.nowPoint.y,
id = 'div';
if(subx>547 && subx<654 && suby>130 && suby<248) {
id+=1;
change(id,document.getElementById('dragElement'), '547', '130');
}else if(subx<788 && subx>690 && suby>130 && suby<248) {
id+=2;
change(id,document.getElementById('dragElement'), '690', '130');
}else if(subx>547 && subx<654 && suby>375 && suby<516) {
id+=3;
change(id,document.getElementById('dragElement'), '547', '400');
}else if(subx<788 && subx>690 && suby>375 && suby<516) {
id+=4;
change(id,document.getElementById('dragElement'), '690', '400');
}
}
});
// 监听鼠标的移动事件
document.addEventListener('mousemove',function() {
mouse = document.getElementById('mousexy');
mouse.innerHTML = 'x:' + event.clientX + ', y:' + event.clientY;
},false);
</script></body></html>
摘自：http://www.qiqiboy.com/2011/07/16/javascript-touch-drag-support.html
