docs(FQA): update FQA page, add example screen for draggable disable

docs/.vitepress/sidebar.ts

@@ -17,7 +17,8 @@ export const sidebar = {
         { text: 'Mixin Animation', link: '/en/demo/transitions/' },
         { text: 'Table Row', link: '/en/demo/table/' },
         { text: 'Table Column', link: '/en/demo/table-column/' },
-        { text: 'Nesting', link: '/en/demo/nested/' }
+        { text: 'Nesting', link: '/en/demo/nested/' },
+        { text: 'Disable Drag Items', link: '/en/demo/drag-disable/' },
       ]
     },
     {
@@ -47,7 +48,9 @@ export const sidebar = {
         { text: '内置动画合并', link: '/demo/transitions/' },
         { text: '表格行拖拽', link: '/demo/table/' },
         { text: '表格列拖拽', link: '/demo/table-column/' },
-        { text: '嵌套', link: '/demo/nested/' }
+        { text: '嵌套', link: '/demo/nested/' },
+        { text: '禁用拖拽项', link: '/demo/drag-disable/' }
+
       ]
     },
     {

src/__docs__/drag-disable/filter.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex">
+    <VueDraggable
+      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
+      v-model="list1"
+      animation="150"
+      ghostClass="ghost"
+      group="people"
+      :filter="filter"
+    >
+      <div
+        v-for="item in list1"
+        :key="item.id"
+        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
+        :class="item.class"
+      >
+        {{ item.name }}
+      </div>
+    </VueDraggable>
+    <VueDraggable
+      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
+      v-model="list2"
+      animation="150"
+      ghostClass="ghost"
+      group="people"
+    >
+      <div
+        v-for="item in list2"
+        :key="item.id"
+        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
+      >
+        {{ item.name }}
+      </div>
+    </VueDraggable>
+  </div>
+  <div class="flex justify-between">
+    <preview-list :list="list1" />
+    <preview-list :list="list2" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+const list1 = ref([
+  {
+    name: 'Joao(Drag disable)',
+    id: '1',
+    class: 'drag-disable'
+  },
+  {
+    name: 'Jean',
+    id: '2',
+  },
+  {
+    name: 'Johanna',
+    id: '3'
+  },
+  {
+    name: 'Juan',
+    id: '4'
+  }
+])
+const list2 = ref([
+  {
+    name: 'Joao-2',
+    id: '2-1'
+  },
+  {
+    name: 'Jean-2',
+    id: '2-2'
+  },
+  {
+    name: 'Johanna-2',
+    id: '2-3'
+  },
+  {
+    name: 'Juan-2',
+    id: '2-4'
+  }
+])
+
+const filter = '.drag-disable'
+
+</script>

src/__docs__/drag-disable/index.en-US.md

@@ -0,0 +1,15 @@
+---
+map:
+  path: /demo/drag-disable
+---
+
+# Disable Drag Items
+
+### How can I make some elements in a draggable container non draggable?
+
+Answer: use the `filter` attribute and pass in a `class` to filter out the elements that should not be draggable.
+
+<demo src="./filter.vue"
+title="Drag disable"
+desc="Make the first element of the left list non-draggable.">
+</demo>

src/__docs__/drag-disable/index.zh-CN.md

@@ -0,0 +1,15 @@
+---
+map:
+  path: /demo/drag-disable
+---
+
+# 禁用拖拽项
+
+### 如何让拖拽容器中部分元素不能进行拖拽？
+
+答：可以使用 `filter` 属性通过传入 `class` 过滤出不需要进行拖拽的元素
+
+<demo src="./filter.vue"
+title="禁用拖拽"
+desc="使左侧列表第一个元素无法进行拖拽">
+</demo>