拖拽元素自定义html模板,JS实现的自定义网页拖动类

本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考，具体如下：

先来看运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

自写的拖动类……

var d=document;//给document对象一个通用的事件侦听方法

d.addListener=function(e,f,b){

this.attachEvent?this.attachEvent('on'+e,f):this.addEventListener(e,f,b);

}

d.removeListener=function(e,f,b){

this.detachEvent?this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);

}

function $(){//接收一个id参数，返回带有startDrag方法的对象

var o=document.getElementById(arguments[0]);

o.addListener=function(e,f,b){

this.attachEvent?this.attachEvent('on'+e,f):this.addEventListener(e,f,b);

}

o.removeListener=function(e,f,b){

this.detachEvent?this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);

}

o.startDrag=function(obj){//参数obj默认为o本身，可以传其它参数以确定要移动的对象

var obj=obj?obj:o;

var sx,sy;

o.style.cursor="move";

o.addListener("mousedown",function(e){

e||event;

if(e.button==1||e.button==0){

sx=e.clientX-obj.offsetLeft;sy=e.clientY-obj.offsetTop;

d.addListener("mousemove",move,false);

d.addListener("mouseup",stopDrag,false);

}

},false);

var stopDrag=function(){

d.removeListener("mousemove",move,false);

d.removeListener("mouseup",stopDrag,false);

}

var move=function(e){

e||event;

window.getSelection ? window.getSelection().removeAllRanges() :

document.selection.empty();

if(e.preventDefault)e.preventDefault();//这两句便是解决firefox拖动问题的.

with (obj.style){

position="absolute"

left=e.clientX-sx+"px";

top=e.clientY-sy+"px";

}

}

}

return o;

}

window.οnlοad=function(){$("ok").startDrag($("os"))}//本例中拖动ok元素，移动其父元素

*{margin:0;padding:0}

#ok{width:215px;height:170px;background:url(images/sample1.gif)}

#os{width:400px;height:300px;background:#09f;left:300px}

#os2{width:400px;height:300px;background:#f90;}

希望本文所述对大家JavaScript程序设计有所帮助。