此种技术一般使用在大型的UI系统开发中: 主要用于核心开发者了为了让 各类普通开发人员能方便调用自己的方法(事件).. 下面是相关示例: 核心开发者,负责拖动事件的JS书写.. 普通开发人员或者美工,只需制作HTML排版…并加上 核心开发者定义的自定义属性后,就能实现拖动. 微软IE中的document.attachEvent为我们提供了良好的自定义事件能力.. 本实例中的自定义属性为:eDrag 通过自定义属性来激活自定义事件..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| var __DragId, __eDragSrc, __DragTop, __DragLeft;
function __OnDrag(){
var _element = event.srcElement;
if(_element.eDrag){
if(event.type=="mousedown"){
if(_element.eDragSrc){
__eDragSrc = document.getElementById(_element.eDragSrc);
__eDragSrc.style.display = "block";
}
document.body.style.cursor = "default";
__DragId = document.getElementById(_element.eDrag);
__DragLeft = parseInt(__DragId.offsetWidth)-(parseInt(__DragId.offsetWidth)-(event.x-parseInt(__DragId.offsetLeft)));
__DragTop = parseInt(__DragId.offsetHeight)-(parseInt(__DragId.offsetHeight)-(event.y-parseInt(__DragId.offsetTop)));
}
if(event.type=="mouseup"){
if(__DragId){
__DragId = null;
}
if(__eDragSrc){
__eDragSrc.style.display = "none";
__eDragSrc = null;
}
}
}
if(event.type=="mousemove"){
if(__DragId){
__DragId.style.top = event.y - __DragTop;
__DragId.style.left = event.x - __DragLeft;
__DragId.style.margin = "auto";
}
}
}
document.attachEvent("onmousedown", __OnDrag);
document.attachEvent("onmousemove", __OnDrag);
document.attachEvent("onmouseup", __OnDrag);
|