主页 / 问题 / 1576586
Accepted
MIA
Asked:2024-04-17 19:19:12 +0000 UTC2024-04-17 19:19:12 +0000 UTC

可反应拖动一次移动多个元素

  • 772

我的项目使用react-draggable库，表格形式的数据（相同的可拖动元素）在屏幕上移动，并且可以记录它们的移动。是否可以使用此库选择多个元素并一次在屏幕上移动选定的元素？这就是代码的一部分：

           <Draggable
                onDrag={onDrag}
                onStop={onChangePositionHandler}
                nodeRef={nodeRef}
                position={{ x: table.position.x, y: table.position.y }}
                zIndex="8"
            >
                <div
                    className={styles.MainContainer}
                    id={table.name}
                >
                {table.name}
               </div>
            </Draggable>

这是一个在移动对象时触发的函数，允许您保存新的坐标。

const onChangePositionHandler = (event, dragElement) => {
        onStop();
        const changedTable = {
            id: table.id,
            name: table.name,
            isCreatedByUser: table.isCreatedByUser,
            isAssociator: table.isAssociator,
            color: tableColor,
            position: {
                x: dragElement.x,
                y: dragElement.y
            },
            columns: table.columns
        };

        onChangeTableHandler(changedTable, areaName);
    };

有一个想法是收集一组 Draggable 对象，然后移动整个数组。我只是不知道如何计算每个坐标的新坐标并分配它们。有人遇到过类似的问题吗？该项目还有react-zoom-pan-pinch 库，但它的包装器用于移动图中的所有表。你只需要移动你最喜欢的。如何附加这样的功能？

javascript

1 个回答

  1. Best Answer

    您可以选择多个元素并一次在屏幕上移动选定的元素。组件创建的每个元素Draggable都有一个位置，并且主动拖动的元素有一个移动范围 -deltaX因此deltaY，解决方案由 2 点组成：

    1. 通过更改状态来选择必要的元素
    2. 拖动时，获取增量并将它们传递到上方的某个位置，然后将所有活动增量的位置更改为这些增量

    简化形式如下所示：

    App.js - родитель

    import React, { useState } from 'react';
import DragElement from './DragElement'

function App() {
  const [delta, setDelta] = useState({x: 0, y: 0})

  return (
    <div className='App'>
      <DragElement
        text='Блок 1'
        changeDelta={setDelta}
        delta={delta}
      />
      <DragElement
        text='Блок 2'
        changeDelta={setDelta}
        delta={delta}
      />
    </div>
  );
}
export default App;

    子组件DragElement：

    import React, { useState, useEffect } from 'react';
import Draggable from 'react-draggable';

const DragElement = ({text, changeDelta, delta}) => {
  const [position, setPosition] = useState({x: 0, y: 0});
  const [active, setActive] = useState(false);

  const onDrag = (e, dragElement) => {
    changeDelta({x: dragElement.deltaX, y: dragElement.deltaY})
  };

  useEffect(() => {
    if (!active) return;
    setPosition( prev => ({ x: prev.x + (delta?.x || 0), y: prev.y + (delta?.y || 0)}) );
  }, [delta])

  return (
    <div>
      <Draggable
        position={position}
        onDrag={onDrag}
      >
        <div>
          <div>
            <button
              className={`button${active ? ' button--active' : ''}`}
              onClick={() => setActive(prev => !prev)}
            >
              {text}
            </button>
          </div>
        </div>
      </Draggable>
    </div>
  );
};

export default DragElement;

    但解决方案并不理想，建议尝试优化，以免重新渲染所有子组件，以及通过单击添加/删除 - 拖动时删除 Activity。

    编辑部分拖动

    • 1

相关问题