<!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‘);
};
return false;
};
};
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;
return false;
};
</script>
</html>
原文地址：https://www.cnblogs.com/loewe0202/p/8667387.html
时间： 2024-07-30 15:28:07