中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery實現的鼠標拖動浮層功能示例【拖動div等任何標簽】

發布時間:2020-10-10 21:12:23 來源:腳本之家 閱讀:214 作者:csmzl 欄目:web開發

本文實例講述了jQuery實現的鼠標拖動浮層功能。分享給大家供大家參考,具體如下:

拖動浮層(div等任何標簽)

之前項目做到一個彈出層需要一個拖動功能,上網上查了資料,發現很多方法,但是感覺都很繁瑣,有的甚至沒看懂。看了幾個方法后發現基本上都是使用mousedown、mousemove和mouseup這三個函數來寫的,然后就自己寫了個移動div的方法。

先用mousedown來判斷是否要開啟移動,然后通過mousemove來獲得移動的距離,實現移動;最后通過mouseup事件來判斷移動結束了。

完整代碼實例:

<html>
<head>
  <meta charset="utf-8"></meta>
  <title>Drag Div</title>
  <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
  <div id="moveDiv" >
    <div id="moveBar" ></div>
  </div>
  <script type="text/javascript">
    var dragJob=false;
    $(document).on("mousedown", '#moveBar', function (e) {
      dragJob = true;
    });
    document.onmousemove = function (e) {
    if (dragJob) {
      var e = e || window.event;
      var height = $(document.body).height();
      var width = $(window).width();
      var widthJob = $("#moveDiv").width();
      var heightJob = $("#moveDiv").height();
      var left = e.clientX - widthJob / 2;
      var top = e.clientY - 18 + $(document).scrollTop();
      if (top >= 0 && top < height - heightJob) {
        $("#moveDiv").css("top", top);
      }
      if (left >= 0 && left < width - widthJob) {
        $("#moveDiv").css("left", left);
      }
      return false;
    }
  };
  $(document).mouseup(function (e) {
    dragJob = false;
  });
  </script>
</body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼,可獲得如下運行效果:

jQuery實現的鼠標拖動浮層功能示例【拖動div等任何標簽】

更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

裕民县| 鲁山县| 潢川县| 资讯| 青河县| 贡山| 武功县| 万山特区| 陈巴尔虎旗| 襄汾县| 南涧| 蚌埠市| 田林县| 榕江县| 阿鲁科尔沁旗| 阿拉善左旗| 神农架林区| 霍邱县| 富民县| 重庆市| 肃南| 阿尔山市| 嘉鱼县| 团风县| 灵丘县| 慈溪市| 横山县| 宜都市| 名山县| 丽水市| 巨鹿县| 湟源县| 丰县| 思茅市| 寿阳县| 石家庄市| 天水市| 海南省| 灵丘县| 芦溪县| 黄冈市|