自定义事件拖拽组件
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义事件拖拽组件</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
}
#div2 {
width:100px;
height:100px;
background:yellow;
position:absolute;
left:100px;
}
#div3 {
width:100px;
height:100px;
background:blue;
position:absolute;
left:200px;
}
#div4{
width:100px;
height:100px;
background:green;
position:absolute;
left:300px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
<script>
//组件开发 : 多组对象，像兄弟之间的关系( 代码复用的一种形式 )
window.onload =function(){
var d1 =new Drag();
d1.init({ //配置参数
id: 'div1'
});
var d2 =new Drag();
d2.init({ //配置参数
id: 'div2'
});
bindEvent(d2, 'toDown', function(){
document.title ='hello';
});
bindEvent(d2, 'toDown', function(){
document.body.style.background ='black';
});
var d3 =new Drag();
d3.init({ //配置参数
id: 'div3'
});
bindEvent(d3, 'toDown', function(){
document.title ='toDown';
});
bindEvent(d3, 'toMove', function(){
document.title ='toMove';
});
bindEvent(d3, 'toUp', function(){
document.title ='toUp';
});
var d4 =new Drag();
d4.init({ //配置参数
id: 'div4'
});
bindEvent(d4, 'toUp', function(){
document.title ='byebye';
});
};
function Drag(){
this.obj =null;
this.disX =0;
this.disY =0;
this.settings = { //默认参数
};
};
Drag.prototype.init =function(opt){
var This =this;
this.obj = document.getElementById(opt.id);
extend( this.settings, opt);
this.obj.onmousedown =function(ev) {
var ev = ev || window.event;
This.fnDown(ev);
fireEvent(This , 'toDown');
document.onmousemove =function(ev) {
var ev = ev || window.event;
This.fnMove(ev);
fireEvent(This, "toMove");
};
document.onmouseup =function(ev) {
var ev = ev || window.event;
This.fnUp();
fireEvent(This, 'toUp');
};
returnfalse;
};
};
Drag.prototype.fnDown =function(ev){
this.disX = ev.clientX -this.obj.offsetLeft;
this.disY = ev.clientY -this.obj.offsetTop;
};
Drag.prototype.fnMove =function(ev){
this.obj.style.left = ev.clientX -this.disX +'px';
this.obj.style.top = ev.clientY -this.disY +'px';
};
Drag.prototype.fnUp =function(){
document.onmousemove =null;
document.onmouseup =null;
};
function bindEvent(obj, events, fn){
obj.listeners = obj.listeners || {};
obj.listeners[events] = obj.listeners[events] || [];
obj.listeners[events].push(fn);
if(obj.nodeType){
if(obj.addEventListener){
obj.addEventListener(events, fn, false);
}
else{
obj.attachEvent('on'+ events, fn);
}
}
};
function fireEvent(obj,events){ //主动触发自定义事件
if(obj.listeners && obj.listeners[events]){
for(var i in obj.listeners[events]){
obj.listeners[events][i]();
}
}
};
function extend(child, partent) {
var child = child || {};
for(var i in partent) {
if(typeof partent[i] ==="object") {
child[i] = (partent[i].constructor == Array) ? [] : {};
extend(child[i], partent[i]);
}else {
child[i] = partent[i];
}
}
};
/*---------------------------
功能:停止事件冒泡
---------------------------*/
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble =true;
};
//阻止浏览器的默认行为
function stopDefault(e) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue =false;
returnfalse;
};
</script>
</html>
以上是 自定义事件拖拽组件 的全部内容， 来源链接： utcz.com/z/508671.html
