JS实现的简单拖拽功能示例

本文实例讲述了射流研究…实现的简单拖拽功能。分享给大家供大家参考，具体如下：

1、实例代码：

！DOCTYPE html html head meta charset=' utf-8 '/title js实现拖拽/title style # water { width :400 px；高度：188像素背景-color : # ff 6600；} #water:hover{ cursor:指针；}/style/head body div id=' water '/div脚本DragInit('水')；//调用//拖拽初始化函数DragInit(id){ var $ div=document。GetElementByID(id)；var style={ position : ' absolute '，left: '0 '，top : ' 0 ' } for(var k in style){ $ div。style[k]=style[k]；//设置关键CSS } $ div。onmousedown=function(e){//鼠标按键按下e=e | | window . event var x=e . client x-$ div。offsetleft//鼠标到左上角的距离信息，固定不变var y=e . clienty-$ div。偏移；文件。onmousemove=function(e){//鼠标移动e=e | | window . event var L=e . Clientx-x；var T=e . clienty-y；var pW=文档。文档元素。客户端宽度；//页面宽度var pH=文档。文档元素。客户身高；var DivW=$ div.offsetWidth//Dom宽度var DivH=$ div.offsetHeight//范围限定if(l0){ L=0；} if(t ^ 0){ t=0；} if(L pW-divW){ L=pW-divW；} if(T pH-divH){ T=pH-divH；} //范围限定结束$ div。风格。左=L ' px$ div。风格。top=T ' px};文件。onmouseup=函数(e){//鼠标按键松开document . onmousemove=null }；};}/脚本/正文/html2、运行效果图如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript查找算法技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript中json操作技巧总结》 、 《JavaScript错误与调试技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。