Przenoszenie komórek tabeli metodą Drag and Drop

0

Mam taką tabelkę:
screenshot-20230110130126.png

moim celem jest możliwość przeciągania wydarzeń na grafiku.
Pola niebieskie oznaczają, że termin jest dostępny i można tam przenieść spotkanie, czerwone że sala jest wyłączona w tym czasie
Cały kod tworzący tabelkę dostępny jest tu:
http://tpcg.io/_5TVD36
Przeciąganie spotkań po grafiku już działa, mam tylko problem z końcowym etapem kiedy po puszczeniu spotkania w jakimś miejscu uruchamiany jest event handleDrop
teraz wygląda on tak:

function handleDrop(e) {
  e.stopPropagation();
  return false;
}

docelowo funkcja ta ma strzelać do backendu, zapisywać nowy termin spotkania a potem następuje odświeżenie grafiku.
Żeby to zrobić potrzebuje wyciągnąć informację jakie spotkanie zostało przeniesione, oraz na której komórce zostało puszczone.
Czy z parametru przekazanego do handleDrop można wyciągnąć takie informacje?
debugując w przeglądarce w funkcji mam dostęp do takich informacji:

screenshot-20230110131934.png

są jakieś współrzędne ale nie wiem jak to przenieść na informację o tym jakie spotkanie jest przenoszone oraz na której komórce zostało puszczone.
Będę wdzięczny za wszelkie podpowiedzi jak wyciągnąć takie info.

4

Żeby to zrobić potrzebuje wyciągnąć informację jakie spotkanie zostało przeniesione

zdarzenia służące do drag'n'drop zawierają specjalną właściwość dataTransfer.

i właśnie za pomocą "dataTransfer" możesz przenosić dane.
w dragstart przypisujesz dane, w drop odczytujesz, tak jak jest pokazane w przykładach na tej stronie:
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

oraz na której komórce zostało puszczone.

Masz właściwość e.target, która daje ci element DOM, którego dotyczy zdarzenie. Jednak zakładam, że nie trzymasz (przynajmniej nie powinieneś) bezpośrednio danych o komórkach w drzewie DOM (które powinno być raczej tylko widokiem na właściwe dane, które trzymałbyś w JavaScript). W takiej sytuacji mógłbyś dodać jakiś atrybut z danymi (np. współrzędne komórki) do elementu <td>, a potem odczytywać ten atrybut przez e.target.getAttribute(....) albo korzystając z dataset https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

1

Działa! dzięki :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1