您的位置：首页 > 移动开发

pc和移动端的js拖拽简易函数（不含html5原生拖拽）

2015-11-27 13:48 639 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title></title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>

<div id="c" style="margin:100px;border:2px solid #f00;position:relative;width:800px;height:600px;">
<div id="a" style="border:1px solid #000; height:200px;width:300px;position:absolute;left:0;top:0;">
<p id="b" style="background:#ccc;height:20px;line-height:20px;">a</p>
b
</div>
</div>
<div style="height:1500px;"></div>

<script>

function zjfDrag(bar,target){
/*
* zjfDrag(鼠标/手指操作处，作用目标)
* zjfDrag(鼠标/手指操作处，作用目标，移动范围容器)
* zjfDrag(鼠标/手指操作处，作用目标，回调函数)
* zjfDrag(鼠标/手指操作处，作用目标，移动范围容器，回调函数)
* */
bar=zjfDrag.tools.getEle(bar), target=zjfDrag.tools.getEle(target);
var container, callback;
if(arguments.length===3){
var arg3=arguments[2];
typeof arg3==='function'?(callback=arg3):(container=arg3);
}else if(arguments.length===4) container=arguments[2], callback=arguments[3];
var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false };
var _left=zjfDrag.tools.getCss(target, 'left'), _top=zjfDrag.tools.getCss(target, 'top');
_left !== 'auto' && (params.left = _left);
_top !== 'auto' && (params.top = _top);

var iftouch='ontouchstart' in document, events={ start:'mousedown', ing:'mousemove', end:'mouseup' };
iftouch && (events={ start:'touchstart', ing:'touchmove', end:'touchend' });

var _ll,_tt;
if(container){
container=zjfDrag.tools.getEle(container),
_ll=container.clientWidth-target.offsetWidth,
_tt=container.clientHeight-target.offsetHeight;
}

var start=function(event){
params.flag = true;
if(!event){
event = window.event;
bar.onselectstart = function(){ return false; };
}
event.preventDefault();
var e = iftouch? event.touches[0] : event;
params.currentX = e.clientX;
params.currentY = e.clientY;
},
end=function(){
params.flag = false;
var left=zjfDrag.tools.getCss(target, 'left'), top=zjfDrag.tools.getCss(target, 'top');
left !== 'auto' && (params.left = left);
top !== 'auto' && (params.top = top);
},
ing=function(event){
event= event||window.event;
event.preventDefault();
var e = iftouch? event.touches[0] : event;
if(params.flag){
var disX = e.clientX - params.current
bbe5
X, disY = e.clientY - params.currentY;
var nowLeft=parseInt(params.left) + disX, nowTop=parseInt(params.top) + disY;
if(container){
nowLeft<0 && (nowLeft=0);
nowTop<0 && (nowTop=0);
nowLeft>_ll && (nowLeft=_ll);
nowTop>_tt && (nowTop=_tt);
}
target.style.left = nowLeft + 'px';
target.style.top =  nowTop+ 'px';
callback && callback(disX, disY, nowLeft, nowTop);
}
},
on=function(){
bar.addEventListener(events.start,start,false),
document.addEventListener(events.ing,ing,false),
document.addEventListener(events.end,end,false),
bar.style.cursor='move', bar.style.MozUserSelect='none', bar.style.WebkitUserSelect='none', bar.style.OUserSelect='none', bar.style.userSelect='none';
return returnO;
},
off=function(){
bar.removeEventListener(events.start,start,false),
document.removeEventListener(events.ing,ing,false),
document.removeEventListener(events.end,end,false),
bar.style.cursor='', bar.style.MozUserSelect='', bar.style.WebkitUserSelect='', bar.style.OUserSelect='', bar.style.userSelect='';
return returnO;
},
returnO= { on:on, off:off };
returnO.on();
return returnO;
}
zjfDrag.tools={
getCss:function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; },
getEle:function(arg){ return typeof arg==='string'?document.getElementById(arg):arg; }
};

//zjfDrag('b','a');
zjfDrag(document.getElementById('b'),'a','c',function(disx,disy,left,top){
console.log(disx,disy,left,top);
});

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航