常連

### 実現したいこと

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


### 前提

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

使用プラグイン
- tablednd

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

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-31/cf5734c8-12d4-4ff1-90c0-a6f0ee6709d0.png)



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

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

### 該当のソースコード

```PHP
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    
	<script src="js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="../js/jquery.tablednd.0.7.min.js"></script>
	<title></title>
    <style>
    .handle{
	cursor: move;
	position: relative;
    }
    .handle img{
        min-width: 20px;
        width: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }
    .PlusBtn{
        display: block;
        margin: 10px auto;
        width: 25px;
        cursor: pointer;
    }
    .MinusBtn{
        cursor: pointer;
        position: relative;
    }
    .MinusBtn img{
        min-width: 20px;
        width: 20px;
        position: absolute;
        top: 50%; /*親要素を起点に上から50%*/
        left: 50%;  /*親要素を起点に左から50%*/
        transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/
        -webkit-transform: translateY(-50%) translateX(-50%);
    }
    </style>
</head>
<table class="table tablesorter-bootstrap table-management">
	<thead>
            <tr class="lead nodrop nodrag">
                <th colspan="4"></th>
                <th colspan="2" class="coupon">クーポン適応時</th>
                <th colspan="1"></th>
            </tr>
            <tr class="title nodrop nodrag">
                <th style="width: 5%;"></th>
                <th class="menu-name">メニュー名</th>
                <th class="menu-time">時間（分）</th>
                <th class="menu-fee">料金（税込）</th>
                <th class="menu-time">時間（分）</th>
                <th class="menu-fee">料金（税込）</th>
                <th style="width: 5%;"></th>
            </tr>
	</thead>
	<tbody>
		<tr>
			
			<td class="handle"><img src="../img/common/bars-solid.svg"></td>
			<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>
			<td><input type="text" name="menu_time[]" placeholder="時間" value="<?php echo $menu[$i][1];?>" class="m-form-text"></td>
			<td><input type="text" name="menu_price[]" placeholder="料金" value="<?php echo $menu[$i][2];?>" class="m-form-text"></td>
			<td><input type="text" name="menu_time_coupon[]" placeholder="クーポン時間" value="<?php echo $menu[$i][3];?>" class="m-form-text"></td>
            <td><input type="text" name="menu_price_coupon[]" placeholder="クーポン料金" value="<?php echo $menu[$i][4];?>" class="m-form-text"></td>
			
			<td class="MinusBtn"><img src="../img/common/circle-minus-solid.svg"></td>
		</tr>
	</tbody>
</table>

<img class="PlusBtn" src="../img/common/circle-plus-solid.svg">

<script>
//*********************************************//
//table-management
//*********************************************//
$(function(){
	p_tableDnD();
	p_tableShadow();
	// プラスボタンクリック時
	$(".PlusBtn").on('click',function(){
		// 番下へスクロール
		setTimeout(function() {
			window.scroll(0,$(document).height());
		},0);
		$(".table-management tbody tr:first-child").clone(true).appendTo(".table-management tbody");
		$(".table-management tbody tr:last-child td input").val("");
		p_tableDnD();
		p_tableShadow();
	});
	// マイナスボタンクリック時
	$(".MinusBtn").on('click',function(){
		// 行が2行以上あればクリックされた列を削除
		if ($(".table-management tbody tr").length >= 2) {
			$(this).parents('tr').remove();
			p_tableDnD();
			p_tableShadow();
		}
	});
// ドラッグアンドドロップ制御
	function p_tableDnD(){
		$(".table-management").tableDnD({
			dragHandle: ".handle"
		});
	}
// ドラッグアンドドロップ時に影を付ける
	function p_tableShadow(){
		$(".table-management tbody tr .handle").mousedown(function(){
			// 領域内で押した時
			$(this).parents('tr').css('box-shadow','2px 3px 6px 2px #9E9E9E');
			return false;
		})
		$(" * ").mouseup(function(){
			// 離した時
			$(".table-management tbody tr").css('box-shadow','none');
		});
	}
});
</script>

```

### 試したこと
89行目と100行目を
```javascript
.on('click',function()
```
から
```javascript
.on('click touchend',function()
```
に変更したのですが、動きませんでした。

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

	@@ -1,1 +1,1 @@
1	- スマホでクリックとドラッグ＆ドロップが反応しません
1	+ スマホでクリックとドラッグ＆ドロップを反応させる方法

質問編集履歴