JavaScript拖拽实例代码

一、JS拖拽的实现实例代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '/title拖拽js/title style type=' text/CSS ' html，body { overflow:hidden} body，div，{ margin:0划水：0;} body { color : # ffffont :12 px/2 Arial；} p { padd :0 10pxmargin-top :10 px；} span { color: # ff0左衬垫：5 px} # box { position:absolute宽度宽度：300像素高度：150 px背景# D5CDDAborder:2px固体# ccctop :150 pxleft :400 pxmargin 33600 } #拖动{ height :25 xcursor : love背景技术# 724a88border-bottom:2px实心# cccpadding :0 10px }/style/head dydiv id=' box ' div id=' drag '拖动区域/div被拖动的整个div/div/body/html脚本src=' http : js/jquery-1。10 .1 .量滴js '/script script type=' text/JavaScript ' $(function(){ moveBox($(' # box ')，$(' # drag ')))；})//B被拖动的英国电信公司可拖动区域函数moveBox(B，BT){ var bDrag=false；var _x，_ y；Bt。鼠标向下(函数(事件){ var e=event | | window。事件；bDrag=真；_x=e.pageX-B.position().向左；_y=e.pageY-B.position().顶部；返回false }) $(文档)。鼠标移动(函数（事件){ if(！bDrag)返回false var e=event | | window . event var x=e . PageX-_ x；var y=e . Pagey-_ y；控制台。log(b . position())；var maxL=$(文档)。width()-b . out width()；var maxT=$(文档)。高度()- B。外部高度();x=x 0？0: x；x=x maxL？maxl : x；y=y ^ 0？0:yy=y maxT？maxt :yB.css({left:x，top :y })；返回false }).鼠标上移(function(){ BDrag=false；返回false })}/script二、js之拖拽效果

主要原理：

1、当鼠标按下时，记录鼠标坐标，用到的是onmousedown

2、当鼠标移动时，计算鼠标移动的坐标之差，用到的是onmousemove

3、当鼠标松开时，清除事件，用到的是onmouseup

了解的知识：

1、div的offsetLeft与样式。左侧的区别：//www .JB 51。net/article/93142。html文件的后缀

效果图如下：

突然发现有没有效果图都一样哈哈，不说废话了，上代码：

超文本标记语言代码：

！DOCTYPE html html head meta charset=' utf8 ' title js拖拽效果/title style type=' text/CSS ' # div 1 { width : 200px；高度： 200像素；绝对位置：背景技术# 99dd33光标：移动；}/style/head body div id=' div 1 '/div/body script type=' text/JavaScript '/js代码/script/htmljs代码：

window.onload函数(){ var DIsX=DIsY=0；//鼠标距离差异的左距离和上距离var div 1=文档。getelementbyid(' div 1 ')；//得到div1对象//鼠标按下div1时1区。onmousedown=function(e){ var evnt=e | | event；//得到鼠标事件disX=evnt。clientx-div 1。offsetleft//鼠标横坐标- div1的left disY=evnt。客户1区。偏移顶部；//鼠标纵坐标- div1的顶部/鼠标移动时文件。onmousemove=function(e){ var evnt=e | | event；var x=evnt。客户端x-DIsX；var y=evnt。client y-DIsy；var window _ width=文档。文档元素。客户端宽度-div 1。偏移；var window _ height=文档。文档元素。客户高度-1区。偏移心；x=(x ^ 0)？0 : x；//当div1到窗口最左边时x=(x窗宽)?window _ width : x；//当div1到窗口最右边时y=(y ^ 0)？0 :y//当div1到窗口最上边时y=(y窗_高)?window _ height :y//当div1到窗口最下边时1区。风格。left=x ' px1区。风格。top=y ' px};//鼠标抬起时文件。onmouseup=function(){ document。onmousemove=nulldocument . on mouup=null }；返回false }；};当然，这个虽然支持大部分浏览器，但是，我觉得差异跟随鼠标的速度有点滞后，如果有好的解决办法请联系我喔，谢谢！

以上就是射流研究…实现拖拽的实例代码，有需要的小伙伴可以参考下，谢谢大家对本站的支持！