js，jquery分别实现各种拖拽

2015-5-13 Jon js+jquery+ajax

js实现简单拖拽

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>jquery实现简单拖拽</title>
    <style>
      div{width: 100px;height:100px;background: red;cursor:pointer;position: absolute;color:#fff;padding:10px;}
    }
    </style>
  </head>
  <body>
    <div>我是一个可拖拽的div，jquery实现的</div>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
      $(function(){
        $('div').mousedown(function(e){
          //获取拖拽对象左上部距离鼠标按下的距离
          var divCoord=$(this).offset();
          var coordX=e.pageX-divCoord.left;
          var coordY=e.pageY-divCoord.top;
          $(document).mousemove(function(e){
            // 算出拖拽对象应该距离左上部的距离
            var x=e.pageX-coordX;
            var y=e.pageY-coordY;
            // 判断是否离开文档区域
            if(x<0){
              x=0
            }else if(x>$(this).width()-$('div').outerWidth(true)){
              x=$(this).width()-$('div').outerWidth(true);
            }
            if(y<0){
              y=0
            }else if(y>$(this).height()-$('div').outerHeight(true)){
              y=$(this).height()-$('div').outerHeight(true);
            }
            //设置拖拽
            $('div').css({'left':x+'px','top':y+'px'});
          });
          $(document).mouseup(function(){
            //关闭document上的mousemove事件
            $(document).off('mousemove');
            /* 在js中这样用
               document.onmousemove=null;
               document.onmouseup=null;
            */
          });
        });
      });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

jquery实现简单拖拽

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>jquery实现简单拖拽</title>
    <style>
      div{width: 100px;height:100px;background: red;cursor:pointer;position: absolute;color:#fff;padding:10px;}
    }
    </style>
  </head>
  <body>
    <div>我是一个可拖拽的div，jquery实现的</div>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
      $(function(){
        $('div').mousedown(function(e){
          //获取拖拽对象左上部距离鼠标按下的距离
          var divCoord=$(this).offset();
          var coordX=e.pageX-divCoord.left;
          var coordY=e.pageY-divCoord.top;

          $(document).mousemove(function(e){
            // 算出拖拽对象应该距离左上部的距离
            var x=e.pageX-coordX;
            var y=e.pageY-coordY;

            // 判断是否离开文档区域
            if(x<0){
              x=0
            }else if(x>$(this).width()-$('div').outerWidth(true)){
              x=$(this).width()-$('div').outerWidth(true);
            }
            if(y<0){
              y=0
            }else if(y>$(this).height()-$('div').outerHeight(true)){
              y=$(this).height()-$('div').outerHeight(true);
            }
            //设置拖拽
            $('div').css({'left':x+'px','top':y+'px'});
          });
          $(document).mouseup(function(){
            //关闭document上的mousemove事件
            $(document).off('mousemove');
            /* 在js中这样用
               document.onmousemove=null;
               document.onmouseup=null;
            */
          });
        });
      });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

js实现限制范围拖拽

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js实现限制范围拖拽</title>
    <style>
      #wrap{width: 600px;height:400px;background: #ccc;border:1px solid #aaa;position: relative;margin:30px;}
      #div{width: 80px;height:80px;background: red;position: absolute;cursor:pointer;padding:10px;color:#fff;}
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="div">你画一个圈，我绝不出去</div>
    </div>
    <script>
      window.onload=function(){
        var oWrap=document.getElementById('wrap');
        var oDiv=document.getElementById('div');
        oDiv.onmousedown=function(e){
          // 使用变量判断
          var isNot=1;
          var e = e || window.event;
          var lx=e.pageX-this.offsetLeft;
          var ly=e.pageY-this.offsetTop;
          document.onmousemove=function(e){
            if(isNot){
              var e = e || window.event;
              var x=e.pageX-lx;
              var y=e.pageY-ly;
              if(x<0){
                x=0;
              }else if(x>oWrap.clientWidth -oDiv.offsetWidth){
                x=oWrap.clientWidth -oDiv.offsetWidth;
              }
              if(y<0){
                y=0;
              }else if(y>oWrap.clientHeight-oDiv.offsetHeight){
                y=oWrap.clientHeight-oDiv.offsetHeight;
              }
              oDiv.style.left=x+'px';
              oDiv.style.top=y+'px';
            }
          };
          document.onmouseup=function(){
            isNot=0;
            /*
              // 或者
              document.onmousemove=null;
              document.onmouseup=null;
            */
          };
          return false;
        };
      };
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

js实现带框的拖拽

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js实现带框的拖拽</title>
    <style>
      #div{width: 80px;height:80px;background: yellow;position: absolute;cursor:pointer;padding:10px;color:blue;}
      .box{position: absolute;cursor:pointer;border:1px dashed #333;}
    </style>
  </head>
  <body>
    <div id="div">你先定好一个位置，我再过去</div>
    <script>
      window.onload=function(){
        var oDiv=document.getElementById('div');
        oDiv.onmousedown=function(e){
          // 创建 oBox 节点元素
          var oBox=document.createElement('div');
          oBox.className='box';
          oBox.style.width=this.clientWidth+'px';
          oBox.style.height=this.clientHeight+'px';
          oBox.style.left=this.offsetLeft+'px';
          oBox.style.top=this.offsetTop+'px';
          this.parentNode.appendChild(oBox);

          var e = e || window.event;
          var lx=e.pageX-this.offsetLeft;
          var ly=e.pageY-this.offsetTop;
          document.onmousemove=function(e){
            var e = e || window.event;
            var x=e.pageX-lx;
            var y=e.pageY-ly;
            if(x<0){
              x=0;
            }else if(x>document.documentElement.clientWidth-oDiv.offsetWidth){
              x=document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            if(y<0){
              y=0;
            }else if(y>document.documentElement.clientHeight-oDiv.offsetHeight){
              y=document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            oBox.style.left=x+'px';
            oBox.style.top=y+'px';
          };
          document.onmouseup=function(){
            oDiv.style.left=oBox.offsetLeft+'px';
            oDiv.style.top=oBox.offsetTop+'px';
            oDiv.parentNode.removeChild(oBox);
            document.onmousemove=null;
            document.onmouseup=null;
          };
          return false;
        };
      };
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

js实现靠边吸附拖拽

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js实现靠边吸附拖拽</title>
    <style>
      #wrap{width: 600px;height:400px;background: #ccc;border:1px solid #aaa;position: relative;margin:30px;}
      #div{width: 80px;height:80px;background: red;position: absolute;cursor:pointer;padding:10px;color:#fff;}
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="div">当我离边界30像素以内是我会自动吸附</div>
    </div>
    <script>
      window.onload=function(){
        var oWrap=document.getElementById('wrap');
        var oDiv=document.getElementById('div');
        oDiv.onmousedown=function(e){
          // 使用变量判断
          var isNot=1;
          var e = e || window.event;
          var lx=e.pageX-this.offsetLeft;
          var ly=e.pageY-this.offsetTop;
          document.onmousemove=function(e){
            if(isNot){
              var e = e || window.event;
              var x=e.pageX-lx;
              var y=e.pageY-ly;
              if(x<30){
                x=0;
              }else if(x>oWrap.clientWidth -oDiv.offsetWidth-30){
                x=oWrap.clientWidth -oDiv.offsetWidth;
              }
              if(y<30){
                y=0;
              }else if(y>oWrap.clientHeight-oDiv.offsetHeight-30){
                y=oWrap.clientHeight-oDiv.offsetHeight;
              }
              oDiv.style.left=x+'px';
              oDiv.style.top=y+'px';
            }
          };
          document.onmouseup=function(){
            isNot=0;
            /*
              // 或者
              document.onmousemove=null;
              document.onmouseup=null;
            */
          };
          return false;
        };
      };
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

js实现自定义横向滚动条

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js实现自定义横向滚动条</title>
    <style>
      #wrap{width: 600px;height:20px;background: #ccc;border:1px solid #aaa;position: relative;margin:30px;float:left}
      #div{width: 20px;height:20px;background: red;position: absolute;cursor:pointer;color:#fff;}
      #text1{
        margin:30px
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="div"></div>
    </div>
    <input type="text" name="txt1" value="0GB" id="text1"/>
    <script>
      window.onload=function(){
        var oWrap=document.getElementById('wrap');
        var oDiv=document.getElementById('div');
        var oInput=document.getElementById('text1');
        oDiv.onmousedown=function(e){
          // 使用变量判断
          var isNot=1;
          var e = e || window.event;
          var lx=e.pageX-this.offsetLeft;
          var oCha=oWrap.clientWidth-oDiv.offsetWidth;
          document.onmousemove=function(e){
            if(isNot){
              var e = e || window.event;
              var x=e.pageX-lx;
              if(x<0){
                x=0;
              }else if(x>oCha){
                x=oCha;
              }
              oDiv.style.left=x+'px';
              oInput.value=parseInt(x/oCha*200)+'GB';

            }
          };
          document.onmouseup=function(){
            isNot=0;
            /*
              // 或者
              document.onmousemove=null;
              document.onmouseup=null;
            */
          };
          return false;
        };
      };
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

js实现自定义纵向滚动条

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js实现自定义纵向滚动条</title>
    <style>
      #content{width:300px;height:450px;border:1px solid #aaa;float:left;margin:30px 0 0 30px;position: relative;overflow: hidden;}
      #nr{position: absolute;padding:20px;text-indent: 2em;}
      #wrap{width:20px;height:450px;background: #ccc;border:1px solid #aaa;position: relative;margin-top:30px;float:left;}
      #div{width: 20px;height:20px;background: red;position: absolute;cursor:pointer;}
    </style>
  </head>
  <body>
    <div id="content">
      <div id="nr">
      人生，总要经历一些事，而这些事，有的值得让我们铭记。
      今天五一，早上起来没事，就想写点东西，就把最近的考驾照的事情写上吧。
      有些事，总是要做的；有些证，总是要考的。考驾照就是势在必行的一件事情，可以说是现代人的必修课，有人说 以后不会开车就像不会走路一样可怕，由此可知考驾照的必要性了吧！
      早就想考驾照了，一直没时间，趁着这段时间空闲，就开始打算考驾照。
      先用 "有的..有的.." 造个句吧！
      身边的朋友有的已经考过了，有的正在考，有的正在打算考，还有的打算以后考...
      下面谈谈我个人考驾照的经过
      年后初到合肥，便开始着手打听着各个驾校的消息
      经过了近一周的打听查询，最终选择了八一驾校
      3.3日便到八一包河花园训练基地报名，工作人员让下个驾考宝典回去练习科目一
      3.7日驾校安排了体检，这里说一下，体检队伍排的那是一个长呀，真不愧是龙的传人，突然感叹政府这么多年的计划生育怎么不见成效呢。下午去办理居住证
      3.10日进行了两次科目一模拟考，99、97，还是不错的(至少过了他们要求的95分以上)
      3.12上午刚拿到居住证，驾校就电话过来问有没有拿到居住证好安排考试，这个好巧，科目一考试安排在了3.30号
      3.14老家阜阳尽然发生了 4.3 级的地震，震惊呀，不敢相信，一个平原里的平原，鸟山没一个，竟然还学人家地震，还好家人都没事
      3.23成考报到拿书，这个是去年报考了个成人教育，开学了，看来这段时间有的忙了
      3.30驾校科目一考试，在焦急的等待中，终于迎来了科目一考试，早已磨枪擦掌多时，果然考了100(这也正常，科目一好多考100的)
      4.1日就开始练科目二了，然后就是各种请假，整整一个四月请了七天假(大多是半天半天请的)，这么多天假，就直接导致了5月份的经济危机，不过还好以前有储备,深刻体会未雨绸缪总是好的。
      4.28日科目二考试，“十年铸剑，不漏锋芒”，苦苦近一个月，不就为了今天吗，想想还有点小激动呢，到了考场，好吧，还是人好多，加上天气好热，稍微有点烦躁。还好成功一次性满分通过，心情好转，但不论心情怎么样，我都没有过于表现于外，因为宠辱不惊，才是我的本色。
      </div>
    </div>
    <div id="wrap">
      <div id="div"></div>
    </div>
    <script>
      window.onload=function(){
        var oWrap=document.getElementById('wrap');
        var oDiv=document.getElementById('div');
        var oCha=oWrap.clientHeight-oDiv.offsetHeight;
        var oContent=document.getElementById('content');
        var oNr=document.getElementById('nr');
        var hCha=oNr.clientHeight-oContent.clientHeight;
        oDiv.onmousedown=function(e){
          // 使用变量判断
          var isNot=1;
          var e = e || window.event;
          var ly=e.pageY-this.offsetTop;
          document.onmousemove=function(e){
            if(isNot){
              var e = e || window.event;
              var y=e.pageY-ly;
              if(y<0){
                y=0;
              }else if(y>oCha){
                y=oCha;
              }
              oDiv.style.top=y+'px';
              var bili=parseInt(y/oCha*hCha);
              oNr.style.top=-bili+'px';
            }
          };
          document.onmouseup=function(){
            isNot=0;
            /*
              // 或者
              document.onmousemove=null;
              document.onmouseup=null;
            */
          };
          return false;
        };
      };
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

jquery实现可以根据鼠标滑动而滑动的滚动条

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>jquery实现可以根据鼠标滑动而滑动的滚动条</title>
    <style>
      #content{width:300px;height:450px;border:1px solid #aaa;float:left;margin:30px 0 0 30px;position: relative;overflow: hidden;}
      #nr{position: absolute;padding:20px;text-indent: 2em;}
      #wrap{width:20px;height:450px;background: #ccc;border:1px solid #aaa;position: relative;margin-top:30px;float:left;}
      #div{width: 20px;height:20px;background: red;position: absolute;cursor:pointer;}
    </style>
  </head>
  <body>
    <div id="content">
      <div id="nr">
        人生，总要经历一些事，而这些事，有的值得让我们铭记。
        今天五一，早上起来没事，就想写点东西，就把最近的考驾照的事情写上吧。
        有些事，总是要做的；有些证，总是要考的。考驾照就是势在必行的一件事情，可以说是现代人的必修课，有人说 以后不会开车就像不会走路一样可怕，由此可知考驾照的必要性了吧！
        早就想考驾照了，一直没时间，趁着这段时间空闲，就开始打算考驾照。
        先用 "有的..有的.." 造个句吧！
        身边的朋友有的已经考过了，有的正在考，有的正在打算考，还有的打算以后考...
        下面谈谈我个人考驾照的经过
        年后初到合肥，便开始着手打听着各个驾校的消息
        经过了近一周的打听查询，最终选择了八一驾校
        3.3日便到八一包河花园训练基地报名，工作人员让下个驾考宝典回去练习科目一
        3.7日驾校安排了体检，这里说一下，体检队伍排的那是一个长呀，真不愧是龙的传人，突然感叹政府这么多年的计划生育怎么不见成效呢。下午去办理居住证
        3.10日进行了两次科目一模拟考，99、97，还是不错的(至少过了他们要求的95分以上)
        3.12上午刚拿到居住证，驾校就电话过来问有没有拿到居住证好安排考试，这个好巧，科目一考试安排在了3.30号
        3.14老家阜阳尽然发生了 4.3 级的地震，震惊呀，不敢相信，一个平原里的平原，鸟山没一个，竟然还学人家地震，还好家人都没事
        3.23成考报到拿书，这个是去年报考了个成人教育，开学了，看来这段时间有的忙了
        3.30驾校科目一考试，在焦急的等待中，终于迎来了科目一考试，早已磨枪擦掌多时，果然考了100(这也正常，科目一好多考100的)
        4.1日就开始练科目二了，然后就是各种请假，整整一个四月请了七天假(大多是半天半天请的)，这么多天假，就直接导致了5月份的经济危机，不过还好以前有储备,深刻体会未雨绸缪总是好的。
        4.28日科目二考试，“十年铸剑，不漏锋芒”，苦苦近一个月，不就为了今天吗，想想还有点小激动呢，到了考场，好吧，还是人好多，加上天气好热，稍微有点烦躁。还好成功一次性满分通过，心情好转，但不论心情怎么样，我都没有过于表现于外，因为宠辱不惊，才是我的本色。
      </div>
    </div>
    <div id="wrap">
      <div id="div"></div>
    </div>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="https://yuanqiao.pw/yqiao/js/jquery.mousewheel.min.js"></script>
    <script>
      $(function(){
        var oCha=$('#wrap').height()-$('#div').height();
        var hCha=$('#nr').outerHeight()-$('#content').outerHeight();
        $('#div').mousedown(function(e){
          /*
            js 中 this.offsetTop 返回的数值是相对于父类
            jquery 中 $(this).offset().top 返回的数值是相对于浏览器的左上角
            alert(this.offsetTop+','+$(this).offset().top);
          */
          var ly=e.pageY-$(this).offset().top+$('#wrap').offset().top;
          $(document).mousemove(function(e){
            var y=e.pageY-ly;
            if(y<0){
              y=0;
            }else if(y>oCha){
              y=oCha;
            }
            var bili=parseInt(y/oCha*hCha);
            $('#div').css('top',y+'px');
            $('#nr').css('top',-bili+'px')

          });
          $(document).mouseup(function(){
            $(document).off('mousemove');
            $(document).off('mouseup');
          });
          return false;
        });
        var speed = 0;
        $(document).mousewheel(function(e,d){
          var oDivTop = parseInt($('#div').css('top'));
          var bili = oDivTop/oCha*hCha;
          if(d==-1){
            speed++;
            if(speed>=oCha/10){
              speed=oCha/10;
            }
            $('#div').css('top',speed*10+'px');
            $('#nr').css('top',-bili);
          }else{
            speed--;
            if(speed<=0){
              speed=0;
            }
            $('#div').css('top',speed*10+'px');
            $('#nr').css('top',-bili);
          }
        });
      });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

标签: js拖拽 jquery拖拽拖拽

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇jquery实现各种常用下拉菜单
上一篇js实现页面打字机，动态显示文字

发表评论：

知向前端

js，jquery分别实现各种拖拽

js实现简单拖拽

jquery实现简单拖拽

js实现限制范围拖拽

js实现带框的拖拽

js实现靠边吸附拖拽

js实现自定义横向滚动条

js实现自定义纵向滚动条

jquery实现可以根据鼠标滑动而滑动的滚动条

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档