diff --git a/app/src/protyle/render/av/index.ts b/app/src/protyle/render/av/index.ts
index af975667b..4410589c9 100644
--- a/app/src/protyle/render/av/index.ts
+++ b/app/src/protyle/render/av/index.ts
@@ -1,3 +1,5 @@
+import {fetchPost} from "../../../util/fetch";
+
 export const avRender = (element: Element) => {
     let avElements: Element[] = [];
     if (element.getAttribute("data-type") === "NodeAttributeView") {
@@ -14,69 +16,71 @@ export const avRender = (element: Element) => {
             if (e.getAttribute("data-render") === "true") {
                 return;
             }
-            const data = {
-                title: "table",
-                filter: {},
-                sorts: {},
-                columns: [{
-                    width: 500,
-                    icon: "",
-                    id: "",
-                    name: "columnA",
-                    wrap: false,
-                    type: "",
-                }, {
-                    width: 500,
-                    icon: "",
-                    id: "",
-                    name: "columnB",
-                    wrap: false,
-                    type: "",
-                }],
-                rows: [{
-                    id: "",
-                    cells: [{
-                        value: "a",
-                    }, {
-                        color: "var(--b3-card-error-color)",
-                        bgColor: "var(--b3-card-error-background)",
-                        value: "a1",
-                    }]
-                }, {
-                    id: "",
-                    cells: [{
-                        color: "var(--b3-card-success-color)",
-                        bgColor: "var(--b3-card-success-background)",
-                        value: "b",
-                    }, {
-                        value: "b1",
-                    }]
-                }]
-            };
-            let tableHTML = '<div class="av__row av__row--header" style="background-color: var(--b3-theme-background)"><div class="av__firstcol"><input style="margin-top: 14px" type="checkbox"></div>';
-            data.columns.forEach((column) => {
-                tableHTML += `
+            // const data = {
+            //     title: "table",
+            //     filter: {},
+            //     sorts: {},
+            //     columns: [{
+            //         width: 500,
+            //         icon: "",
+            //         id: "",
+            //         name: "columnA",
+            //         wrap: false,
+            //         type: "",
+            //     }, {
+            //         width: 500,
+            //         icon: "",
+            //         id: "",
+            //         name: "columnB",
+            //         wrap: false,
+            //         type: "",
+            //     }],
+            //     rows: [{
+            //         id: "",
+            //         cells: [{
+            //             value: "a",
+            //         }, {
+            //             color: "var(--b3-card-error-color)",
+            //             bgColor: "var(--b3-card-error-background)",
+            //             value: "a1",
+            //         }]
+            //     }, {
+            //         id: "",
+            //         cells: [{
+            //             color: "var(--b3-card-success-color)",
+            //             bgColor: "var(--b3-card-success-background)",
+            //             value: "b",
+            //         }, {
+            //             value: "b1",
+            //         }]
+            //     }]
+            // };
+            fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-node-id")}, (response) => {
+                const data = response.data
+                let tableHTML = '<div class="av__row av__row--header" style="background-color: var(--b3-theme-background)"><div class="av__firstcol"><input style="margin-top: 14px" type="checkbox"></div>';
+                data.columns.forEach((column) => {
+                    tableHTML += `
 <div class="av__cell" style="width: ${column.width}px;">${column.name}</div>`
-            });
-            tableHTML += `<div class="block__icons">
+                });
+                tableHTML += `<div class="block__icons">
     <div class="block__icon block__icon--show"><svg><use xlink:href="#iconAdd"></use></svg></div>
     <div class="fn__space"></div>
     <div class="block__icon block__icon--show"><svg><use xlink:href="#iconMore"></use></svg></div>
 </div>
 </div>`;
-            data.rows.forEach((row) => {
-                tableHTML += '<div class="av__row"><div class="av__firstcol"><input type="checkbox"></div>';
-                row.cells.forEach((cell, index) => {
-                    tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width}px;background-color: ${cell.bgColor};color: ${cell.color}">${cell.value}</div>`
+                data.rows.forEach((row) => {
+                    tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><input type="checkbox"></div>`;
+                    row.cells.forEach((cell, index) => {
+                        tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width}px;background-color: ${cell.bgColor||""};color: ${cell.color||""}">${cell.value}</div>`
+                    });
+                    tableHTML += `<div></div></div>`;
                 });
-                tableHTML += `<div></div></div>`;
-            });
-            const paddingLeft = e.parentElement.style.paddingLeft;
-            const paddingRight = e.parentElement.style.paddingRight;
-            // 10: ::-webkit-scrollbar width
-            e.style.width = (e.parentElement.clientWidth - 10) + "px";
-            e.style.alignSelf = "center";
-            e.firstElementChild.outerHTML = `<div>
+                const paddingLeft = e.parentElement.style.paddingLeft;
+                const paddingRight = e.parentElement.style.paddingRight;
+                // 10: ::-webkit-scrollbar width
+                e.style.width = (e.parentElement.clientWidth - 10) + "px";
+                e.style.alignSelf = "center";
+                e.firstElementChild.outerHTML = `<div>
     <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight}">
         <div>
             <div>tab1</div>
@@ -96,7 +100,8 @@ export const avRender = (element: Element) => {
         </div>
     </div>
 </div>`;
-            e.setAttribute("data-render", "true");
+                e.setAttribute("data-render", "true");
+            })
         });
     }
 };
diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts
index eb4bcc618..83dd13e4e 100644
--- a/app/src/protyle/util/editorCommonEvent.ts
+++ b/app/src/protyle/util/editorCommonEvent.ts
@@ -727,7 +727,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
             event.stopPropagation();
             return;
         }
-        const targetElement = hasClosestBlock(event.target);
+        const targetElement = hasClosestByClassName(event.target, "av__row") || hasClosestBlock(event.target);
         let gutterType = "";
         for (const item of event.dataTransfer.items) {
             if (item.type.startsWith(Constants.SIYUAN_DROP_GUTTER)) {
@@ -792,19 +792,28 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
 
                 hideElements(["gutter"], protyle);
                 const targetClass = targetElement.className.split(" ");
-                if (targetElement.className.indexOf("dragover__") === -1) {
+                if (targetElement.classList.contains("av__row")) {
                     // 拖拽到属性视图内
-                    transaction(protyle, [{
-                        action: "insertAttrViewBlock",
-                        id: targetElement.getAttribute("data-node-id"),
-                        parentID: targetElement.getAttribute("data-av-id"),
-                        previousID: "",
-                        srcIDs: sourceIds,
-                    }], [{
-                        action: "removeAttrViewBlock",
-                        id: targetElement.getAttribute("data-node-id"),
-                        parentID: targetElement.getAttribute("data-av-type"),
-                    }]);
+                    const blockElement = hasClosestBlock(targetElement);
+                    if (blockElement) {
+                        let previousID = ""
+                        if (targetElement.classList.contains("dragover__bottom")) {
+                            previousID = targetElement.getAttribute("data-id") || ""
+                        } else {
+                            previousID = targetElement.previousElementSibling?.getAttribute("data-id") || ""
+                        }
+                        transaction(protyle, [{
+                            action: "insertAttrViewBlock",
+                            id: blockElement.getAttribute("data-node-id"),
+                            parentID: blockElement.getAttribute("data-av-id"),
+                            previousID,
+                            srcIDs: sourceIds,
+                        }], [{
+                            action: "removeAttrViewBlock",
+                            id: targetElement.getAttribute("data-node-id"),
+                            parentID: targetElement.getAttribute("data-av-type"),
+                        }]);
+                    }
                     return;
                 }
                 targetElement.classList.remove("dragover__bottom", "dragover__top", "dragover__left", "dragover__right", "protyle-wysiwyg--select");
@@ -918,8 +927,8 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
         }
         // 编辑器内文字拖拽或资源文件拖拽或按住 alt/shift 拖拽反链图标进入编辑器时不能运行 event.preventDefault()， 否则无光标; 需放在 !window.siyuan.dragElement 之后
         event.preventDefault();
-        const targetElement = hasClosestBlock(event.target) as Element;
-        if (!targetElement) {
+        const targetElement = hasClosestByClassName(event.target, "av__row") || hasClosestBlock(event.target) as Element;
+        if (!targetElement || targetElement?.classList.contains("av")) {
             return;
         }
         const fileTreeIds = (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE) && window.siyuan.dragElement) ? window.siyuan.dragElement.innerText : "";
@@ -940,9 +949,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 return;
             }
 
-            if (event.clientX < nodeRect.left + 32 && event.clientX > nodeRect.left) {
+            if (event.clientX < nodeRect.left + 32 && event.clientX > nodeRect.left &&
+                !targetElement.classList.contains("av__row")) {
                 targetElement.classList.add("dragover__left", "protyle-wysiwyg--select");
-            } else if (event.clientX > nodeRect.right - 32 && event.clientX < nodeRect.right) {
+            } else if (event.clientX > nodeRect.right - 32 && event.clientX < nodeRect.right &&
+                !targetElement.classList.contains("av__row")) {
                 targetElement.classList.add("dragover__right", "protyle-wysiwyg--select");
             } else {
                 if (event.clientY > nodeRect.top + nodeRect.height / 2 && disabledPosition !== "bottom") {
@@ -997,12 +1008,21 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 // 列表项不能拖入列表上方块的下面
                 disabledPosition = "bottom";
             }
-            dragoverElement = targetElement;
+            const avRowElement = hasClosestByClassName(event.target, "av__row")
+            if (targetElement.classList.contains("av") && avRowElement) {
+                if (avRowElement.classList.contains("av__row--header")) {
+                    // 表头之前不能插入
+                    disabledPosition = "top";
+                }
+                dragoverElement = avRowElement;
+            } else {
+                dragoverElement = targetElement;
+            }
         }
     });
     editorElement.addEventListener("dragleave", (event: DragEvent & { target: HTMLElement }) => {
-        const nodeElement = hasClosestBlock(event.target);
-        if (nodeElement) {
+        const nodeElement = hasClosestByClassName(event.target, "av__row") || hasClosestBlock(event.target);
+        if (nodeElement && !nodeElement.classList.contains("av")) {
             let gutterType = "";
             for (const item of event.dataTransfer.items) {
                 if (item.type.startsWith(Constants.SIYUAN_DROP_GUTTER)) {
@@ -1016,6 +1036,9 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 nodeElement.removeAttribute("select-end");
             }
             nodeElement.classList.remove("dragover__top", "dragover__bottom", "dragover__left", "dragover__right");
+            if (nodeElement.classList.contains("av__row")) {
+                nodeElement.classList.remove("protyle-wysiwyg--select");
+            }
         }
     });
 };