JavaScript 拖拽实现（附注释），最经典简单短小精悍！

2023年6月11日上午4:01 • JavaScript

以下是JavaScript拖拽实现的详细攻略：

概述

拖拽实现是网页中常见的交互效果，它的实现原理是借助JavaScript事件和DOM操作。本文将带您全面了解JavaScript拖拽的实现方法。

基本原理

拖拽实现的基本原理如下：

给需要拖拽的元素绑定mousedown事件。
鼠标按下时，记录鼠标相对元素位置，并给document绑定mousemove和mouseup事件。
鼠标移动时，计算元素新的位置，根据新位置重新设置元素的left和top值。
鼠标松开时，解除document的mousemove和mouseup事件绑定。

代码实现

以下是一份实现拖拽效果的代码：

// 获取需要拖拽的元素
var drag = document.getElementById("drag");

// 鼠标按下时记录鼠标相对元素位置
drag.onmousedown = function(e) {
  var disX = e.clientX - drag.offsetLeft;
  var disY = e.clientY - drag.offsetTop;

  // 绑定document的mousemove事件
  document.onmousemove = function(e) {
    // 计算元素新的位置
    var left = e.clientX - disX;
    var top = e.clientY - disY;

    // 重新设置元素位置
    drag.style.left = left + "px";
    drag.style.top = top + "px";
  };

  // 绑定document的mouseup事件
  document.onmouseup = function() {
    // 解除mousemove和mouseup事件绑定
    document.onmousemove = null;
    document.onmouseup = null;
  };
};

此代码实现了一个简单的拖拽效果，当鼠标按下需要拖拽的元素时，将元素的位置记录下来，并绑定document的mousemove和mouseup事件，当鼠标移动时，通过计算新的位置并设置元素的left和top值来实现拖拽效果。当鼠标松开时，解除document的mousemove和mouseup事件绑定。

示例说明

以下是两个示例，分别是实现可以拖动的按钮和拖动元素修改透明度的功能：

示例1：实现可以拖动的按钮

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>拖拽按钮</title>
  <style>
    #drag-btn {
      position: absolute;
      left: 100px;
      top: 100px;
      background-color: #f00;
      color: #fff;
    }
  </style>
</head>
<body>
  <button id="drag-btn">可以拖动的按钮</button>

  <script>
    var dragBtn = document.getElementById("drag-btn");

    dragBtn.onmousedown = function(e) {
      var disX = e.clientX - dragBtn.offsetLeft;
      var disY = e.clientY - dragBtn.offsetTop;

      document.onmousemove = function(e) {
        var left = e.clientX - disX;
        var top = e.clientY - disY;

        dragBtn.style.left = left + "px";
        dragBtn.style.top = top + "px";
      };

      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  </script>
</body>
</html>

这个示例实现了一个可以拖拽的按钮，当鼠标按下时，可以拖拽按钮，并更新按钮的位置。

示例2：拖动元素修改透明度的功能

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>拖动修改透明度</title>
  <style>
    #drag-ele {
      position: absolute;
      left: 100px;
      top: 100px;
      background-color: #f00;
      width: 200px;
      height: 200px;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div id="drag-ele"></div>

  <script>
    var dragEle = document.getElementById("drag-ele");
    var flag = false;

    dragEle.onmousedown = function(e) {
      flag = true;
      var disX = e.clientX - dragEle.offsetLeft;
      var disY = e.clientY - dragEle.offsetTop;

      document.onmousemove = function(e) {
        var left = e.clientX - disX;
        var top = e.clientY - disY;

        dragEle.style.left = left + "px";
        dragEle.style.top = top + "px";

        // 获取元素的当前位置
        var x = dragEle.offsetLeft;
        var y = dragEle.offsetTop;

        // 计算元素离页面顶部和左侧的距离
        var disTop = y;
        var disLeft = x;

        // 计算元素的总高度和总宽度
        var totalH = window.innerHeight;
        var totalW = window.innerWidth;

        // 计算元素离页面底部和右侧的距离
        var disBottom = totalH - y - dragEle.offsetHeight;
        var disRight = totalW - x - dragEle.offsetWidth;

        // 根据元素距顶部、左侧、右侧和底部的距离计算透明度
        var rate = (disTop + disLeft + disRight + disBottom) / (totalH + totalW);
        dragEle.style.opacity = rate.toFixed(2);
      };

      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
        flag = false;
      };
    };

    // 停止鼠标拖动时，如果元素不在可视区域内，即flag为false时，清除document的mousemove和mouseup事件绑定
    document.onmousemove = function(e) {
      if (!flag) {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    };
  </script>
</body>
</html>

这个示例实现了一个拖动元素透明度发生变化的功能，当鼠标按下时，可以拖动元素，并且根据元素离顶部、左侧、右侧和底部的距离计算元素的透明度，并更新元素的位置和透明度。

以上就是JavaScript拖拽实现的完整攻略，希望对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 拖拽实现（附注释），最经典简单短小精悍！ - Python技术站