Przeciągane elementy w javascript

Question

Mam elementy (divy) jeden pod drugim. Jest ich dość sporo. Wiem że użytkownikowi przydatne będzie tylko kilka z nich, dlatego chciałbym żeby mógł ustalić sobie ich kolejność.

Najprostszym rozwiązaniem z punktu widzenia użytkownika końcowego będzie przeciąganie. (Tak jak jest to na przykład w Visual Studio Code - menu poziome z otwartymi plikami)

Niestety nie mam pomysłu jak się do tego zabrać. Zna ktoś jakieś sposoby?

Answer 1

Możesz użyć Drag and Drop API (przykładowe demo i kod), aby użytkownik mógł ułożyć elementy na stronie, po czym przesłać ustaloną kolejność w DOM na serwer i zachować w bazie w ramach ustawień profilu użytkownika. Przy każdych odwiedzinach tej strony serwer może wysłać odpowiednio ułożony szablon HTML na podstawie informacji z bazy. Albo, można kolejność tych elementów odtworzyć za pomocą Flexbox'owego property order (jeśli układ tych elementów jest jedno wymiarowy) i wtedy ustawić odpowiednią kolejność tych elementów w CSS, zamiast modyfikować HTML.