c语言编程笔录

首页 >   > 笔记大全

笔记大全

html5悬浮按钮 可拖拽

更新时间：2023-06-16

需求背景

随着互联网的不断发展，网站的用户体验越来越重要。悬浮按钮因其在界面中占用很小的空间但具有重要功能，被广泛使用。随着HTML5的推出，悬浮按钮也逐渐升级到了可拖拽的功能，有效提高了用户体验。

实现思路

实现一个HTML5悬浮按钮并具有可拖拽功能，需考虑以下几个方面：

  1. 创建一个HTML元素用于实现悬浮按钮，例如<div>或<button>
  2. 使用CSS设置悬浮按钮的位置、背景、样式等
  3. 使用JavaScript或jQuery实现按钮的拖拽功能
  4. 在拖拽时，需要对鼠标与按钮的位置进行计算，以确保按钮能够正确拖动

代码实现

  <html>
    <head>
      <style>
        .button {
          position: fixed;
          bottom: 0;
          right: 0;
          background-color: orange;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          text-align: center;
          vertical-align: middle;
          line-height: 50px;
          color: #fff;
          cursor: pointer;
          z-index: 9999;
        }
      </style>
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </head>
    <body>
      <div class="button" id="drag">按钮</div>
      <script>
        $(document).ready(function() {
          var dragging = false;
          var iX, iY;
          $("#drag").mousedown(function(e) {
            dragging = true;
            iX = e.clientX - this.offsetLeft;
            iY = e.clientY - this.offsetTop;
            this.setCapture && this.setCapture();
            return false;
          });
          $(document).mousemove(function(e) {
            if (dragging) {
              var e = e || window.event;
              var oX = e.clientX - iX;
              var oY = e.clientY - iY;
              $("#drag").css({"left":oX + "px", "top":oY + "px"});
              return false;
            }
          });
          $(document).mouseup(function(e) {
            dragging = false;
            $("#drag")[0].releaseCapture();
            e.cancelBubble = true;
          });
        });
      </script>
    </body>
  </html>

以上代码实现了一个悬浮按钮并具有可拖拽功能。实现方式为：在HTML中创建一个<div>元素，并使用CSS设置其背景、位置等样式，使用jQuery实现了按钮的拖拽功能。在拖拽时，通过计算鼠标与按钮的位置，实现了按钮的正确拖动。用户可以根据需要进行修改、改进。

图文推荐