Controll Draggable item with Draggable another Draggable item

问题描述

我试图在用户移动可拖动项目 1 时移动可拖动项目 2，并在切换项目 2 的水平顺序时使用拖动动画。 我在 ref 中保存了第二个可拖动菜单传感器 api，当项目 1 更改顺序时，我调用传感器 api 并将元素 2 向右移动。

主要可拖动项目

  const sensorAPIRef = useRef(null);

<DragDropContext
        onDragEnd={onDragEnd}
        onDragStart={onDragStart}
        onDragUpdate={(element) => {
          const api = sensorAPIRef.current;

          if (!api) {
            console.log('api is invalid');
            return;
          }

          const preDrag = api.tryGetLock(`${element.draggableId}s`);
     
          if (!preDrag) {
            console.log('Failed to get lock');
            return;
          }

          const drag = preDrag.snapLift();
          drag.moveRight();
          drag.drop();
        }}>
        <Droppable droppableId="droppable" direction="horizontal">
          {(provided) => {
            return (
              <div className={styles.content} ref={provided.innerRef} {...provided.droppableProps}>
                <div className={styles.content__wrapper} ref={carousel} onScroll={scrollHandler}>
                  {selectedCards.map((item,index) => {
                    return (
                      <Draggable key={item.id} draggableId={`${item.id}-id`} index={index}>
                        {(provided) => {
                          return (
                            <Card
                              key={item.id}
                              ref={provided.innerRef}
                              viewgallery={viewgallery}
                              drag={provided.dragHandleProps}
                              {...provided.draggableProps}
                              {...item}
                            />
                          );
                        }}
                      </Draggable>
                    );
                  })}
                  {provided.placeholder}
                </div>
              </div>
            );
          }}
        </Droppable>
      </DragDropContext>

  <DragDropContext sensors={[sensors={[
      (api) => {
        sensorAPIRef.current = api;
      },]}]}>
    <Droppable droppableId="droppable" direction="horizontal">
      {(provided) => {
        return (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            <div className={styles.content__wrapper} ref={carousel} onScroll={scrollHandler}>
              {selectedCards.map((item,index) => {
                return (
                  <Draggable isDragdisabled={false} key={item.id} draggableId={`${item.id}-ids`} index={index}>
                    {(provided) => {
                      return (
                        <div
                          key={item.id}
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          {...item}>
                          {item.id}
                        </div>
                      );
                    }}
                  </Draggable>
                );
              })}
              {provided.placeholder}
            </div>
          </div>
        );
      }}
    </Droppable>
  </DragDropContext>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）