javascriptを使ったドラッグ＆ドロップで、ドロップ先にコピーしたい

Question

実現したいこと

Javascriptを使ったドラッグ＆ドロップで、元のリストは全て残したままでドロップ先にはコピーされたアイテムを追加したい。

[アイテムA] [アイテムB] [アイテムC]

とリストがあって、そのうちアイテムBをドラッグし＆ドロップした際に

ドロップ元には
[アイテムA] [アイテムB] [アイテムC]
が残ったまま、ドロップ先に
[アイテムB]
が表示されているようにしたい

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

WEBでドラッグ＆ドロップを開設してくれているサイトを参考にスクリプトを記述したが、
ドロップ元から [アイテムB] が移動する形にしかならない。

23行目にある「dropEffect = 'copy'」

とすればコピーされると思っていたのですが、他に何か必要なのでしょうか？

該当のソースコード

document.addEventListener('DOMContentLoaded', function () {
    const dragItems = document.querySelectorAll('.drag-item');
    const dragContainer = document.querySelector('.drag-container');
    const dropArea = document.querySelector('.q110drop_area');

    let offsetX, offsetY, draggedItem;

    dragItems.forEach(dragItem => {
        dragItem.addEventListener('dragstart', function (e) {
            draggedItem = this;
            offsetX = e.clientX - this.getBoundingClientRect().left;
            offsetY = e.clientY - this.getBoundingClientRect().top;
            this.style.opacity = '0.5';
        });

        dragItem.addEventListener('dragend', function () {
            this.style.opacity = '1';
        });
    });

    dragContainer.addEventListener('dragover', function (e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });

    dragContainer.addEventListener('drop', function (e) {
        e.preventDefault();

        if (draggedItem) {
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;

            draggedItem.style.left = `${x}px`;
            draggedItem.style.top = `${y}px`;

            // No need to clone, just move the original element
            dragContainer.appendChild(draggedItem);

            draggedItem = null;
        }
    });

    dropArea.addEventListener('dragover', function (e) {
        e.preventDefault();
    });

     dropArea.addEventListener('drop', function (e) {
        e.preventDefault();

        if (draggedItem && !dropArea.contains(draggedItem)) {
            if (dropArea.children.length < 3) {
                dropArea.appendChild(draggedItem);
            } else {
                // Handle maximum 3 items in the drop area
            }
        }
    });
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

リストの入れ替えやファイルのドロップ等の情報は見つかるのですが、
元のリストを残したままというのを見つけられなかったです。

補足

特になし

Answer 1

コピーすればいいだけでは？
ただしコピーすると同じ要素が複数登録できますのでそれを避けたいなら工夫が必要です

<style>
.wrap{
  display:flex;
}
.wrap ul{
list-style:none;
padding:0;
width:100px;
}
#newlist{
background-Color:yellow;
}
#orglist{
background-Color:lime;
}

</style>
<script>
const dragobj={}
document.addEventListener("dragenter", (event) => {
  if(event.target.matches('#newlist')){
    event.preventDefault();
  }
});
document.addEventListener("dragover", (event) => {
  if(event.target.closest('#newlist')){
    event.preventDefault();
  }
});
document.addEventListener("drag", (event) => {
  //dragobj.target=event.target; //コピーしなければ移動
  dragobj.target=event.target.cloneNode(true);
});
document.addEventListener("drop", (event) => {
  const droppable=event.target.closest('#newlist');
  if(droppable){
    if(event.target==droppable){
      droppable.appendChild(dragobj.target);
    }else{
      droppable.insertBefore(dragobj.target,event.target);
    }
    dragobj.target=null;
  }
}); 
</script>
<div class="wrap">
<ul id="orglist" class="list">
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
<li draggable="true">d</li>
<li draggable="true">e</li>
<li draggable="true">f</li>
</ul>
<ul id="newlist" class="list">
</ul>
</div>

Answer 2

            // No need to clone, just move the original element
            dragContainer.appendChild(draggedItem);

ここで draggedItem を複製して appendChild() に渡す必要があります。

または、dragstart 時にターゲット要素を複製して元の場所に挿入しておく方がコピーっぽいUXになるかもしれません。

Comments

[cnoise]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。