HTML のドラッグ & ドロップ API をそのままだとタッチデバイスで使えない件 (link) は、 mobile-drag-drop (GitHub) という polyfill でサクッと解決した。

下記の手順で SAFE Stack の ToDo アプリに mobile-drag-drop を取り込んだだけで、 PC のブラウザで動作確認したドラッグ & ドロップの実装が iPhone ・ iPad でも利用できた。

  • 動作確認したタッチデバイス

    機種 OS polyfill の要否
    iPhone 7 Plus iOS 14.7.1 必要
    iPad mini 5 iPadOS 14.7.1 必要
    AQUOS sense3 lite Android11 不要

iPad mini は Apple Pencil でもドラッグ & ドロップの操作をできる。 画面サイズに合わせた作り込みをしたら、かなり快適に使えそう。

手順

手順 1 : mobile-drag-drop パッケージをインストール

% npm install mobile-drag-drop --save
% cd src/Client/public/
% ln -s ../../../node_modules/mobile-drag-drop

手順 2 : index.html で mobile-drag-drop をロード

index.html の差分

diff --git a/src/Client/index.html b/src/Client/index.html
--- a/src/Client/index.html
+++ b/src/Client/index.html
@@ -6,6 +6,21 @@
     <link rel="icon" type="image/png" href="/favicon.png"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
+
+<link rel="stylesheet" href="mobile-drag-drop/default.css">
+<script src="mobile-drag-drop/index.min.js"></script>
+
+<!--optional import of scroll behaviour-->
+<script src="mobile-drag-drop/scroll-behaviour.min.js"></script>
+
+<script>
+    // options are optional ;)
+    MobileDragDrop.polyfill({
+        // use this to make use of the scroll behaviour
+        dragImageTranslateOverride: MobileDragDrop.scrollBehaviourDragImageTranslateOverride
+    });
+</script>
+
 </head>
 <body>
     <div id="elmish-app"></div>

index.html の全文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!doctype html>
<html>
<head>
    <title>SAFE Template</title>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" href="/favicon.png"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

<link rel="stylesheet" href="mobile-drag-drop/default.css">
<script src="mobile-drag-drop/index.min.js"></script>

<!--optional import of scroll behaviour-->
<script src="mobile-drag-drop/scroll-behaviour.min.js"></script>

<script>
    // options are optional ;)
    MobileDragDrop.polyfill({
        // use this to make use of the scroll behaviour
        dragImageTranslateOverride: MobileDragDrop.scrollBehaviourDragImageTranslateOverride
    });
</script>

</head>
<body>
    <div id="elmish-app"></div>
</body>
</html>