JavaScriptでtouchイベントの実装方法を教えてください。

実現したいこと

JavaScriptで画像をある要素内から別の要素内にtouchイベントでdrag&dropする機能を実装したいと考えています。

発生している問題・分からないこと

現状drag&dropまではできているのですが、下記のような問題が起きております。
・移動中に画像が表示されないこと
・移動先の要素内で複数画像がある場合は現状最後に配列されるが、dropした位置に挿入できるようにしたい

該当のソースコード

HTML

1 <ul draggable="true"> 2 <li> 3 <p contenteditable="plaintext-only">text</p> 4 </li> 5 <li class="result box"> 6 <!--ここからデータ挿入--> 7 8 <!--ここまでデータ挿入--> 9 </li> 10 </ul> 11 <ul draggable="true"> 12 <li> 13 <p contenteditable="plaintext-only">text</p> 14 </li> 15 <li class="result box"> 16 <!--ここからデータ挿入--> 17 18 <!--ここまでデータ挿入--> 19 </li> 20 </ul> 21 <ul draggable="true"> 22 <li> 23 <p contenteditable="plaintext-only">text</p> 24 </li> 25 <li class="result box"> 26 <!--ここからデータ挿入--> 27 28 <!--ここまでデータ挿入--> 29 </li> 30 </ul> 31 <div class="box" draggable="true" id="nonImageArea"> 32 <!--ここからデータ挿入--> 33 <img draggable="true" class="item" src="./img/01"> 34 <img draggable="true" class="item" src="./img/02"> 35 <img draggable="true" class="item" src="./img/03"> 36 <img draggable="true" class="item" src="./img/04"> 37 <img draggable="true" class="item" src="./img/05"> 38 <img draggable="true" class="item" src="./img/06"> 39 <img draggable="true" class="item" src="./img/07"> 40 </div>

JavaScript

1let draggedItem = null;2 3const nonImageArea = document.getElementById('nonImageArea');4const mappingAreas = document.querySelectorAll('.result');5const draggableItems = document.querySelectorAll('.item');6 7function handleTouchStart(e) {8 draggedItem = e.target;9 let touch = e.touches[0];10 startX = touch.clientX - parseFloat(draggedItem.style.left || 0);11 startY = touch.clientY - parseFloat(draggedItem.style.top || 0);12 e.preventDefault();13}14 15function handleTouchMove(e) {16 // if (!draggedItem) return;17 let touch = e.touches[0];18 draggedItem.style.left = `${touch.clientX - startX}px`;19 draggedItem.style.top = `${touch.clientY - startY}px`;20 e.preventDefault();21}22 23function handleTouchEnd(e) {24 if (!draggedItem) return;25 26 mappingAreas.forEach((mappingArea) => {27 const rect = mappingArea.getBoundingClientRect();28 let left = parseFloat(draggedItem.style.left) + startX;29 let top = parseFloat(draggedItem.style.top) + startY;30 31 if (32 left >= rect.left &&33 left < rect.right &&34 top >= rect.top &&35 top < rect.bottom36 ) {37 const touch = e.changedTouches[0];38 const x = touch.clientX - rect.left;39 const y = touch.clientY - rect.top;40 draggedItem.style.left = `${x - draggedItem.offsetWidth / 2}px`;41 draggedItem.style.top = `${y - draggedItem.offsetHeight / 2}px`;42 draggedItem.crossOrigin = 'anonymous';43 mappingArea.appendChild(draggedItem);44 }45 });46 47 if (!draggedItem.parentNode) {48 // マッピングエリア外に出た場合49 draggedItem.style.left = ''; // スタイルをリセット50 draggedItem.style.top = ''; // スタイルをリセット51 nonImageArea.appendChild(draggedItem);52 }53 54 draggedItem = null;55 e.preventDefault();56}57 58draggableItems.forEach((item) => {59 item.addEventListener('touchstart', handleTouchStart);60 item.addEventListener('touchmove', handleTouchMove);61 item.addEventListener('touchend', handleTouchEnd);62});63

試したこと・調べたこと

上記の詳細・結果

画像を並び替えるようなサイトが見つからなかったです。

補足

特になし