feat: 筛选列表交互50%

src/views/home/aside/comp/AdvanceFilter.vue

@@ -3,9 +3,10 @@ import { favorite, getConditionList, unfavorite } from "@/api/home/filter";
 import { asideMap } from "@/config/aside";
 import { useInfiniteScroll } from "@vueuse/core";
 import { debounce } from "lodash-es";
-import { onMounted, reactive, ref,watch } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import type { FilterSearchParam } from "/#/api";
 import type { Filter, FilterEntity } from "/#/home";
+import { VueDraggable } from 'vue-draggable-plus'
 
 defineOptions({ name: "AdvanceFilter" });
 
@@ -25,6 +26,7 @@ const emit = defineEmits<{
 }>();
 
 const data = ref<FilterEntity[]>([]);
+const unData = ref<FilterEntity[]>([]);
 let loading = false;
 const canloadMore = true;
 const el = ref<HTMLDivElement | null>(null);
@@ -71,10 +73,10 @@ useInfiniteScroll(
   },
   { distance: 10, interval: 300, canLoadMore: () => false }
 );
-const showClick = ()=>{
-  console.log('showClick')
-  inputHandler('')
-}
+const showClick = () => {
+  console.log("showClick");
+  inputHandler("");
+};
 
 async function loadMore() {
   if (loading || el.value == null) return;
@@ -145,7 +147,18 @@ function selectHandler(item: FilterEntity) {
 const inputHandler = debounce((word) => {
   keyword.value = word;
   featchList().then((list) => {
-    data.value = list;
+    let dataArr: FilterEntity[] = [];
+    let unDataArr: FilterEntity[] = [];
+    list.map((item) => {
+      if (item.favorite && !item.isDefaultFilter) {
+        dataArr.push(item);
+      }
+      if (!item.favorite && !item.isDefaultFilter) {
+        unDataArr.push(item);
+      }
+    });
+    data.value = dataArr;
+    unData.value = unDataArr;
   });
 }, 300);
 
@@ -211,6 +224,7 @@ function unFavoriteHandler(event: MouseEvent, item) {
                 />
               </template>
             </n-input>
+
             <ul ref="el" class="wrapper-left-list">
               <li
                 v-for="(item, index) in data"
@@ -233,6 +247,37 @@ function unFavoriteHandler(event: MouseEvent, item) {
                 />
                 <div v-html="item.name" />
               </li>
+              <VueDraggable
+                v-model="unData"
+                filter=".draggable-li[draggable='false']"
+                class="draggable-ul"
+                :animation="150"
+                group="shared"
+              >
+                <li
+                  v-for="(item, index) in unData"
+                  :key="index"
+                  style="display: flex; align-items: center"
+                  @click="selectHandler(item)"
+                  class="cursor-move draggable-li fix"
+                  :draggable="true"
+                >
+                  <SvgIcon
+                    v-if="item.favorite && !item.isDefaultFilter"
+                    name="favorite-fill"
+                    color="#fd9b0a"
+                    size="18"
+                    @click="unFavoriteHandler($event, item)"
+                  />
+                  <SvgIcon
+                    v-else-if="!item.favorite && !item.isDefaultFilter"
+                    name="favorite-unfill"
+                    size="18"
+                    @click="favoriteHandler($event, item)"
+                  />
+                  <div v-html="item.name" />
+                </li>
+              </VueDraggable>
             </ul>
           </div>
         </n-spin>