这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇自己封装的一个原生 JS 拖动方法 (推荐)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
代码:
- function drag(t,p){
- var point = p || null,
- target = t || null,
- resultX = 0,
- resultY = 0;
- (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素
- function getPos(t){
- var offsetLeft = 0,
- offsetTop = 0,
- offsetParent = t;
- while(offsetParent){
- offsetLeft+=offsetParent.offsetLeft;
- offsetTop+=offsetParent.offsetTop;
- offsetParent = offsetParent.offsetParent;
- }
- return {'top':offsetTop,'left':offsetLeft};
- }
- function core(){
- var width = document.body.clientWidth || document.documentElement.clientWidth,
- height = document.body.clientHeight || document.documentElement.clientHeight;
- maxWidth = width - target.offsetWidth,
- maxHeight = height - target.offsetHeight;
- (resultX >= maxWidth)? target.style.left = maxWidth+'px' : (resultX > 0)?target.style.left = resultX +'px': ''; //重置默认位置。
- (resultY >= maxHeight)? target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默认位置。
- point.onmousedown=function(e){
- var e = e || window.event,
- coordX = e.clientX,
- coordY = e.clientY,
- posX = getPos(target).left,
- posY = getPos(target).top;
- point.setCapture && point.setCapture(); //将Mouse事件锁定到指定元素上。
- document.onmousemove=function(e){
- var ev = e || window.event,
- moveX = ev.clientX,
- moveY = ev.clientY;
- resultX = moveX - (coordX - posX); //结果值是坐标点减去被拖动元素距离浏览器左侧的边距
- resultY = moveY - (coordY - posY);
- (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+'px' : target.style.left = maxWidth+'px') : target.style.left = '0px';
- (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+'px' : target.style.top = maxHeight+'px') : target.style.top = '0px';
- ev.stopPropagation && ev.stopPropagation();
- ev.preventDefault;
- ev.returnValue = false;
- ev.cancelBubble = true;
- };
- };
- document.onmouseup=function(){ // 解决拖动时,当鼠标指向的DOM对象非拖动点元素时,无法触发拖动点的onmousedown的BUG。
- document.onmousemove = null;
- point.releaseCapture && point.releaseCapture(); // 将Mouse事件从指定元素上移除。
- };
- point.onmouseup=function(e){
- var e = e || window.event;
- document.onmousemove = null;
- point.releaseCapture && point.releaseCapture();
- };
- }
- core();
- window.onresize = core;
- }
使用方式:
- drag(t, p)
- /*
- * 说明
- * t 表示被拖动的元素
- * p 表示拖动点
- */
- // 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素
来源: http://www.phperz.com/article/17/0518/330308.html