拖放无法正常工作 - 元素粘连且重新排序不准确

Question

首先，对于这个项目，我使用react-beautiful-dnd、chakra ui 和nextjs。这是显示问题的视频链接：https://youtu.be/8maSmqahjfw。我尝试过 ondragupdate、ondragstart 和 ondragend、各种重新排序，但仍然无法完全工作。我想知道是否是因为我也在使用 chakra ui，或者我的 Flex chakra 项目非常大，内容很多。这是我的可拖动代码，我在其中循环并添加链接：

setLinks((prevRows) => [
            ...prevRows,

            <Draggable
              key={element.order}
              draggableId={`draggable-${element.order}`}
              index={element.order}
            >
              {(provided, snapshot) => (
                <Flex
                  direction={"column"}
                  padding={3}
                  justifyContent={"center"}
                  alignItems={"center"}
                  width={{ base: "95%", md: "70%", lg: "70%" }}
                  backgroundColor={"#fff"}
                  boxShadow={"0px 0px 3px 0px #b0b0b0"}
                  borderRadius={10}
                  // ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  ref={provided.innerRef}
                  //opacity={snapshot.isDragging ? 0.5 : 1}
                >
                  <Flex
                    width={"100%"}
                    justifyContent={"space-between"}
                    alignItems={"center"}
                  >
                    <Flex
                      alignItems={"center"}
                      justifyContent={"center"}
                      gap={1}
                    >
                      <Button
                        colorScheme="transparent"
                        _hover={{
                          cursor: "grab",
                          //backgroundColor: "#efefef",
                        }}
                        _active={{
                          cursor: "grabbing",
                        }}
                      >
                        <DragHandleIcon color={"black"} />
                      </Button>
                      <Flex
                        position="relative"
                        w={{
                          base: "100px",
                          md: "120px",
                          lg: "140px",
                        }}
                        h={{ base: "60px", md: "80px", lg: "100px" }}
                        bg="transparent"
                        borderRadius="none"
                        alignItems={"center"}
                        justifyContent={"center"}
                        overflow="hidden"
                        border={"1px dashed black"}
                      >
                        {/* {"Url " + console.log(urls[i])} */}
                        {urls[i] != null ? (
                          <>
                            <Image
                              src={urls[i]}
                              alt="Selected Image"
                              objectFit="cover"
                              w="100%"
                              h="100%"
                            />
                          </>
                        ) : (
                          <Box
                            //p={6}
                            textAlign="center"
                            backgroundColor={"none"}
                          >
                            <Text fontSize={"10pt"} fontWeight={700}>
                              No Image
                            </Text>
                          </Box>
                        )}
                      </Flex>
                      <Flex
                        direction={"column"}
                        alignItems={"flex-start"}
                        justifyContent={"center"}
                        width={"100%"}
                      >
                        <Input
                          value={element.title}
                          border={"none"}
                          fontSize={"12pt"}
                          //maxWidth={"100%"}
                          //isReadOnly={!selectedInput || selectedInput !== input}
                          isReadOnly={true}
                          //onFocus={() => setSelectedOrder(i)}
                        />
                        <Input
                          isReadOnly={true}
                          type={"url"}
                          border={"none"}
                          fontSize={"9pt"}
                          value={element.url}
                          //maxWidth={"100%"}
                        />
                      </Flex>
                    </Flex>
                    <Flex
                      direction={"column"}
                      alignItems={"center"}
                      justifyContent={"center"}
                      gap={5}
                    >
                      <Switch
                        defaultChecked={element.active}
                        value={element.order}
                        onChange={handleCheckboxChange}
                      />
                      <Menu>
                        <MenuButton as={Button} colorScheme="transparent">
                          <Image
                            src="/triple.png"
                            alt={"triple dots"}
                            width={22}
                            height={22}
                          />
                        </MenuButton>
                        <MenuList>
                          <MenuItem onClick={() => takeCharge(element.order)}>
                            Edit
                          </MenuItem>
                          <MenuItem
                            onClick={() => {
                              setDeleteIn(element.order);
                              onOpen4();
                            }}
                          >
                            Delete
                          </MenuItem>
                        </MenuList>
                      </Menu>
                    </Flex>
                  </Flex>
                </Flex>
              )}
            </Draggable>,
          ]);

这是用于拖放上下文和可放置的代码，我在提供的占位符方面也遇到了一些麻烦，因为当我尝试拖动其他项目时，弹性项目有时会彼此粘在一起，如视频所示：

<DragDropContext onDragEnd={onDragEnd}>
              <Droppable droppableId="droppable">
                {(provided, snapshot) => (
                  <Flex
                    direction={"column"}
                    alignItems={"center"}
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    width={"100%"}
                    height={"100%"}
                    gap={8}
                  >
                    {links}
                    {provided.placeholder}
                  </Flex>
                )}
              </Droppable>
            </DragDropContext>

最后，这是我的 ondragend 函数，我用它在拖动完成后对所有元素重新排序：

const onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    const newItems = Array.from(links);
    const [reorderedItem] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, reorderedItem);
    setLinks(newItems);
  };

Answer 1

尝试禁用 ，因为拖放机制执行了 2 次，可能会导致一些错误。

最好的，格热戈日