原版的javascript拖动事件中不能修改被拖动元素的css吗？

Question

我希望拖动的元素不模糊

如上图所示拖动时，元素模糊。但是，即使像下图那样拖动，我也想保留元素。

如何只使用 Vanilla Javascript + css 而不使用 JQuery 或任何其他库来实现它？

const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");

containers.forEach((container) => {
  container.addEventListener("dragover", (e) => {
    e.stopPropagation();
    e.preventDefault();

    const afterElement = getDragAfterElement(container, e.clientY);
    const draggable = document.querySelector(".dragging");

    if (afterElement == null) {
      container.appendChild(draggable);
    } else {
      container.insertBefore(draggable, afterElement);
    }
  });

  container.addEventListener("dragstart", (e) => {
    const id = e.target.id;
    const box = document.getElementById(id);

    box.classList.add("dragging");
  });

  container.addEventListener("dragend", (e) => {
    const id = e.target.id;
    const box = document.getElementById(id);

    box.classList.remove("dragging");
  });
});

function getDragAfterElement(container, y) {
  const draggableElements = [
    ...container.querySelectorAll(".draggable:not(.dragging)"),
  ];

  return draggableElements.reduce(
    (closest, child) => {
      const box = child.getBoundingClientRect();
      const offset = y - box.top - box.height / 2;
      // console.log(offset);

      if (offset < 0 && offset > closest.offset) {
        return {
          offset: offset,
          element: child,
        };
      }
      return closest;
    },
    { offset: Number.NEGATIVE_INFINITY }
  ).element;
}

<body>
  <div class="container">
    <p id="box1" class="draggable" draggable="true">1</p>
    <p id="box2" class="draggable" draggable="true">2</p>
  </div>

  <div class="container">
    <p id="box3" class="draggable" draggable="true">3</p>
    <p id="box4" class="draggable" draggable="true">4</p>
  </div>

  <script src="./script.js"></script>
</body>

body {
  margin: 0px;
}

.container {
  background-color: #333;
  padding: 1rem;
  margin-top: 1rem;
}

.draggable {
  padding: 1rem;
  background-color: #fff;
  border: 1px solid black;
  cursor: move;
}

.draggable.dragging {
  opacity: 0.5;
}

上面的代码是我实现的代码。目前这段代码正在被拖动，但是被拖动的元素是模糊的。

如有任何想法，我们将不胜感激。

Answer 1

您是否尝试查看您的 CSS？如果 draggable class 包含任何模糊元素的规则，您可能已经发现了问题。尝试删除任何您不需要的 CSS 规则？

Answer 2

删除此代码：

.draggable.dragging {
  opacity: 0.5;
}

或修改如下：

.draggable.dragging {
  opacity: 1;
}

它将解决您的问题

const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");

containers.forEach((container) => {
  container.addEventListener("dragover", (e) => {
    e.stopPropagation();
    e.preventDefault();

    const afterElement = getDragAfterElement(container, e.clientY);
    const draggable = document.querySelector(".dragging");

    if (afterElement == null) {
      container.appendChild(draggable);
    } else {
      container.insertBefore(draggable, afterElement);
    }
  });

  container.addEventListener("dragstart", (e) => {
    const id = e.target.id;
    const box = document.getElementById(id);

    box.classList.add("dragging");
  });

  container.addEventListener("dragend", (e) => {
    const id = e.target.id;
    const box = document.getElementById(id);

    box.classList.remove("dragging");
  });
});

function getDragAfterElement(container, y) {
  const draggableElements = [
    ...container.querySelectorAll(".draggable:not(.dragging)"),
  ];

  return draggableElements.reduce(
    (closest, child) => {
      const box = child.getBoundingClientRect();
      const offset = y - box.top - box.height / 2;
      // console.log(offset);

      if (offset < 0 && offset > closest.offset) {
        return {
          offset: offset,
          element: child,
        };
      }
      return closest;
    }, {
      offset: Number.NEGATIVE_INFINITY
    }
  ).element;
}

body {
  margin: 0px;
}

.container {
  background-color: #333;
  padding: 1rem;
  margin-top: 1rem;
}

.draggable {
  padding: 1rem;
  background-color: #fff;
  border: 1px solid black;
  cursor: move;
}

.draggable.dragging {
  opacity: 1;
}

<div class="container">
  <p id="box1" class="draggable" draggable="true">1</p>
  <p id="box2" class="draggable" draggable="true">2</p>
</div>

<div class="container">
  <p id="box3" class="draggable" draggable="true">3</p>
  <p id="box4" class="draggable" draggable="true">4</p>
</div>

原版的javascript拖动事件中不能修改被拖动元素的css吗？

Can't the css of the dragged element be modified in the vanilla javascript drag event?

html

javascript

css

drag-and-drop