Flexbox拖拽功能移动端失效：e.target是否存在移动端兼容问题？

• 基于JavaScript实现的横向拖拽在桌面端运行正常，但移动端完全无法工作，怀疑是e.target的移动端兼容问题。
• 此前开发遇到的相关问题：使用flexbox布局时拖拽失效，e.target仅能命中容器；改用非flex布局后解决了布局问题，但出现拖拽偏移现象，怀疑和.list-item设置float:left及e.target取值有关。

实现代码 #

JavaScript #

const list = document.querySelector(".list");

let draggedTarget;
let helper;
document.addEventListener("dragstart", function(e) {
  draggedTarget = e.target;

  helper = document.createElement("div");
  helper.innerText = draggedTarget.querySelector(".list-item-name").innerText;
  helper.style.position = "absolute";
  helper.style.top = "-9999px";
  helper.style.padding = "1rem";
  helper.style.backgroundColor = "#000";
  helper.style.color = "#ddd";
  helper.style.fontSize = "1.5rem";
  helper.style.fontFamily = "Consolas";
  document.querySelector(".top").appendChild(helper);

  e.dataTransfer.setDragImage(helper, 0, 0);
});

document.addEventListener("dragenter", function(e) {
  if (e.target !== draggedTarget && e.target.classList[0] === "list-item") {
    const ep = e.target.previousElementSibling;
    const en = e.target.nextElementSibling;
    const dp = draggedTarget.previousElementSibling;
    const dn = draggedTarget.nextElementSibling;

    if (!ep && !dn) {
      list.removeChild(draggedTarget);
      e.target.insertAdjacentElement("beforebegin", draggedTarget);
    } else if (!en && !dp) {
      list.removeChild(draggedTarget);
      e.target.insertAdjacentElement("afterend", draggedTarget);
    } else if (ep && ep != draggedTarget) {
      list.removeChild(e.target);
      list.removeChild(draggedTarget);
      ep.insertAdjacentElement("afterend", draggedTarget);
      draggedTarget.insertAdjacentElement("afterend", e.target);
    } else if (!ep) {
      list.removeChild(e.target);
      list.removeChild(draggedTarget);
      dn.insertAdjacentElement("beforebegin", e.target);
      e.target.insertAdjacentElement("beforebegin", draggedTarget);
    } else if (en && en != draggedTarget) {
      list.removeChild(e.target);
      list.removeChild(draggedTarget);
      en.insertAdjacentElement("beforebegin", draggedTarget);
      draggedTarget.insertAdjacentElement("beforebegin", e.target);
    } else if (!en) {
      list.removeChild(e.target);
      dp.insertAdjacentElement("afterend", e.target);
    }
  }
});

document.addEventListener("dragover", function(e) {
  e.preventDefault();
});

document.addEventListener("drop", function(e) {
  e.preventDefault();
  helper.parentNode.removeChild(helper);
});

CSS #

.list-container {
    background: #f9e2c3;
    position: relative;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.list {
    list-style-type: none;
    margin: 0;
    padding: 1rem;
    font-size: 1.5rem;
}

.list-item {
    display: flex;
    float: left;
    padding: 1rem;
    text-orientation: upright;
    writing-mode: vertical-lr;
}

.list-item-name {
    font-family: "Consolas";
    user-select: none;
}

.book_1 {
    background: #ffaaac;
}
.book_2 {
    background: #ffd5ad;
}
.book_3 {
    background: #ffffff;
}
.book_4 {
    background: #c1d2e0;
}
.book_5 {
    background: #c9e9c3;
}
.book_6 {
    background: #ff979a;
}
.book_7 {
    background: #fff1bf;
}
.book_8 {
    background: #ceecc8;
}
.book_9 {
    background: #d1ebff;
}

HTML #

<div class="list-container clicked__clue" id="books">
  <ul class="list">
    <li class="list-item book4" draggable="true">
      <a class="list-item-name">기이현상청 사건일지</a>
    </li>
    <li class="list-item book1" draggable="true">
      <a class="list-item-name">맨 끝줄 소년</a>
    </li>
    <li class="list-item book5" draggable="true">
      <a class="list-item-name">억지로라도 쉬어가라</a>
    </li>
    <li class="list-item book3" draggable="true">
      <a class="list-item-name">로펌 인 코리아</a>
    </li>
    <li class="list-item book7" draggable="true">
      <a class="list-item-name">거미 여인의 키스</a>
    </li>
    <li class="list-item book6" draggable="true">
      <a class="list-item-name">을사늑약 1905</a>
    </li>
    <li class="list-item book9" draggable="true">
      <a class="list-item-name">다른 방식으로 보기</a>
    </li>
    <li class="list-item book2" draggable="true">
      <a class="list-item-name">발이 없는 나의 여인은 노래한다</a>
    </li>
    <li class="list-item book8" draggable="true">
      <a class="list-item-name">닐과 순다리</a>
    </li>
  </ul>
</div>

内容的提问来源于stack exchange，提问作者Eunbin