fix(match): support touch in mobile

ikkz · Jan 28, 2025 · 53e9495 · 53e9495
1 parent 6557869
commit 53e9495
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -4,12 +4,14 @@ For the directly usable version, please download it from the [release](https://g
 
 > [!TIP]
 > Each template has multiple variants available for download, with the filename format being `{template}.{locale}.{field}.apkg`
+
 ```
 template:
 - mcq   : Multiple choice question (6 options)
 - mcq_10: Multiple choice question (10 options)
 - tf    : True or false
 - basic : Basic Q&A
+- match : Drag and drop interactive matching
 
 locale:
 - zh: 中文
@@ -51,6 +53,29 @@ Note: When all options are empty, the template will behave as a basic Q&A templa
 | answer      | This is the answer to the question. For multiple-choice questions, please write the uppercase letter of the correct answer, for example, A. For multiple-choice questions, write all the correct answer letters, such as ABC. |
 | note        | You can fill in detailed explanations, notes, etc., here.                                                                                                                                                                     |
 
+### Match
+
+#### Fields
+
+Notes for `items`
+
+- Each line starts with a category, followed by two colons separating it from the items under that category
+- Each item is separated by two commas
+
+An example:
+
+```
+Mammals::Tiger,,Elephant
+Birds::Penguin,,Parrot
+Reptiles::Cobra,,Crocodile
+```
+
+| Field name | Description                                                                                                   |
+| ---------- | ------------------------------------------------------------------------------------------------------------- |
+| question   | This is the stem of the question. It supports various content formats in Anki, including bold, formulas, etc. |
+| items      | The category and items                                                                                        |
+| note       | You can fill in detailed explanations, notes, etc., here.                                                     |
+
 ### True or False
 
 #### Fields

diff --git a/src/entries/match.tsx b/src/entries/match.tsx
@@ -5,7 +5,15 @@ import { useCrossState } from '@/hooks/use-cross-state';
 import { FIELD_ID } from '@/utils/const';
 import { domToText } from '@/utils/dom-to-text';
 import { isFieldEmpty } from '@/utils/field';
-import { useDraggable, useDroppable, DndContext } from '@dnd-kit/core';
+import {
+  useDraggable,
+  useDroppable,
+  DndContext,
+  useSensors,
+  useSensor,
+  MouseSensor,
+  TouchSensor,
+} from '@dnd-kit/core';
 import useCreation from 'ahooks/es/useCreation';
 import useMemoizedFn from 'ahooks/es/useMemoizedFn';
 import * as t from 'at/i18n';
@@ -143,16 +151,18 @@ const Playground: FC<{ collections: Collection[] }> = ({ collections }) => {
   });
 
   const [back] = useBack();
+  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
 
   return (
     <DndContext
+      sensors={sensors}
       onDragEnd={(event) => {
         if (event.over) {
           onDrop(event.active.id.toString(), event.over.id.toString());
         }
       }}
     >
-      <div className="mt-2">
+      <div className={clsx('mt-2', back ? '' : 'select-none')}>
         <div className="flex flex-wrap gap-2">
           {items.map((item) => (
             <ItemComponent key={item.id} item={item} />