知向前端
首页
微语
登录
js，jquery分别实现各种拖拽
2015-5-13 Jon
js实现简单拖拽
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>jquery实现简单拖拽</title><br /> <style><br /> div{width: 100px;height:100px;background: red;cursor:pointer;position: absolute;color:#fff;padding:10px;}<br /> }<br /> </style><br /> </head><br /> <body><br /> <div>我是一个可拖拽的div，jquery实现的</div><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script><br /> $(function(){<br /> $('div').mousedown(function(e){<br /> //获取拖拽对象左上部距离鼠标按下的距离<br /> var divCoord=$(this).offset();<br /> var coordX=e.pageX-divCoord.left;<br /> var coordY=e.pageY-divCoord.top;<br /> $(document).mousemove(function(e){<br /> // 算出拖拽对象应该距离左上部的距离<br /> var x=e.pageX-coordX;<br /> var y=e.pageY-coordY;<br /> // 判断是否离开文档区域<br /> if(x<0){<br /> x=0<br /> }else if(x>$(this).width()-$('div').outerWidth(true)){<br /> x=$(this).width()-$('div').outerWidth(true);<br /> }<br /> if(y<0){<br /> y=0<br /> }else if(y>$(this).height()-$('div').outerHeight(true)){<br /> y=$(this).height()-$('div').outerHeight(true);<br /> }<br /> //设置拖拽<br /> $('div').css({'left':x+'px','top':y+'px'});<br /> });<br /> $(document).mouseup(function(){<br /> //关闭document上的mousemove事件<br /> $(document).off('mousemove');<br /> /* 在js中这样用<br /> document.onmousemove=null;<br /> document.onmouseup=null;<br /> */<br /> });<br /> });<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
jquery实现简单拖拽
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>jquery实现简单拖拽</title><br /> <style><br /> div{width: 100px;height:100px;background: red;cursor:pointer;position: absolute;color:#fff;padding:10px;}<br /> }<br /> </style><br /> </head><br /> <body><br /> <div>我是一个可拖拽的div，jquery实现的</div><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script><br /> $(function(){<br /> $('div').mousedown(function(e){<br /> //获取拖拽对象左上部距离鼠标按下的距离<br /> var divCoord=$(this).offset();<br /> var coordX=e.pageX-divCoord.left;<br /> var coordY=e.pageY-divCoord.top;<br /> <br /> $(document).mousemove(function(e){<br /> // 算出拖拽对象应该距离左上部的距离<br /> var x=e.pageX-coordX;<br /> var y=e.pageY-coordY;<br /> <br /> // 判断是否离开文档区域<br /> if(x<0){<br /> x=0<br /> }else if(x>$(this).width()-$('div').outerWidth(true)){<br /> x=$(this).width()-$('div').outerWidth(true);<br /> }<br /> if(y<0){<br /> y=0<br /> }else if(y>$(this).height()-$('div').outerHeight(true)){<br /> y=$(this).height()-$('div').outerHeight(true);<br /> }<br /> //设置拖拽<br /> $('div').css({'left':x+'px','top':y+'px'});<br /> });<br /> $(document).mouseup(function(){<br /> //关闭document上的mousemove事件<br /> $(document).off('mousemove');<br /> /* 在js中这样用<br /> document.onmousemove=null;<br /> document.onmouseup=null;<br /> */<br /> });<br /> });<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
js实现限制范围拖拽
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>js实现限制范围拖拽</title><br /> <style><br /> #wrap{width: 600px;height:400px;background: #ccc;border:1px solid #aaa;position: relative;margin:30px;}<br /> #div{width: 80px;height:80px;background: red;position: absolute;cursor:pointer;padding:10px;color:#fff;}<br /> </style><br /> </head><br /> <body><br /> <div id="wrap"><br /> <div id="div">你画一个圈，我绝不出去</div><br /> </div><br /> <script><br /> window.onload=function(){<br /> var oWrap=document.getElementById('wrap');<br /> var oDiv=document.getElementById('div');<br /> oDiv.onmousedown=function(e){<br /> // 使用变量判断<br /> var isNot=1;<br /> var e = e || window.event;<br /> var lx=e.pageX-this.offsetLeft;<br /> var ly=e.pageY-this.offsetTop;<br /> document.onmousemove=function(e){<br /> if(isNot){<br /> var e = e || window.event;<br /> var x=e.pageX-lx;<br /> var y=e.pageY-ly;<br /> if(x<0){<br /> x=0;<br /> }else if(x>oWrap.clientWidth -oDiv.offsetWidth){<br /> x=oWrap.clientWidth -oDiv.offsetWidth;<br /> }<br /> if(y<0){<br /> y=0;<br /> }else if(y>oWrap.clientHeight-oDiv.offsetHeight){<br /> y=oWrap.clientHeight-oDiv.offsetHeight;<br /> }<br /> oDiv.style.left=x+'px';<br /> oDiv.style.top=y+'px';<br /> }<br /> };<br /> document.onmouseup=function(){<br /> isNot=0;<br /> /*<br /> // 或者<br /> document.onmousemove=null;<br /> document.onmouseup=null;<br /> */<br /> };<br /> return false;<br /> };<br /> };<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
js实现带框的拖拽
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>js实现带框的拖拽</title><br /> <style><br /> #div{width: 80px;height:80px;background: yellow;position: absolute;cursor:pointer;padding:10px;color:blue;}<br /> .box{position: absolute;cursor:pointer;border:1px dashed #333;}<br /> </style><br /> </head><br /> <body><br /> <div id="div">你先定好一个位置，我再过去</div><br /> <script><br /> window.onload=function(){<br /> var oDiv=document.getElementById('div');<br /> oDiv.onmousedown=function(e){<br /> // 创建 oBox 节点元素<br /> var oBox=document.createElement('div');<br /> oBox.className='box';<br /> oBox.style.width=this.clientWidth+'px';<br /> oBox.style.height=this.clientHeight+'px';<br /> oBox.style.left=this.offsetLeft+'px';<br /> oBox.style.top=this.offsetTop+'px';<br /> this.parentNode.appendChild(oBox);<br /> <br /> var e = e || window.event;<br /> var lx=e.pageX-this.offsetLeft;<br /> var ly=e.pageY-this.offsetTop;<br /> document.onmousemove=function(e){<br /> var e = e || window.event;<br /> var x=e.pageX-lx;<br /> var y=e.pageY-ly;<br /> if(x<0){<br /> x=0;<br /> }else if(x>document.documentElement.clientWidth-oDiv.offsetWidth){<br /> x=document.documentElement.clientWidth-oDiv.offsetWidth;<br /> }<br /> if(y<0){<br /> y=0;<br /> }else if(y>document.documentElement.clientHeight-oDiv.offsetHeight){<br /> y=document.documentElement.clientHeight-oDiv.offsetHeight;<br /> }<br /> oBox.style.left=x+'px';<br /> oBox.style.top=y+'px';<br /> };<br /> document.onmouseup=function(){<br /> oDiv.style.left=oBox.offsetLeft+'px';<br /> oDiv.style.top=oBox.offsetTop+'px';<br /> oDiv.parentNode.removeChild(oBox);<br /> document.onmousemove=null;<br /> document.onmouseup=null;<br /> };<br /> return false;<br /> };<br /> };<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
js实现靠边吸附拖拽
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>js实现靠边吸附拖拽</title><br /> <style><br /> #wrap{width: 600px;height:400px;background: #ccc;border:1px solid #aaa;position: relative;margin:30px;}<br /> #div{width: 80px;height:80px;background: red;position: absolute;cursor:pointer;padding:10px;color:#fff;}<br /> </style><br /> </head><br /> <body><br /> <div id="wrap"><br /> <div id="div">当我离边界30像素以内是我会自动吸附</div><br /> </div><br /> <script><br /> window.onload=function(){<br /> var oWrap=document.getElementById('wrap');<br /> var oDiv=document.getElementById('div');<br /> oDiv.onmousedown=function(e){<br /> // 使用变量判断<br /> var isNot=1;<br /> var e = e || window.event;<br /> var lx=e.pageX-this.offsetLeft;<br /> var ly=e.pageY-this.offsetTop;<br /> document.onmousemove=function(e){<br /> if(isNot){<br /> var e = e || window.event;<br /> var x=e.pageX-lx;<br /> var y=e.pageY-ly;<br /> if(x<30){<br /> x=0;<br /> }else if(x>oWrap.clientWidth -oDiv.offsetWidth-30){<br /> x=oWrap.clientWidth -oDiv.offsetWidth;<br /> }<br /> if(y<30){<br /> y=0;<br /> }else if(y>oWrap.clientHeight-oDiv.offsetHeight-30){<br /> y=oWrap.clientHeight-oDiv.offsetHeight;<br /> }<br /> oDiv.style.left=x+'px';<br /> oDiv.style.top=y+'px';<br /> }<br /> };<br /> document.onmouseup=function(){<br /> isNot=0;<br /> /*<br /> // 或者<br /> document.onmousemove=null;<br /> document.onmouseup=null;<br /> */<br /> };<br /> return false;<br /> };<br /> };<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
js实现自定义横向滚动条
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>js实现自定义横向滚动条</title><br /> <style><br /> #wrap{width: 600px;height:20px;background: #ccc;border:1px solid #aaa;position: relative;margin:30px;float:left}<br /> #div{width: 20px;height:20px;background: red;position: absolute;cursor:pointer;color:#fff;}<br /> #text1{<br /> margin:30px<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id="wrap"><br /> <div id="div"></div><br /> </div><br /> <input type="text" name="txt1" value="0GB" id="text1"/><br /> <script><br /> window.onload=function(){<br /> var oWrap=document.getElementById('wrap');<br /> var oDiv=document.getElementById('div');<br /> var oInput=document.getElementById('text1');<br /> oDiv.onmousedown=function(e){<br /> // 使用变量判断<br /> var isNot=1;<br /> var e = e || window.event;<br /> var lx=e.pageX-this.offsetLeft;<br /> var oCha=oWrap.clientWidth-oDiv.offsetWidth;<br /> document.onmousemove=function(e){<br /> if(isNot){<br /> var e = e || window.event;<br /> var x=e.pageX-lx;<br /> if(x<0){<br /> x=0;<br /> }else if(x>oCha){<br /> x=oCha;<br /> }<br /> oDiv.style.left=x+'px';<br /> oInput.value=parseInt(x/oCha*200)+'GB';<br /> <br /> }<br /> };<br /> document.onmouseup=function(){<br /> isNot=0;<br /> /*<br /> // 或者<br /> document.onmousemove=null;<br /> document.onmouseup=null;<br /> */<br /> };<br /> return false;<br /> };<br /> };<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
js实现自定义纵向滚动条
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>js实现自定义纵向滚动条</title><br /> <style><br /> #content{width:300px;height:450px;border:1px solid #aaa;float:left;margin:30px 0 0 30px;position: relative;overflow: hidden;}<br /> #nr{position: absolute;padding:20px;text-indent: 2em;}<br /> #wrap{width:20px;height:450px;background: #ccc;border:1px solid #aaa;position: relative;margin-top:30px;float:left;}<br /> #div{width: 20px;height:20px;background: red;position: absolute;cursor:pointer;}<br /> </style><br /> </head><br /> <body><br /> <div id="content"><br /> <div id="nr"><br /> 人生，总要经历一些事，而这些事，有的值得让我们铭记。<br /> 今天五一，早上起来没事，就想写点东西，就把最近的考驾照的事情写上吧。<br /> 有些事，总是要做的；有些证，总是要考的。考驾照就是势在必行的一件事情，可以说是现代人的必修课，有人说 以后不会开车就像不会走路一样可怕，由此可知考驾照的必要性了吧！<br /> 早就想考驾照了，一直没时间，趁着这段时间空闲，就开始打算考驾照。<br /> 先用 "有的..有的.." 造个句吧！<br /> 身边的朋友有的已经考过了，有的正在考，有的正在打算考，还有的打算以后考...<br /> 下面谈谈我个人考驾照的经过<br /> 年后初到合肥，便开始着手打听着各个驾校的消息<br /> 经过了近一周的打听查询，最终选择了八一驾校<br /> 3.3日便到八一包河花园训练基地报名，工作人员让下个驾考宝典回去练习科目一<br /> 3.7日驾校安排了体检，这里说一下，体检队伍排的那是一个长呀，真不愧是龙的传人，突然感叹政府这么多年的计划生育怎么不见成效呢。下午去办理居住证<br /> 3.10日进行了两次科目一模拟考，99、97，还是不错的(至少过了他们要求的95分以上)<br /> 3.12上午刚拿到居住证，驾校就电话过来问有没有拿到居住证好安排考试，这个好巧，科目一考试安排在了3.30号<br /> 3.14老家阜阳尽然发生了 4.3 级的地震，震惊呀，不敢相信，一个平原里的平原，鸟山没一个，竟然还学人家地震，还好家人都没事<br /> 3.23成考报到拿书，这个是去年报考了个成人教育，开学了，看来这段时间有的忙了<br /> 3.30驾校科目一考试，在焦急的等待中，终于迎来了科目一考试，早已磨枪擦掌多时，果然考了100(这也正常，科目一好多考100的)<br /> 4.1日就开始练科目二了，然后就是各种请假，整整一个四月请了七天假(大多是半天半天请的)，这么多天假，就直接导致了5月份的经济危机，不过还好以前有储备,深刻体会未雨绸缪总是好的。<br /> 4.28日科目二考试，“十年铸剑，不漏锋芒”，苦苦近一个月，不就为了今天吗，想想还有点小激动呢，到了考场，好吧，还是人好多，加上天气好热，稍微有点烦躁。还好成功一次性满分通过，心情好转，但不论心情怎么样，我都没有过于表现于外，因为宠辱不惊，才是我的本色。<br /> </div><br /> </div><br /> <div id="wrap"><br /> <div id="div"></div><br /> </div><br /> <script><br /> window.onload=function(){<br /> var oWrap=document.getElementById('wrap');<br /> var oDiv=document.getElementById('div');<br /> var oCha=oWrap.clientHeight-oDiv.offsetHeight;<br /> var oContent=document.getElementById('content');<br /> var oNr=document.getElementById('nr');<br /> var hCha=oNr.clientHeight-oContent.clientHeight;<br /> oDiv.onmousedown=function(e){<br /> // 使用变量判断<br /> var isNot=1;<br /> var e = e || window.event;<br /> var ly=e.pageY-this.offsetTop;<br /> document.onmousemove=function(e){<br /> if(isNot){<br /> var e = e || window.event;<br /> var y=e.pageY-ly;<br /> if(y<0){<br /> y=0;<br /> }else if(y>oCha){<br /> y=oCha;<br /> }<br /> oDiv.style.top=y+'px';<br /> var bili=parseInt(y/oCha*hCha);<br /> oNr.style.top=-bili+'px';<br /> }<br /> };<br /> document.onmouseup=function(){<br /> isNot=0;<br /> /*<br /> // 或者<br /> document.onmousemove=null;<br /> document.onmouseup=null;<br /> */<br /> };<br /> return false;<br /> };<br /> };<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
jquery实现可以根据鼠标滑动而滑动的滚动条
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>jquery实现可以根据鼠标滑动而滑动的滚动条</title><br /> <style><br /> #content{width:300px;height:450px;border:1px solid #aaa;float:left;margin:30px 0 0 30px;position: relative;overflow: hidden;}<br /> #nr{position: absolute;padding:20px;text-indent: 2em;}<br /> #wrap{width:20px;height:450px;background: #ccc;border:1px solid #aaa;position: relative;margin-top:30px;float:left;}<br /> #div{width: 20px;height:20px;background: red;position: absolute;cursor:pointer;}<br /> </style><br /> </head><br /> <body><br /> <div id="content"><br /> <div id="nr"><br /> 人生，总要经历一些事，而这些事，有的值得让我们铭记。<br /> 今天五一，早上起来没事，就想写点东西，就把最近的考驾照的事情写上吧。<br /> 有些事，总是要做的；有些证，总是要考的。考驾照就是势在必行的一件事情，可以说是现代人的必修课，有人说 以后不会开车就像不会走路一样可怕，由此可知考驾照的必要性了吧！<br /> 早就想考驾照了，一直没时间，趁着这段时间空闲，就开始打算考驾照。<br /> 先用 "有的..有的.." 造个句吧！<br /> 身边的朋友有的已经考过了，有的正在考，有的正在打算考，还有的打算以后考...<br /> 下面谈谈我个人考驾照的经过<br /> 年后初到合肥，便开始着手打听着各个驾校的消息<br /> 经过了近一周的打听查询，最终选择了八一驾校<br /> 3.3日便到八一包河花园训练基地报名，工作人员让下个驾考宝典回去练习科目一<br /> 3.7日驾校安排了体检，这里说一下，体检队伍排的那是一个长呀，真不愧是龙的传人，突然感叹政府这么多年的计划生育怎么不见成效呢。下午去办理居住证<br /> 3.10日进行了两次科目一模拟考，99、97，还是不错的(至少过了他们要求的95分以上)<br /> 3.12上午刚拿到居住证，驾校就电话过来问有没有拿到居住证好安排考试，这个好巧，科目一考试安排在了3.30号<br /> 3.14老家阜阳尽然发生了 4.3 级的地震，震惊呀，不敢相信，一个平原里的平原，鸟山没一个，竟然还学人家地震，还好家人都没事<br /> 3.23成考报到拿书，这个是去年报考了个成人教育，开学了，看来这段时间有的忙了<br /> 3.30驾校科目一考试，在焦急的等待中，终于迎来了科目一考试，早已磨枪擦掌多时，果然考了100(这也正常，科目一好多考100的)<br /> 4.1日就开始练科目二了，然后就是各种请假，整整一个四月请了七天假(大多是半天半天请的)，这么多天假，就直接导致了5月份的经济危机，不过还好以前有储备,深刻体会未雨绸缪总是好的。<br /> 4.28日科目二考试，“十年铸剑，不漏锋芒”，苦苦近一个月，不就为了今天吗，想想还有点小激动呢，到了考场，好吧，还是人好多，加上天气好热，稍微有点烦躁。还好成功一次性满分通过，心情好转，但不论心情怎么样，我都没有过于表现于外，因为宠辱不惊，才是我的本色。<br /> </div><br /> </div><br /> <div id="wrap"><br /> <div id="div"></div><br /> </div><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> <script src="https://yuanqiao.pw/yqiao/js/jquery.mousewheel.min.js"></script><br /> <script><br /> $(function(){<br /> var oCha=$('#wrap').height()-$('#div').height();<br /> var hCha=$('#nr').outerHeight()-$('#content').outerHeight();<br /> $('#div').mousedown(function(e){<br /> /*<br /> js 中 this.offsetTop 返回的数值是相对于父类<br /> jquery 中 $(this).offset().top 返回的数值是相对于浏览器的左上角<br /> alert(this.offsetTop+','+$(this).offset().top);<br /> */<br /> var ly=e.pageY-$(this).offset().top+$('#wrap').offset().top;<br /> $(document).mousemove(function(e){<br /> var y=e.pageY-ly;<br /> if(y<0){<br /> y=0;<br /> }else if(y>oCha){<br /> y=oCha;<br /> }<br /> var bili=parseInt(y/oCha*hCha);<br /> $('#div').css('top',y+'px');<br /> $('#nr').css('top',-bili+'px')<br /> <br /> });<br /> $(document).mouseup(function(){<br /> $(document).off('mousemove');<br /> $(document).off('mouseup');<br /> });<br /> return false;<br /> });<br /> var speed = 0;<br /> $(document).mousewheel(function(e,d){<br /> var oDivTop = parseInt($('#div').css('top'));<br /> var bili = oDivTop/oCha*hCha;<br /> if(d==-1){<br /> speed++;<br /> if(speed>=oCha/10){<br /> speed=oCha/10;<br /> }<br /> $('#div').css('top',speed*10+'px');<br /> $('#nr').css('top',-bili);<br /> }else{<br /> speed--;<br /> if(speed<=0){<br /> speed=0;<br /> }<br /> $('#div').css('top',speed*10+'px');<br /> $('#nr').css('top',-bili);<br /> }<br /> });<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容