ドラッグアンドドロップで配列の中の要素を一つずつとりだす

Question

実現したいこと

複数の要素を一つずつドラッグアンドドロップさせることです
例えば画像の一森純を左の空欄に入れて

下記のような状態にしております

ところが一回目のドロップエンドを終えると二回目のドロップスタートの際、一回目の要素を含めてドロップされてしまいます。
ですので三回目、四回目とだんだん下記のように一度に複数の要素がドロップされていきます。

|:--|:--:|--:|
||||

### 前提

前提として要素をひとつずつとりだしたいため、ドロップエンドをしたら
前回分の要素をドロップさせたくない（ドラッグした分だけをドロップしたいです）


### 該当のソースコード
const players_list = document.getElementById("players_list");
       for(let i=0;i< players.length; i++) {
        if(i%2==1) {
          const player = document.createElement('div');
          player.classList.add('ran');
          player.textContent = players[i];
          players_list.appendChild(player);
        }
       }
       
        const urawa = document.getElementById('team_box');
      
        let ct = 0;

        function teams_box(e ,list, team) {
          e.addEventListener('click',() => {
            if(ct ==  0) {
              list = document.createElement('div');
              list.classList.add('teams_ran');
              document.body.appendChild(list);　　　listというdivに要素をドロップ
              ct = 1;

              //------------------------------
              const player = document.querySelectorAll('.ran');　//ドラッグ対象
              const f_players = [].slice.call(player);
              for(const player of f_players) {
                player.setAttribute('draggable','true');

                  player.addEventListener('dragstart',dragstart)
                

                  function dragstart() {

                    setTimeout(() => {
                      player.className = 'invisible';
                    }, 0);


                    player.addEventListener('dragend', dragend);

                    let in_p = player;

                    list.addEventListener('drop',() => {
                      list.appendChild(in_p);
                      
                    });

                  }

                  function dragend() {
                    player.className = 'ran';
                    player.removeEventListener('dragend', dragend);　・・・　①
                  }

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

### 試したこと

player.removeEventListener('dragend', dragend);　・・・　①
上記をdragend関数で使うことによって強制的に、一回ごとにイベントを終了させようとしましたががうまくいきません。

よろしくお願いいたします。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

<style>
.wrap{
display:flex;
}
.list{
height:300px;
width:200px;
  list-style:none;
padding:0;
}
.list li{
  margin-top:10px;
  background-Color:white;
  border-radius:10px;
  text-align:center;
}
#newlist{
background-Color:lightgray;
}
#orglist{
background-Color:black;
}
</style>
<script>
const dragobj={};
["dragenter","dragover"].forEach(x=>{
  document.addEventListener(x,({target})=>{
    if(target.matches('.list')){
      event.preventDefault();
    }
  });
});
document.addEventListener("drag",({target})=>{
  dragobj.target=target;
});
document.addEventListener("drop",({target})=>{
  target.appendChild(dragobj.target);
  dragobj.target=null;
});
</script>
<div class="wrap">
<ul id="newlist" class="list">
</ul>
<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>
</div>

Comments

[irebasunglass]

ありがとうございした。　無事に一つずつ、ドロップすることができました。一つ疑問があるのですが、イベントリスナーの第一引数でforEachの仮引数を、指定するところが初めてであり内容がわかりませんでした。イベントハンドラ以外でも対象になるということなのでしょうか？

[yambejp]

＞イベントリスナーの第一引数でforEachの仮引数を、指定するところ

["dragenter","dragover"]のところですよね？
コールバックが同じなので配列で共通化しただけで実際には

document.addEventListener("dragenter"・・・
});
document.addEventListener("dragover"・・・
});

と冗長に書いても問題ありません

Answer 2

list.addEventListener('drop',() => {
  list.appendChild(in_p);
});

この drop イベントリスナが登録解除されていないので、2回目のドロップで1回目のイベントリスナも呼ばれてしまってますね。

少ない変更で動くようにするなら、in_p をグローバル変数にして、上記コードをループの外に出すのはいかがでしょうか。

Comments

[irebasunglass]

ありがとうございした。参考になりました。