JavaScript 实现鼠标拖动元素实例代码

下面就给您详细讲解一下“JavaScript 实现鼠标拖动元素实例代码”的攻略。

什么是鼠标拖动元素

鼠标拖动元素是指利用鼠标对网页上的某个元素进行拖动操作，把元素从一个位置移到另一个位置。在前端开发中，鼠标拖动元素经常被用于实现拖拽排序、拖拽上传等功能。

实现鼠标拖动元素的基本步骤

实现鼠标拖动元素的基本步骤如下：

给需要拖动的元素添加鼠标按下的事件监听器mousedown，用于记录鼠标按下时的位置；
给文档添加鼠标移动的事件监听器mousemove，用于计算元素位移的距离；
给文档添加鼠标松开的事件监听器mouseup，用于取消拖动状态。

鼠标按下事件处理函数

下面是一个示例的鼠标按下事件处理函数代码：

let element = document.getElementById('element');

element.addEventListener('mousedown', function (event) {
  event.preventDefault();
  element.style.position = 'absolute';
  element.style.zIndex = 999;

  let startX = event.clientX;
  let startY = event.clientY;

  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);

  function handleMouseMove(event) {
    let deltaX = event.clientX - startX;
    let deltaY = event.clientY - startY;

    element.style.left = parseInt(element.style.left) + deltaX + 'px';
    element.style.top = parseInt(element.style.top) + deltaY + 'px';

    startX = event.clientX;
    startY = event.clientY;
  }

  function handleMouseUp(event) {
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  }
});

代码中，首先通过document.getElementById方法获得拖动的元素element，然后给element添加mousedown事件监听器，当鼠标按下时，函数会执行以下操作：

阻止默认的鼠标拖动事件；
把元素的position属性设置为absolute，用于设置元素的绝对定位；
把元素的zIndex属性设置为999，用于设置元素的堆叠顺序；
记录鼠标按下时的位置startX和startY；
给document添加mousemove事件监听器handleMouseMove和mouseup事件监听器handleMouseUp。

鼠标移动事件处理函数

下面是一个示例的鼠标移动事件处理函数代码：

function handleMouseMove(event) {
  let deltaX = event.clientX - startX;
  let deltaY = event.clientY - startY;

  element.style.left = parseInt(element.style.left) + deltaX + 'px';
  element.style.top = parseInt(element.style.top) + deltaY + 'px';

  startX = event.clientX;
  startY = event.clientY;
}

代码中，当mousemove事件发生时，函数会执行以下操作：

计算鼠标的水平和垂直移动距离deltaX和deltaY；
把元素的left和top属性分别加上deltaX和deltaY的值，并附上px单位；
更新startX和startY，以记录当前的鼠标位置。

鼠标松开事件处理函数

下面是一个示例的鼠标松开事件处理函数代码：

function handleMouseUp(event) {
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
}

代码中，当mouseup事件发生时，函数会移除document的mousemove和mouseup事件监听器。

示例一

下面是一个基于jQuery实现鼠标拖动元素的例子。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery实现鼠标拖动元素实例代码</title>
</head>
<body>
  <div id="drag" class="drag">我可以拖动</div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      let dragging = false;
      let target = null;
      let startX = 0;
      let startY = 0;

      $(document).on('mousedown', '.drag', function(e) {
        startX = e.pageX - $(this).offset().left;
        startY = e.pageY - $(this).offset().top;
        target = $(e.target);
        dragging = true;
      });

      $(document).on('mousemove', function(e) {
        if (dragging) {
          target.offset({
            top: e.pageY - startY,
            left: e.pageX - startX,
          });
        }
      });

      $(document).on('mouseup', function() {
        target = null;
        dragging = false;
      });
    });
  </script>
</body>
</html>

代码中，利用jQuery实现了鼠标按下、鼠标移动和鼠标松开事件的监听和处理。

示例二

下面是一个基于Vue.js实现鼠标拖动元素的例子。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vue.js实现鼠标拖动元素实例代码</title>
</head>
<body>
  <div id="app">
    <div class="drag" :style="{top: position.y + 'px', left: position.x + 'px'}" @mousedown="handleMouseDown">
      我可以拖动
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        dragging: false,
        startX: 0,
        startY: 0,
        position: {
          x: 0,
          y: 0
        }
      },
      methods: {
        handleMouseDown: function(e) {
          this.startX = e.pageX - this.position.x;
          this.startY = e.pageY - this.position.y;
          this.dragging = true;

          window.addEventListener('mousemove', this.handleMouseMove);
          window.addEventListener('mouseup', this.handleMouseUp);
        },
        handleMouseMove: function(e) {
          if (this.dragging) {
            this.position.x = e.pageX - this.startX;
            this.position.y = e.pageY - this.startY;
          }
        },
        handleMouseUp: function() {
          this.dragging = false;

          window.removeEventListener('mousemove', this.handleMouseMove);
          window.removeEventListener('mouseup', this.handleMouseUp);
        }
      }
    });
  </script>
</body>
</html>

代码中，利用Vue.js实现了鼠标按下、鼠标移动和鼠标松开事件的监听和处理。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 实现鼠标拖动元素实例代码 - Python技术站