98 拖拽 / 憋错料

//base.js

var $=function(_this)//调用,把this传递过来

{

return new Base(_this);

};

//对象式

function Base(_this)

{

//创建一个数组来获取节点和节点的数组

this.elements=[];//私有化，不共用

if(_this!=undefined)//这里的_this是一个对象，undefined也是个对象，却别typeof放回的带单引号的 “undefined”

{

this.elements[0]=_this; //把this放到数组的第一个

}

//获取ID节点

Base.prototype.getId=function(id)

{

this.elements.push(document.getElementById(id));

return this;

};

//获取元素节点

Base.prototype.getTagName=function(tag)

{

var tags=document.getElementsByTagName(tag);

for(var i=0;i<tags.length;i++)

{

this.elements.push(tags[i]);

}

return this;

};

//class获取

Base.prototype.getClass=function(className)

{

var all=document.getElementsByTagName("*");

for(var i=0;i<all.length;i++)

{

if(all[i].className==className)

{

this.elements.push(all[i]);

}

return this;

};

//获取某个节点

Base.prototype.eq=function(num)

{

var element=this.elements[num];

this.elements=[];//清空数组

this.elements[0]=element;//重新赋值

return this;

};

//设置CSS

Base.prototype.css = function (attr, value) {

for (var i = 0; i < this.elements.length; i ++) {

if (arguments.length == 1) {

return getStyle(this.elements[i], attr);//为什么这里需要return呢

}

this.elements[i].style[attr] = value;

}

return this;

}

Base.prototype.click=function(fn)

{

for(var i=0;i<this.elements.length;i++)

{

this.elements[i].onclick=fn;

}

return this;

};

//设置innerHtml 获取innerHTML

Base.prototype.html=function(value)

{

for(var i=0;i<this.elements.length;i++)

{

if(arguments.length==0)

{

return this.elements[i].innerHTML;

}

else

{

this.elements[i].innerHTML=value;

}

return this;

};

//添加class

Base.prototype.addClass=function(className)

{

for(var i=0;i<this.elements.length;i++)

{

if(!hasClass(this.elements[i],className))//判断是否已经有这个class

{

this.elements[i].className+=‘ ‘+className;

}

return this;

};

//移出class

Base.prototype.removeClass=function(className) //调用方法$().getClass("dd").addClass("a").addClass("b").removeClass("b");

{

for(var i=0;i<this.elements.length;i++)

{

if(hasClass(this.elements[i],className))//判断是否已经有这个class

{

this.elements[i].className=this.elements[i].className.replace(new RegExp(‘(\\s|^)‘+className+‘(\\s|$)‘),‘‘);

}

return this;

};

//添加link或style的css规则,不常用

Base.prototype.addRule=function(num,selectorText,cssText,position) //调用方法， $().addRule(0,"body","background:red",0)

{

var sheet=document.styleSheets[num];

if(typeof sheet.insertRule!="undefined")//w3c

{

sheet.insertRule(selectorText+"{"+cssText+"}",position);

}

else if(typeof sheet.addRule!="undefined")//iE

{

sheet.addRule(selectorText,cssText,position);//sheet.addRule("body","background:red",)

}

};

//移除link或style的css规则,不常用

Base.prototype.addRule=function(num,index) //调用方法， $().removeRule(0);

{

var sheet=document.styleSheets[num];

if(typeof sheet.deleteRule!="undefined")//w3c

{

sheet.deleteRule(index);

}

else if(typeof sheet.removeRule!="undefined")//iE

{

sheet.removeRule(index);//sheet.addRule("body","background:red",)

}

};

//设置hover方法

Base.prototype.hover=function(over,out)

{

for(var i=0;i<this.elements.length;i++)

{

this.elements[i].onmouseover=over;

this.elements[i].onmouseout=out;

}

return this;

};

//添加show

Base.prototype.show=function()

{

for(var i=0;i<this.elements.length;i++)

{

this.elements[i].style.display="block"

}

return this;

};

//添加hide

Base.prototype.hide=function()

{

for(var i=0;i<this.elements.length;i++)

{

this.elements[i].style.display="none"

}

return this;

};

//设置物体居中

Base.prototype.center=function(width,height)

{

var top=(getInner().height-width)/2;

var left=(getInner().width-height)/2;

for(var i=0;i<this.elements.length;i++)

{

this.elements[i].style.top=top+"px";

this.elements[i].style.left=left+"px";

}

return this;

};

//触发浏览器窗口事件

Base.prototype.resize = function (fn) {

for(var i=0;i<this.elements.length;i++)

{

var element=this.elements[i];

window.onresize=function()

{

fn();

if (element.offsetLeft > getInner().width - element.offsetWidth) {

element.style.left = getInner().width - element.offsetWidth + ‘px‘;

}

if (element.offsetTop > getInner().height - element.offsetHeight) {

element.style.top = getInner().height - element.offsetHeight + ‘px‘;

}

return this;

};

//锁屏功能

Base.prototype.lock=function()

{

for(var i=0;i<this.elements.length;i++)

{

this.elements[i].style.width=getInner().width+"px";

this.elements[i].style.height=getInner().height+"px";

this.elements[i].style.display="block";

document.documentElement.style.overflow = ‘hidden‘;

console.log( this.elements[i].style.width);

}

return this;

};

Base.prototype.unlock=function()

{

for(var i=0;i<this.elements.length;i++)

{

this.elements[i].style.display="none";

document.documentElement.style.overflow = ‘auto‘;

}

return this;

};

//拖拽

Base.prototype.drag=function(){

for(var i=0;i<this.elements.length;i++)

{

this.elements[i].onmousedown=function(e)

{

preDef(e);

var e=getEvent(e);//阻止默认事件

var _this=this;

var diffX= e.clientX-_this.offsetLeft;

var diffY= e.clientY-_this.offsetTop;

if(_this.setCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件

{

_this.setCapture();

}

document.onmousemove = function (e) {

var e = getEvent(e);

var left = e.clientX - diffX;

var top = e.clientY - diffY;

if (left < 0) {

left = 0;

} else if (left > getInner().width - _this.offsetWidth) {

left = getInner().width - _this.offsetWidth;

}

if (top < 0) {

top = 0;

} else if (top > getInner().height - _this.offsetHeight) {

top = getInner().height - _this.offsetHeight;

}

_this.style.left = left + ‘px‘;

_this.style.top = top + ‘px‘;

};

document.onmouseup=function()

{

if(_this.releaseCapture)//iE鼠标拖拽出了目标节点的时候不能再获取到事件

{

_this.releaseCapture();

}

this.onmousemove=null;

this.onmouseup=null;

}

return this;

};

//demo.js

window.onload = function () {

//个人中心

$().getClass("member").hover(function(){

$(this).css("background","url(images/arrow2.png) no-repeat 55px center");

$().getClass("member_ul").show();

},function(){

$().getClass("member_ul").hide();

$(this).css("background","url(images/arrow.png) no-repeat 55px center");

});

//登陆框

var login=$().getId("login");

var sreen=$().getId("screen");

if (login.css(‘display‘) == ‘block‘) {

sreen.lock();

}

});

$().getClass("login").click(function(){

});

$().getClass("close").click(function(){

});

$().getClass("login").click(function(){

sreen.lock();

});

$().getClass("close").click(function(){

sreen.unlock();

});

//拖拽

};

//index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<div class="member">个人中心

</ul>

</div>

</div>

<div class="other">注册新用户 | 忘记密码？</div>

</div>

</body>

</html>

时间： 2024-08-26 15:21:26

98 拖拽

98 拖拽的相关文章

多方向拖拽改变元素大小

H5中的拖拽文件上传

JS—实现拖拽

qt 拖拽修改大小

qt 拖拽修改大小(二)

HTML5自学笔记[ 10 ]简单的购物车拖拽

html5之拖拽(1)

ToolStrip控件左右拖拽移动效果实现

移动端拖拽（模块化开发，触摸事件，webpack）