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

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

在线演示地址如下：

http://demo.jb51.net/js/2015/js-zdy-web-drug-pic-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题自写的拖动类……/title脚本类型=' text/JavaScript ' var d=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。单独的通风口？这个。discoverevent(' on ' e，f): this。removeeventlistener(e，f，b)；}函数$(){//接收一个编号参数，返回带有开始拖动方法的对象var o=document.getElementById(参数[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。单独的通风口？这个。discoverevent(' on ' e，f): this。removeeventlistener(e，f，b)；} o.startDrag=function(obj){//参数目标文件默认为o本身，可以传其它参数以确定要移动的对象var obj=obj？obj:ovar sx，sy；o .风格。光标='移动'；o.addListener('mousedown '，函数(e){ e | |事件；if(e . button==1 | | e . button==0){ sx=e . client x-obj。offsetleftsy=e . clienty-obj。偏移；d.addListener('mousemove '，move，false)；d.addListener('mouseup '，stopDrag，false)；} }，false)；var stop drag=function(){ d . remove listener('鼠标移动'，移动，false)；d.removeListener('mouseup '，stopDrag，false)；} var move=function(e){ e | | event；window.getSelection？window.getSelection().removeAllRanges():文档。选择。empty()；if(e . prevent default)e . prevent default()；//这两句便是解决火狐浏览器拖动问题的用(obj)。style){ position=' absolute ' left=e . client x-sx ' px '；top=e . Clienty-sy ' px '；} } }返回o；}窗口。onload=function(){ $(“ok”).startDragd($("OS"))}//本例中拖动好的元素，移动其父元素/script style type=' text/CSS ' * { margin :0；padd :0 } # ok { width :215 px；高度：170 px背景： URL(图片/示例1。gif)} # OS { width :400 px；高度：300 px背景# 09 fleet :300 px } # os2 { width :400 px；高度：300 px背景技术# f90 }/style/head dydiv id=' OS ' p id=' ok '/p/div div id=' os2 '/div/body/html希望本文所述对大家Java脚本语言程序设计有所帮助。