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>
2 odpowiedzi
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>
Jak powiedział @connexo, praca ze znakami spacji w ciągu id
s lub class
es 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">
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.' '
jako identyfikatora/klasy? Zamiast tego spróbuj użyć klasy, takiej jakdrag-end
, aby ustawić właściwość css, którą lubisz (tj.display: none;
)