jQuery實現的簡單拖拽功能示例【測試可用】

2019-11-19 13:15:57

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現的簡單拖拽功能。分享給大家供大家參考，具體如下：

<!doctype html><html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>www.survivalescaperooms.com jQuery拖拽</title>    <style type="text/css">      #box{        position:fixed;        left:100px;        top:100px;        background-color:red;        width:300px;        height:200px;      }      #out{        height:2000px;      }    </style>    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>    <script>      $(document).ready(function(){        var drafting=false;         var offX,offY,mouseX,mouseY,winX,winY,x,y;        $("#box").mousedown(function(event){          event.stopPropagation();          drafting=true;        });        $(document).mousemove(function(event){          event.stopPropagation();          var e=event||window.event;          mouseX=e.pageX||e.clientX+$(document).scrollLeft();          mouseY=e.pageY||e.clientY+$(document).scrollTop();          winX=$("#box").offset().left-$(document).scrollLeft();          winY=$("#box").offset().top-$(document).scrollTop();          if(drafting==false){            offX=mouseX-winX;            offY=mouseY-winY;          }          x=mouseX-offX;          y=mouseY-offY;          $("#box").css({'left':x,'top':y});        });        $(document).mouseup(function(event){          event.stopPropagation();          drafting=false;        });        });    </script>  </head>  <body>    <div id="box"></div>    <div id="out"></div>  </body></html>

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun，可得到如下測試效果：