From 169fb35b4b5e0fe9423e0cec03003b69d92c6c17 Mon Sep 17 00:00:00 2001
From: tanchekwei <weiwei1@live.com.my>
Date: Mon, 3 Jul 2023 21:04:06 +0800
Subject: [PATCH] Remove fav bot on drop outside list

---
 src/components/Footer/FooterBar.vue | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/Footer/FooterBar.vue b/src/components/Footer/FooterBar.vue
index 0bde8a281..3ad8d20a8 100644
--- a/src/components/Footer/FooterBar.vue
+++ b/src/components/Footer/FooterBar.vue
@@ -256,8 +256,29 @@ onMounted(() => {
 
 let sortable = undefined;
 function initializeSortable() {
+  let isDropOnFavBotBar = false;
+  const onDragEnd = (event) => {
+    event.target.removeEventListener("dragend", onDragEnd);
+    if (isDropOnFavBotBar) {
+      return; // dropped on fav bot bar
+    }
+    // if not drop on fav bot bar, remove it from favorite bar
+    event.target.parentNode.removeChild(event.target);
+    store.commit("removeFavoriteBot", event.target.dataset.id);
+    rerenderFavBotLogos.value++; // trigger re-render to refresh order and shortkey
+    nextTick().then(() => {
+      sortable = undefined;
+      initializeSortable(); // re-initialize sortable instance after re-render
+    });
+  };
+
   sortable = new Sortable(favBotLogosRef.value, {
     animation: 200, // ms, animation speed moving items when sorting
+    // dragging started
+    onStart: function (favBot) {
+      isDropOnFavBotBar = false;
+      favBot.item.addEventListener("dragend", onDragEnd);
+    },
     // dragging ended
     onEnd: async function (favBot) {
       if (favBot.oldIndex === favBot.newIndex) {
@@ -271,6 +292,9 @@ function initializeSortable() {
       });
     },
   });
+  favBotLogosRef.value.addEventListener("drop", () => {
+    isDropOnFavBotBar = true;
+  });
 }
 
 defineExpose({