Implement dragging to reorder queue

src/queue.rs

@@ -4,6 +4,7 @@ use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
 use leptos_icons::CgIcon::*;
+use leptos::ev::DragEvent;
 
 const RM_BTN_SIZE: &str = "2.5rem";
 
@@ -43,6 +44,53 @@ pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
         e.prevent_default();
     };
 
+	let index_being_dragged = create_rw_signal(-1);
+
+	let index_being_hovered = create_rw_signal(-1);
+
+	let on_drag_start = move |_e: DragEvent, index: usize| {
+		// set the index of the item being dragged
+		index_being_dragged.set(index as i32);
+    };
+	
+	let on_drop = move |e: DragEvent| {
+		e.prevent_default();
+		// if the index of the item being dragged is not the same as the index of the item being hovered over
+		if index_being_dragged.get() != index_being_hovered.get() && index_being_dragged.get() > 0 && index_being_hovered.get() > 0 {
+			// get the index of the item being dragged
+			let dragged_index = index_being_dragged.get_untracked() as usize;
+			// get the index of the item being hovered over
+			let hovered_index = index_being_hovered.get_untracked() as usize;
+			// update the queue
+			status.update(|status| {
+				// remove the dragged item from the list
+				let dragged_item = status.queue.remove(dragged_index);
+				// insert the dragged item at the index of the item being hovered over
+				status.queue.insert(hovered_index, dragged_item.unwrap());
+			});
+			// reset the index of the item being dragged
+			index_being_dragged.set(-1);
+			// reset the index of the item being hovered over
+			index_being_hovered.set(-1);
+			log!("drag end. Moved item from index {} to index {}", dragged_index, hovered_index);
+		}
+		else {
+			// reset the index of the item being dragged
+			index_being_dragged.set(-1);
+			// reset the index of the item being hovered over
+			index_being_hovered.set(-1);
+		}
+	};
+
+	let on_drag_enter = move |_e: DragEvent, index: usize| {
+		// set the index of the item being hovered over
+		index_being_hovered.set(index as i32);
+	};
+
+	let on_drag_over = move |e: DragEvent| {
+		e.prevent_default();
+	};
+
 	view!{
 		<Show
 			when=move || status.with(|status| status.queue_open)
@@ -53,10 +101,16 @@ pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
 				</div>
 				<ul>
 					{
-						status.with(|status| status.queue.iter()
+						move || status.with(|status| status.queue.iter()
 							.enumerate()
 							.map(|(index, song)| view! {
-								<div class="queue-item">
+								<div class="queue-item"
+									draggable="true"
+									on:dragstart=move |e: DragEvent| on_drag_start(e, index)
+									on:drop=on_drop
+									on:dragenter=move |e: DragEvent| on_drag_enter(e, index)
+									on:dragover=on_drag_over
+								>
 									<Song song_image_path=song.image_path.clone() song_title=song.name.clone() song_artist=song.artist.clone() />
 									<Show
 										when=move || index != 0