如何使用 Flexbox 进行拖放 -javascript

Question

我正在努力水平拖放并尝试使用 Flexbox 进行定位。

我有两个问题。

首先，即使列表容器不是弹性盒（它被设置为阻止），项目也不会按应有的方式拖放。随着该项目进一步向右移动，x 偏移（我认为......）变得更大。我认为这可能与列表项设置为向左浮动有关？但我不确定。

我遇到的第二个问题是，当我尝试将列表容器设置为弯曲时，它不起作用。我搜索了一下，这与 Flex 现在有行而不仅仅是列有关，但我不明白如何用我当前的代码来实现它。

这是我的代码：

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>

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);
}); 

Answer 1

我使用

display:flex

创建了一个片段。如果它不能正常工作，请以何种方式告知。

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);
});

.list-container {
  width: 80%;
  margin: auto;
  background: gray;
}

.list {
  display: flex;
  list-style: none;
  padding: 0;
}

.list-item {
  border: 1px solid red;
}

<div class="top">
</div>

<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>