如何使用@hello-pangea/dnd（以前的react-beautiful-dnd）调整触摸灵敏度

Question

我正在使用 hello-pangea/dnd 制作一个可拖动列表，它适用于网络，但在移动设备上，您必须在注册之前触摸某个项目。有没有办法让它变得更敏感？我用谷歌搜索并询问了 chatgpt，但没有运气。谢谢！

我尝试使用 onTouchStart 引发 onMouseDown 事件，但这没有任何作用。情况仍然是，开始滑动列表项不会注册为触摸。

onTouchStart={(e) =>provided.dragHandleProps.onMouseDown(e)}

Answer 1

import ReactDOM from "react-dom";
import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";

// Static items data
const static_items = [
  {
    id: 1,
    content: "item 1 content",
    subItems: [
      { id: 10, content: "SubItem 10 content", subItems: [] },
      { id: 11, content: "SubItem 11 content", subItems: [] },
    ],
  },
  {
    id: 2,
    content: "item 2 content",
    subItems: [
      { id: 20, content: "SubItem 20 content", subItems: [] },
      { id: 21, content: "SubItem 21 content", subItems: [] },
    ],
  },
];

const App = () => {
  const [items, setItems] = useState(static_items);

  const onDragEnd = (result) => {
    const { destination, source, type } = result;
    if (!destination) return;

    // If the parent item is dragged
    if (type === "parent") {
      const reorderedItems = Array.from(items);
      const [removedItem] = reorderedItems.splice(source.index, 1);
      reorderedItems.splice(destination.index, 0, removedItem);
      setItems(reorderedItems);
    }
    // If a subItem is dragged
    else if (type === "subItem") {
      const parentIndex = source.droppableId; // Parent index
      const newItems = Array.from(items);
      const parent = newItems[parentIndex];
      const [removedSubItem] = parent.subItems.splice(source.index, 1);
      parent.subItems.splice(destination.index, 0, removedSubItem);
      setItems(newItems);
    }
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="parent" type="parent">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable
                draggableId={String(item.id)}
                index={index}
                key={item.id}
              >
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      ...provided.draggableProps.style,
                      padding: "8px",
                      marginBottom: "8px",
                      border: "1px solid black",
                      borderRadius: "4px",
                      display: "flex",
                      flexDirection: "column",
                    }}
                  >
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <h3>{item.content}</h3>
                      {/* Add a drag handle icon */}
                      <div
                        {...provided.dragHandleProps}
                        style={{
                          cursor: "grab",
                          padding: "5px",
                          backgroundColor: "gray",
                          borderRadius: "50%",
                        }}
                      >
                        {/* You can replace this with an icon or SVG */}
                        &#x21C5; {/* This is the ↕ symbol */}
                      </div>
                    </div>

                    <Droppable droppableId={String(index)} type="subItem">
                      {(provided) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.droppableProps}
                          style={{ paddingLeft: "20px" }}
                        >
                          {item.subItems.map((subItem, subIndex) => (
                            <Draggable
                              draggableId={String(subItem.id)}
                              index={subIndex}
                              key={subItem.id}
                            >
                              {(provided) => (
                                <div
                                  ref={provided.innerRef}
                                  {...provided.draggableProps}
                                  {...provided.dragHandleProps}
                                  style={{
                                    ...provided.draggableProps.style,
                                    padding: "8px",
                                    marginBottom: "4px",
                                    border: "1px dashed gray",
                                    borderRadius: "4px",
                                    display: "flex",
                                    justifyContent: "space-between",
                                  }}
                                >
                                  <div>{subItem.content}</div>
                                  {/* Add a drag handle icon for subItems */}
                                  <div
                                    {...provided.dragHandleProps}
                                    style={{
                                      cursor: "grab",
                                      padding: "5px",
                                      backgroundColor: "lightgray",
                                      borderRadius: "50%",
                                    }}
                                  >
                                    &#x21C5; {/* This is the ↕ symbol */}
                                  </div>
                                </div>
                              )}
                            </Draggable>
                          ))}
                          {provided.placeholder}
                        </div>
                      )}
                    </Droppable>
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default App;