スマホでクリックとドラッグ＆ドロップを反応させる方法

実現したいこと

tableのtrを「追加」「削除」「移動」できる機能をつくりたいです。
よろしくお願いします。

前提

下記サイトを参考にしています
https://patoblog.com/table-management/

使用プラグイン

tablednd

イメージ

プラスボタンを押したら行が追加される
マイナスボタンを押したら行が削除される
左の三本線をドラッグアンドドロップしたら行の移動ができる

発生している問題・エラーメッセージ

パソコンでは期待通りに動くのですが、スマートフォンでは「プラスボタン」「マイナスボタン」「左の三本線」すべて反応しません。

該当のソースコード

PHP
1<html lang="ja">
2<head>
3	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
5    <!-- jQuery読み込み -->
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
7    <!-- BootstrapのJS読み込み -->
8	<script src="js/bootstrap.min.js"></script>
9	<!-- tablednd読み込み -->
10	<script type="text/javascript" src="../js/jquery.tablednd.0.7.min.js"></script>
11	<title></title>
12    <style>
13    .handle{
14	cursor: move;
15	position: relative;
16    }
17    .handle img{
18        min-width: 20px;
19        width: 20px;
20        position: absolute;
21        top: 50%;
22        left: 50%;
23        transform: translateY(-50%) translateX(-50%);
24        -webkit-transform: translateY(-50%) translateX(-50%);
25    }
26    .PlusBtn{
27        display: block;
28        margin: 10px auto;
29        width: 25px;
30        cursor: pointer;
31    }
32    .MinusBtn{
33        cursor: pointer;
34        position: relative;
35    }
36    .MinusBtn img{
37        min-width: 20px;
38        width: 20px;
39        position: absolute;
40        top: 50%; /*親要素を起点に上から50%*/
41        left: 50%;  /*親要素を起点に左から50%*/
42        transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/
43        -webkit-transform: translateY(-50%) translateX(-50%);
44    }
45    </style>
46</head>
47<table class="table tablesorter-bootstrap table-management">
48	<thead>
49            <tr class="lead nodrop nodrag">
50                <th colspan="4"></th>
51                <th colspan="2" class="coupon">クーポン適応時</th>
52                <th colspan="1"></th>
53            </tr>
54            <tr class="title nodrop nodrag">
55                <th style="width: 5%;"></th>
56                <th class="menu-name">メニュー名</th>
57                <th class="menu-time">時間（分）</th>
58                <th class="menu-fee">料金（税込）</th>
59                <th class="menu-time">時間（分）</th>
60                <th class="menu-fee">料金（税込）</th>
61                <th style="width: 5%;"></th>
62            </tr>
63	</thead>
64	<tbody>
65		<tr>
66			<!-- 三本線の画像 -->
67			<td class="handle"><img src="../img/common/bars-solid.svg"></td>
68			<td><span class="now_cnt">0</span><input type="text" name="menu_name[]" placeholder="メニュー名" value="<?php echo $menu[$i][0];?>" class="m-form-text2 txt" maxlength="25"></td>
69			<td><input type="text" name="menu_time[]" placeholder="時間" value="<?php echo $menu[$i][1];?>" class="m-form-text"></td>
70			<td><input type="text" name="menu_price[]" placeholder="料金" value="<?php echo $menu[$i][2];?>" class="m-form-text"></td>
71			<td><input type="text" name="menu_time_coupon[]" placeholder="クーポン時間" value="<?php echo $menu[$i][3];?>" class="m-form-text"></td>
72            <td><input type="text" name="menu_price_coupon[]" placeholder="クーポン料金" value="<?php echo $menu[$i][4];?>" class="m-form-text"></td>
73			<!-- マイナスボタンの画像 -->
74			<td class="MinusBtn"><img src="../img/common/circle-minus-solid.svg"></td>
75		</tr>
76	</tbody>
77</table>
78<!-- プラスボタンの画像 -->
79<img class="PlusBtn" src="../img/common/circle-plus-solid.svg">
80
81<script>
82//*********************************************//
83//table-management
84//*********************************************//
85$(function(){
86	p_tableDnD();
87	p_tableShadow();
88	// プラスボタンクリック時
89	$(".PlusBtn").on('click',function(){
90		// 番下へスクロール
91		setTimeout(function() {
92			window.scroll(0,$(document).height());
93		},0);
94		$(".table-management tbody tr:first-child").clone(true).appendTo(".table-management tbody");
95		$(".table-management tbody tr:last-child td input").val("");
96		p_tableDnD();
97		p_tableShadow();
98	});
99	// マイナスボタンクリック時
100	$(".MinusBtn").on('click',function(){
101		// 行が2行以上あればクリックされた列を削除
102		if ($(".table-management tbody tr").length >= 2) {
103			$(this).parents('tr').remove();
104			p_tableDnD();
105			p_tableShadow();
106		}
107	});
108// ドラッグアンドドロップ制御
109	function p_tableDnD(){
110		$(".table-management").tableDnD({
111			dragHandle: ".handle"
112		});
113	}
114// ドラッグアンドドロップ時に影を付ける
115	function p_tableShadow(){
116		$(".table-management tbody tr .handle").mousedown(function(){
117			// 領域内で押した時
118			$(this).parents('tr').css('box-shadow','2px 3px 6px 2px #9E9E9E');
119			return false;
120		})
121		$(" * ").mouseup(function(){
122			// 離した時
123			$(".table-management tbody tr").css('box-shadow','none');
124		});
125	}
126});
127</script>
128

試したこと

89行目と100行目を

javascript
1.on('click',function()

から

javascript
1.on('click touchend',function()

に変更したのですが、動きませんでした。

どうぞよろしくお願いします。

shinoharat

2023/06/02 08:31

検証しようと思って tablednd 0.7 を調べたのですが、どうやら11年くらい前のバージョンらしく、github の tags にも存在しませんでした。 https://github.com/isocra/TableDnD/tags 流石に古すぎるので、特に理由がなければ v1.0.5 に上げた方が良いのではと思いますが、いかがでしょうか・・・？質問に対する回答になってなくて申し訳ないです。