Mam tutaj ten div, którego używam z interfejsem API przeciągnij i upuść:

<div class="box student" draggable="true" style="background-color: #1DDBCA;margin:10px" id="5"><span>Seymen Ege</span></div>

Jeśli przeciągnę ten element:

<div class="box c1r1" draggable="true" style="background-color: #1DDBCA;margin:10px;display:inline-block" id=" "><span>Boş</span></div>

I upuść go na div, działa dobrze, ale chcę, aby się ukrył, jeśli ma ten identyfikator „ ” i ma klasę studencką. Ale nie powinno tego ukrywać inaczej.

Muszę coś do niego dodać, aby ukrywał element, jeśli ma identyfikator „ ” i klasę „student” po upuszczeniu. Jak mogę to zrobić?

const boxElements = document.querySelectorAll(".box");

boxElements.forEach(elem => {
  elem.addEventListener("dragstart", dragStart);
  // elem.addEventListener("drag", drag);
  elem.addEventListener("dragend", dragEnd);
  elem.addEventListener("dragenter", dragEnter);
  elem.addEventListener("dragover", dragOver);
  elem.addEventListener("dragleave", dragLeave);
  elem.addEventListener("drop", drop);
});

// Drag and Drop Functions

function dragStart(event) {
  event.target.classList.add("drag-start");
  event.dataTransfer.setData("text", event.target.id);
}

function dragEnd(event) {
  event.target.classList.remove("drag-start");
}

function dragEnter(event) {
  if (!event.target.classList.contains("drag-start")) {
    event.target.classList.add("drag-enter");
  }
}

function dragOver(event) {
  event.preventDefault();
}

function dragLeave(event) {
  event.target.classList.remove("drag-enter");
}

function drop(event) {
  event.preventDefault();
  event.target.classList.remove("drag-enter");
  const draggableElementId = event.dataTransfer.getData("text");
  const droppableElementId = event.target.id;
  if (draggableElementId !== droppableElementId) {
    const draggableElement = document.getElementById(draggableElementId);
    const droppableElementBgColor = event.target.style.backgroundColor;
    const droppableElementTextContent = event.target.querySelector("span").textContent;

    event.target.style.backgroundColor = draggableElement.style.backgroundColor;
    event.target.querySelector("span").textContent = draggableElement.querySelector("span").textContent;
    event.target.id = draggableElementId;
    draggableElement.style.backgroundColor = droppableElementBgColor;
    draggableElement.querySelector("span").textContent = droppableElementTextContent;
    draggableElement.id = droppableElementId;
  }
}
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
  color: #333;
}

.box {
  width: 80px;
  border: 3px solid #333;
  border-radius: 0.5rem;
  margin: 1.25rem;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  user-select: none;
  cursor: move;
  transition: 0.5s;
}

.box span {
  pointer-events: none;
}


/* Drag and Drop Related Styling */

.drag-start {
  opacity: 0.4;
}

.drag-enter {
  border-style: dashed;
}

.box:nth-child(odd).drag-enter {
  transform: rotate(15deg);
}

.box:nth-child(even).drag-enter {
  transform: rotate(-15deg);
}

.box:nth-child(odd).drag-start {
  transform: rotate(15deg) scale(0.75);
}

.box:nth-child(even).drag-start {
  transform: rotate(-15deg) scale(0.75);
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
  .box {
    width: 4rem;
    height: 4rem;
    margin: 0.5rem;
  }
}
<div class="box student" draggable="true" style="background-color: #1DDBCA;margin:10px" id="5"><span>Seymen Ege</span></div>


<div class="box c1r1" draggable="true" style="background-color: #1DDBCA;margin:10px;display:inline-block" id=" "><span>Boş</span></div>
0
V0LzEn0r 24 styczeń 2022, 17:24
1
id nie może zawierać spacji, co w przeciwnym razie jest jednym z prawie żadnych ograniczeń. Musisz to zmienić id, w przeciwnym razie pracujesz z nieprawidłowym kodem HTML.
 – 
connexo
24 styczeń 2022, 18:21
Zdecydowanie sugeruję, aby nie używać ' ' jako identyfikatora/klasy? Zamiast tego spróbuj użyć klasy, takiej jak drag-end, aby ustawić właściwość css, którą lubisz (tj. display: none;)
 – 
CcmU
24 styczeń 2022, 18:22

2 odpowiedzi

Najlepsza odpowiedź

Posiadanie pustych identyfikatorów lub identyfikatorów ze spacją nie jest dobrym sposobem. Użyłbym atrybutu danych

Tak czy siak:

function dragEnd(event) {
  const tgt = event.target
  if (tgt) {
    tgt.classList.remove("drag-start");
    if (tgt.id.trim() === "" && tgt.classList.contains("student")) {
      tgt.remove()
    }
  }
}
const boxElements = document.querySelectorAll(".box");

boxElements.forEach(elem => {
  elem.addEventListener("dragstart", dragStart);
  // elem.addEventListener("drag", drag);
  elem.addEventListener("dragend", dragEnd);
  elem.addEventListener("dragenter", dragEnter);
  elem.addEventListener("dragover", dragOver);
  elem.addEventListener("dragleave", dragLeave);
  elem.addEventListener("drop", drop);
});

// Drag and Drop Functions

function dragStart(event) {
  event.target.classList.add("drag-start");
  event.dataTransfer.setData("text", event.target.id);
}

function dragEnd(event) {
  const tgt = event.target
  if (tgt) {
    tgt.classList.remove("drag-start");
    console.log(tgt.className)
    if (tgt.id.trim() === "" && tgt.classList.contains("student")) {
      tgt.remove()
    }
  }
}

function dragEnter(event) {
  if (!event.target.classList.contains("drag-start")) {
    event.target.classList.add("drag-enter");
  }
}

function dragOver(event) {
  event.preventDefault();
}

function dragLeave(event) {
  event.target.classList.remove("drag-enter");
}

function drop(event) {
  event.preventDefault();
  event.target.classList.remove("drag-enter");
  const draggableElementId = event.dataTransfer.getData("text");
  const droppableElementId = event.target.id;
  if (draggableElementId !== droppableElementId) {
    const draggableElement = document.getElementById(draggableElementId);
    const droppableElementBgColor = event.target.style.backgroundColor;
    const droppableElementTextContent = event.target.querySelector("span").textContent;

    event.target.style.backgroundColor = draggableElement.style.backgroundColor;
    event.target.querySelector("span").textContent = draggableElement.querySelector("span").textContent;
    event.target.id = draggableElementId;
    draggableElement.style.backgroundColor = droppableElementBgColor;
    draggableElement.querySelector("span").textContent = droppableElementTextContent;
    draggableElement.id = droppableElementId;
  }
}
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
  color: #333;
}

.box {
  width: 80px;
  border: 3px solid #333;
  border-radius: 0.5rem;
  margin: 1.25rem;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  user-select: none;
  cursor: move;
  transition: 0.5s;
}

.box span {
  pointer-events: none;
}


/* Drag and Drop Related Styling */

.drag-start {
  opacity: 0.4;
}

.drag-enter {
  border-style: dashed;
}

.box:nth-child(odd).drag-enter {
  transform: rotate(15deg);
}

.box:nth-child(even).drag-enter {
  transform: rotate(-15deg);
}

.box:nth-child(odd).drag-start {
  transform: rotate(15deg) scale(0.75);
}

.box:nth-child(even).drag-start {
  transform: rotate(-15deg) scale(0.75);
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
  .box {
    width: 4rem;
    height: 4rem;
    margin: 0.5rem;
  }
}
<div class="box student" draggable="true" style="background-color: #1DDBCA;margin:10px" id="5"><span>Seymen Ege</span></div>


<div class="box c1r1" draggable="true" style="background-color: #1DDBCA;margin:10px;display:inline-block" id=" "><span>Boş</span></div>
-1
mplungjan 24 styczeń 2022, 18:36
Tak, ale powinien go usunąć tylko wtedy, gdy ma klasę studencką
 – 
V0LzEn0r
24 styczeń 2022, 17:46
1
THX za pomoc
 – 
V0LzEn0r
24 styczeń 2022, 18:33
 – 
mplungjan
24 styczeń 2022, 18:45

Jak powiedział @connexo, praca ze znakami spacji w ciągu ids lub classes prowadzi do nieprawidłowego kodu HTML, więc aby uzyskać pożądany wynik, możesz użyć innej klasy (np. 'drag-end') do ustawienia pożądane właściwości:

.student.drag-end {
    display: none;
}

Na przykład powyższy css będzie miał zastosowanie do elementu <element class="student drag-end">

1
CcmU 24 styczeń 2022, 18:38