多個元素的動態Javascript代碼-有解無憂

此腳本為滑塊添加了可拖動功能，但問題是當我們有多個滑塊時，只有第一個滑塊有效，其余滑塊無效。如何更改此腳本，以便頁面上的任意數量的滑塊都可以單獨拖動并正常作業？？？

實際上，目標是在腳本中定義一個類而不是 id，通過將其應用于任何滑塊元素，滑塊可以是可拖動的？？？

   document.addEventListener('DOMContentLoaded', function () {
      const ele = document.getElementById('container');
      ele.style.cursor = 'grab';

      let pos = { top: 0, left: 0, x: 0, y: 0 };

      const mouseDownHandler = function (e) {
        ele.style.cursor = 'grabbing';
        ele.style.userSelect = 'none';

        pos = {
          left: ele.scrollLeft,
          top: ele.scrollTop,
          // Get the current mouse position
          x: e.clientX,
          y: e.clientY,
        };

        document.addEventListener('mousemove', mouseMoveHandler);
        document.addEventListener('mouseup', mouseUpHandler);
      };

      const mouseMoveHandler = function (e) {
        // How far the mouse has been moved
        const dx = e.clientX - pos.x;
        const dy = e.clientY - pos.y;

        // Scroll the element
        ele.scrollTop = pos.top - dy;
        ele.scrollLeft = pos.left - dx;
      };

      const mouseUpHandler = function () {
        ele.style.cursor = 'grab';
        ele.style.removeProperty('user-select');

        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
      };

      // Attach the handler
      ele.addEventListener('mousedown', mouseDownHandler);
    });

#container {
      margin: 50px auto;
      border: 2px solid #ccc;
      border-radius: 10px;
      display: flex;
      width: 80%;
      gap: 1rem;
    }

    .item {
      border: 1px solid #cbd5e0;
      font-size: 2.25rem;
    }

    small {
      width: 150px;
      height: 150px;
      align-items: center;
      display: flex;
      justify-content: center;
    }

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>HTML DOM - Drag to scroll</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/css/demo.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&family=Source Code Pro&display=swap" />

</head>

<body>

  <div id="container" style=" overflow: auto; padding: 1rem">

    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>

  </div>


<div id="container" style=" overflow: auto; padding: 1rem">

    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>

  </div>


</body>

</html>

uj5u.com熱心網友回復：

您只需要使用document.querySelectorAll來獲取您想要的所有元素而不是一個，并將其余函式包裝在一個forEach函式中：

document.addEventListener('DOMContentLoaded', function () {
    [...document.querySelectorAll('#container')].forEach(ele => {
        // your code
    });
});

document.addEventListener('DOMContentLoaded', function () {
    [...document.querySelectorAll('#container')].forEach(ele => {
        ele.style.cursor = 'grab';

        let pos = { top: 0, left: 0, x: 0, y: 0 };

        const mouseDownHandler = function (e) {
            ele.style.cursor = 'grabbing';
            ele.style.userSelect = 'none';

            pos = {
                left: ele.scrollLeft,
                top: ele.scrollTop,
                // Get the current mouse position
                x: e.clientX,
                y: e.clientY,
            };

            document.addEventListener('mousemove', mouseMoveHandler);
            document.addEventListener('mouseup', mouseUpHandler);
        };

        const mouseMoveHandler = function (e) {
            // How far the mouse has been moved
            const dx = e.clientX - pos.x;
            const dy = e.clientY - pos.y;

            // Scroll the element
            ele.scrollTop = pos.top - dy;
            ele.scrollLeft = pos.left - dx;
        };

        const mouseUpHandler = function () {
            ele.style.cursor = 'grab';
            ele.style.removeProperty('user-select');

            document.removeEventListener('mousemove', mouseMoveHandler);
            document.removeEventListener('mouseup', mouseUpHandler);
        };

        // Attach the handler
        ele.addEventListener('mousedown', mouseDownHandler);
    });
});

#container {
      margin: 50px auto;
      border: 2px solid #ccc;
      border-radius: 10px;
      display: flex;
      width: 80%;
      gap: 1rem;
    }

    .item {
      border: 1px solid #cbd5e0;
      font-size: 2.25rem;
    }

    small {
      width: 150px;
      height: 150px;
      align-items: center;
      display: flex;
      justify-content: center;
    }

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>HTML DOM - Drag to scroll</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/css/demo.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&family=Source Code Pro&display=swap" />

</head>

<body>

  <div id="container" style=" overflow: auto; padding: 1rem">

    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>

  </div>


<div id="container" style=" overflow: auto; padding: 1rem">

    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>
    <div class="item"><small>12</small></div>

  </div>


</body>

</html>

但是您應該更改id為，class因為您的 DOM 中不應有重復的 id。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/329358.html

標籤：javascript 功能滑块

上一篇：從函式呼叫傳遞引數或從變數傳遞引數之間的C 區別

下一篇：如何增加（或訪問）Gobleve搜索引擎的結果？