• javaScript：拖拽效果

    目录

    前言

    实现思路 

    获取事件对象和坐标点：

    配合定位：

    鼠标事件监听：

    拖拽过程：

    停止拖拽：

    代码实现（代码讲解）

    前言

    JavaScript的拖拽效果是一种常见的交互技术，它允许用户通过鼠标操作在网页中拖拽（拖动）元素。这种技术可以为网站和应用程序带来多种用途和好处，如：增强用户体验，实现拖放功能，图形设计和游戏，排序和重新排列，数据可视化，创建可自定义界面等等。总之，JavaScript的拖拽效果是一种强大的交互技术，可以提高用户体验、增加网站或应用程序的功能性，并创造更富有创意和直观的用户界面。

    实现思路 

    1. 获取事件对象和坐标点：

      • 当鼠标按下时，触发 mousedown 事件。
      • 在 mousedown 事件处理程序中，可以使用事件对象来获取鼠标点击的坐标点，通常使用 event.clientX 和 event.clientY 属性来获取鼠标相对于视窗的坐标点。

    2. 配合定位：

      • 要实现拖拽效果，通常需要操作被拖拽的元素的位置。这可以通过设置元素的 style.left 和 style.top 属性来实现。
      • 在 mousedown 事件处理程序中，可以记录鼠标点击时元素的初始位置（通常是元素的左上角坐标）。

    3. 鼠标事件监听：

      • 在 mousedown 事件中，将鼠标的 mousemove 和 mouseup 事件监听器附加到 document 上。这是因为当用户按住鼠标拖动元素时，鼠标可能会离开元素，但我们仍然要捕获移动和释放事件。

    4. 拖拽过程：

      • 在 mousemove 事件处理程序中，计算鼠标移动的距离（新坐标点与初始坐标点之间的差值）。
      • 使用这个差值来更新元素的位置，将初始位置坐标与差值相加，并将结果分别赋给 style.left 和 style.top。
      • 这样，元素将跟随鼠标的移动而移动。

    5. 停止拖拽：

      • 当用户释放鼠标按钮时，触发 mouseup 事件。
      • 在 mouseup 事件处理程序中，移除 mousemove 和 mouseup 事件监听器，以停止拖拽操作。

    代码实现（代码讲解）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>拖拽效果title>
    7.     <style>
    8.         * {
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12.         .wp {
    13.             width: 200px;
    14.             height: 200px;
    15.             background: #04be02;
    16.             position: absolute;
    17.             left: 100px;
    18.             top: 100px;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <div class="wp">div>
    24. body>
    25. html>
    26. <script>
    27. // 获取拖拽元素
    28. let wp = document.querySelector('.wp')
    29.  
    30. // 当鼠标按下时
    31. wp.onmousedown = function(){
    32.     // 计算鼠标点击点距离元素左边和上边的距离
    33.     let diX = event.clientX - wp.offsetLeft;
    34.     let diY = event.clientY - wp.offsetTop;
    35.     console.log(diX,diY);
    36.  
    37.     // 在文档上添加鼠标移动事件监听器
    38.     document.onmousemove = function(){
    39.         // 计算元素新的左上角坐标
    40.         let oLeft = event.clientX - diX;
    41.         let oTop = event.clientY - diY;
    42.         
    43.         // 限制元素不超出页面边界
    44.         if (oLeft <= 0) {
    45.             oLeft = 0;
    46.         }
    47.         if (oTop <= 0) {
    48.             oTop = 0;
    49.         }
    50.         let maxLeft = window.innerWidth - wp.offsetWidth;
    51.         let maxTop = window.innerHeight - wp.offsetHeight;
    52.         if (oLeft >= maxLeft) {
    53.             oLeft = maxLeft;
    54.         }
    55.         if (oTop >= maxTop) {
    56.             oTop = maxTop;
    57.         }
    58.         
    59.         // 设置元素的定位位置
    60.         wp.style.left = oLeft + 'px';
    61.         wp.style.top = oTop + 'px';
    62.     }
    63. }
    64.  
    65. // 当鼠标释放时，移除鼠标移动事件监听器，停止拖拽
    66. document.onmouseup = function(){
    67.     document.onmousemove = null;
    68. }
    69. script>

  • 相关阅读:
    FPGA 20个例程篇：14.千兆网口实现ICMP、UDP通信协议（下）
    Redis 内存优化神技，小内存保存大数据
    [附源码]java毕业设计高校创新创业服务平台
    C. Qualification Rounds（思维，特情）
    运行stable-diffusion-xl-refiner-1.0遇到version `GLIBCXX_3.4.29‘ not found的问题
    【通信误码】python实现-附ChatGPT解析
    数据结构与算法-选择排序
    Apache Hive 数据掩码函数教程
    【C语言基础】第02章_变量与进制
    【LeetCode:2095. 删除链表的中间节点 + 链表】
  • 原文地址：https://blog.csdn.net/qq_52799985/article/details/133743603