Оптимизация Drag and Drop

215

02 февраля 2022, 07:40

Вычитал на сайте о оптимизации Drag and Dorp в javascript. Не знаю, как реализовать.

Иногда красивее и удобнее - визуально перемещать не сам элемент, а его клон или макет. Например, переносимый объект очень сложен, и его передвижение целиком тормозит браузер и выглядит громоздко/неэстетично.

Сам элемент при этом скрывается display/visibility='none' или просто остается на месте, в зависимости от логики интерфейса.

Переносимый клон инициализуется в начале переноса и уничтожается в конце.

Answer 1

Теоретически, можно сделать скриншот DOM ноды и динамично подменить.

Практически, я создал около пятиста вложенных flex контейнеров с центровкой и на моем ноутбуке 2012 года все отлично работает.

<!DOCTYPE html>
<html>
  <head>
    <title>Drag and drop</title>
    <style>
      .red { background-color: red; }
      .green { background-color: green; }
      .blue { background-color: blue; }
      .root { position: fixed; }
      .box {
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        padding: 2px;
      }
      .box > * {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <script>
      (function() {
        const generateDraggable = (side = 500) => {
          const root = document.createElement('div');
          root.className = "red box root";
          [root.style.height, root.style.width] = new Array(2).fill(`${side}px`);
          let parent = root;
          for (let i = 0; i !== parseInt(side / 4); i += 1) {
            const child = document.createElement('div');
            const color = i % 2 === 0 ? 'red' : i % 3 === 0 ? 'green' : 'blue';
            child.className = `${color} box`;
            parent.appendChild(child);
            parent = child;
          }
          document.body.appendChild(root);
          document.addEventListener('mousemove', (e) => {
            const [x, y] = [e.clientX, e.clientY];
            [root.style.top, root.style.left] = [`${y}px`, `${x}px`];
            console.log(x, y);
          });
        };
        generateDraggable();
      })();
    </script>
  </body>
</html>

Посмотреть онлайн можно тут