ドラッグでの並び替えをJSで実現させたいが、なぜか"drag"イベントが無視される。

Question

https://codepen.io/ypppp/pen/poZGmmp

dropindex: <span id="output2">0</span>,&nbsp;status: <span id="output3">idle</span>
<div class="main">
  <!-- Element.prototype.after用 -->
  <div class="dummy"></div>
  <div class="row">
    <div class="bars" draggable="true"><div></div></div>
    <img src="https://www.gravatar.com/avatar/4a597f2aa8f7a369cdfb6422b4efef03?d=identicon">
    <a href="javascript:void(0)">Tarou</a>
  </div>
  <div class="row">
    <div class="bars" draggable="true"><div></div></div>
    <img src="https://www.gravatar.com/avatar/151269ed16a2dd18e9a3ecfcdfe76fc9?d=identicon">
    <a href="javascript:void(0)">Tanaka</a>
  </div>
  <div class="row">
    <div class="bars" draggable="true"><div></div></div>
    <img src="https://www.gravatar.com/avatar/fec6c2f9cee65487e83664e88a1d87a9?d=identicon">
    <a href="javascript:void(0)">Ishiyama</a>
  </div>
  <div class="row">
    <div class="bars" draggable="true"><div></div></div>
    <img src="https://www.gravatar.com/avatar/dfddacc86e582d2ba88d64b69141fc7b?d=identicon">
    <a href="javascript:void(0)">Watanabe</a>
  </div>
  <div class="row">
    <div class="bars" draggable="true"><div></div></div>
    <img src="https://www.gravatar.com/avatar/6ba569cf685f7e79518e27f73ed2c611?d=identicon">
    <a href="javascript:void(0)">Aragaki</a>
  </div>
  <div class="row">
    <div class="bars" draggable="true"><div></div></div>
    <img src="https://www.gravatar.com/avatar/26843d78eb4ba532d14069affdb88a20?d=identicon">
    <a href="javascript:void(0)">Fujiwara</a>
  </div>
  <div class="row">
    <div class="bars" draggable="true"><div></div></div>
    <img src="https://www.gravatar.com/avatar/5ab508b9384dc3bcfa1d4741fd6879ca?d=identicon">
    <a href="javascript:void(0)">Satou</a>
  </div>
  <div class="dropimage"></div>
</div>

body {
  user-select: none;
  overflow-y: hidden;
}
.main {
  border: black 1px solid;
  width: 300px;
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  position: relative;
}
.dummy {
  display: none;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 22px);
  height: 30px;
  background-color: white;
  padding: 5px 0;
}
.row > * {
  height: 30px;
}
.bars {
  width: 30px;
  cursor: s-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bars > div {
  fill: black;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMCA5NkMwIDc4LjMgMTQuMyA2NCAzMiA2NEg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJDMTQuMyAxMjggMCAxMTMuNyAwIDk2ek0wIDI1NmMwLTE3LjcgMTQuMy0zMiAzMi0zMkg0MTZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJIMzJjLTE3LjcgMC0zMi0xNC4zLTMyLTMyek00NDggNDE2YzAgMTcuNy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMnMxNC4zLTMyIDMyLTMySDQxNmMxNy43IDAgMzIgMTQuMyAzMiAzMnoiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
}
.row img {
  width: 30px;
  pointer-events: none;
}
.row a {
  text-decoration: none;
  color: #c000f5;
}
.row a:hover {
  text-decoration: underline;
}
.dragging {
  position: absolute;
}

.dropimage {
  width: calc(100% - 7px);
  height: 37px;
  border: 2px dashed grey;
  display: none;
  z-index: 99;
}
.dropimage-show {
  display: block;
}

(() => {
HTMLCollection.prototype.forEach = function(fn) {
  Array.prototype.forEach.call(this, fn);
}

let main, users, height, top, clientY, dropindex, drop, bars;
window.addEventListener("DOMContentLoaded", e => {
  main = document.getElementsByClassName("main")[0];
  // すべての横目
  users = document.getElementsByClassName("row");
  // 項目の一つの高さ
  height = users[0].getBoundingClientRect().height;
  // 画面上からの高さ
  top = users[0].getBoundingClientRect().top;
  clientY = main.getBoundingClientRect().top;
  // ドロップ先に出るイメージ要素
  drop = document.getElementsByClassName("dropimage")[0];
  
  // ハンバーガーボタン
  bars = document.getElementsByClassName("bars");
  bars.forEach((value, index) => {
    value.setAttribute("data-index", index);
    
    value.addEventListener("dragstart", dragstart);
    value.addEventListener("drag", dragging);
    value.addEventListener("dragend", dragend);
  })
});

function dragstart(e) {
  // ハンバーガーボタンを非表示にする
  e.target.style.opacity = 0;
  
  // position: absolute追加 [[原因はおそらくここ]]
  e.target.parentElement.classList.add("dragging");
  
  // デバッグ用
  console.clear();
  document.getElementById("output3").innerText = "dragstart";
  console.log("dragstart");
}

function dragging(e) {
  // バグ？対策
  if(e.clientY == 0) return;
  
  // ハンバーガーボタンを表示する
  e.target.style.opacity = null;
  
  // ドラッグを視覚的にわかりやすくするため
  e.target.parentElement.style.top = (e.clientY - top - 10) + "px";
  
  // カーソルの座標からドロップ先のインデックスを計算
  dropindex = Math.floor((e.clientY - clientY) / height);
  
  // 範囲外対策
  if(dropindex < 0) dropindex = 0;
  if(dropindex >= users.length - 1) dropindex = users.length - 1;
  
  // ドラッグしている自身の要素を無視する
  if(dropindex >= Number(e.target.getAttribute("data-index"))) dropindex++;
  // ドロップ先に出る要素の位置を変更する
  document.querySelectorAll(".dummy, .row")[dropindex].after(drop);
  
  // ドロップ先に出る要素表示
  drop.classList.add("dropimage-show");

  // デバッグ用
  document.getElementById("output2").innerText = dropindex;
  document.getElementById("output3").innerText = "dragging";
  console.log("dragging");
}

function dragend(e) {
  // ハンバーガーボタンを表示
  e.target.style.opacity = null;
  e.target.parentElement.style.top = null;
  
  // position: absolute削除
  e.target.parentElement.classList.remove("dragging");
  
  // 実際にドラックした要素をドロップ先に移動する
  document.querySelectorAll(".dummy, .row")[dropindex].after(e.target.parentElement);
  
  // インデックスを振りなおす
  bars.forEach((value, index) => {
    value.setAttribute("data-index", index);
  });
  
  // ドロップ先に出るイメージ要素を非表示にする
  drop.classList.remove("dropimage-show");
  // ドロップ先に出るイメージ要素を一番下に移動する
  main.children[main.children.length - 1].after(drop);
  
  // デバッグ用
  document.getElementById("output3").innerText = "dragend";
  console.log("dragend");
}
})();

上記はハンバーガーボタンをドラッグアンドドロップで要素の並び替えを可能にしたものです。
一番上はドラッグアンドドロップで実際に移動できますが、

２番目以降（※たまに動作するときがあります）は移動しようとしてもドラッグの途中で強制的に"dragend"イベントが発行されます。

いろいろ考えてみましたが、２番目以降もイベントの登録はされており、なぜ"drag"イベントが無視され、"dragend"イベントが強制的に発行されるかの理由がわかりません。
どなたか原因がわかる方はいらっしゃいますか？

補足:

.dragging {
   position: absolute;
}

をコメントアウトすると"drag"イベントは無視されなくなります。おそらく、座標が関係しているものだと思いますが、具体的な解決方法が思い浮かびません。

Answer 1

.dragging {
   position: absolute;
}

こちらのクラスを付与した際に、topが定義されていないので、マウス位置とのズレが生じ、ドラッグが終了しています。

一例ですが、

e.target.parentElement.style.top = (e.clientY - top - 10) + "px";
e.target.parentElement.classList.add("dragging");

このように事前にtopの値を設定してやることで、正常にドラッグできるようになります。

Comments

[ypp]

topを指定してみましたが、今度は一番下の要素だけドラックできません。。。

[macaron_xxx]

一番下の要素をドラッグした時にmainの高さが一時的に要素が一つ抜けた状態となるために、こちらもドラッグ位置から外れてしまいます。
`main`の高さを定義してしまうか、`.dropimage-show`を先に表示してしまうなどの対策が必要です。

[ypp]

返信が遅くなりすいません。
>> `main`の高さを定義してしまうか、`.dropimage-show`を先に表示してしまうなどの対策が必要です。
の二つとも追加してみましたが、改善されません。
デバッグしたところ、mainの高さは291px、ドラッグ要素のy座標は280px、とmainを下回っているのにもかかわらず動かせない状態です。
https://codepen.io/ypppp/pen/poZGmmp

[macaron_xxx]

どちらも入れてしまうとだめです。
doropimage-showの表示を元に戻すと正常に動くかと思います。

[ypp]

返信が遅くなりすいません。
dropimage-showを削除すると想定通り動きました。本当にありがとうございます。