🎨 https://github.com/siyuan-note/siyuan/issues/10414

app/src/assets/scss/business/_av.scss

@@ -28,6 +28,10 @@
     cursor: auto;
   }
 
+  &[data-av-type="gallery"] > .av__container {
+    overflow: inherit;
+  }
+
   &__pulse {
     width: 70%;
     height: 23px;
@@ -289,6 +293,25 @@
       &--select {
         background-color: var(--b3-theme-primary-lightest);
       }
+
+      &.dragover__left::after,
+      &.dragover__right::after {
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        content: '';
+        position: absolute;
+        background-color: var(--b3-theme-primary-lighter);
+        z-index: 3;
+      }
+
+      &.dragover__left::after {
+        left: -11px;
+      }
+
+      &.dragover__right::after {
+        right: -11px;
+      }
     }
 
     &-cover {
@@ -303,21 +326,27 @@
       &--0 {
         aspect-ratio: 16/9;
       }
+
       &--1 {
         aspect-ratio: 9/16;
       }
+
       &--2 {
         aspect-ratio: 4/3;
       }
+
       &--3 {
         aspect-ratio: 3/4;
       }
+
       &--4 {
         aspect-ratio: 3/2;
       }
+
       &--5 {
         aspect-ratio: 2/3;
       }
+
       &--6 {
         aspect-ratio: 1;
       }

app/src/protyle/gutter/index.ts

@@ -89,7 +89,7 @@ export class Gutter {
             let avElement: Element;
             if (buttonElement.dataset.rowId) {
                 avElement = Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-node-id="${buttonElement.dataset.nodeId}"]`)).find((item: HTMLElement) => {
-                    if (!isInEmbedBlock(item)) {
+                    if (!isInEmbedBlock(item) && !isInAVBlock(item)) {
                         return true;
                     }
                 });

app/src/protyle/render/av/gallery/item.ts

@@ -26,9 +26,10 @@ export const insertGalleryItemAnimation = (options: {
         !options.blockElement.querySelector('[data-type="av-load-more"]').classList.contains("fn__none")) {
         needUpdate = ' data-need-update="true"';
     }
+    const coverClass = sideItemElement.querySelector(".av__gallery-cover").className;
     options.srcIDs.forEach((id) => {
         html += `<div class="av__gallery-item"${needUpdate} data-type="ghost" data-id="${id}">
-    <div class="av__gallery-cover"><span style="width: 100%;height: 100%;border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;" class="av__pulse"></span></div>
+    <div class="${coverClass}"><span style="width: 100%;height: 100%;border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;" class="av__pulse"></span></div>
     <div class="av__gallery-fields"><span class="av__pulse"></span></div>
 </div>`;
     });

app/src/protyle/render/av/gallery/render.ts

@@ -59,7 +59,7 @@ export const renderGallery = (options: {
         let galleryHTML = "";
         // body
         view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
-            galleryHTML += `<div data-id="${item.id}" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
+            galleryHTML += `<div data-id="${item.id}" draggable="true" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
             if (view.coverFrom !== 0) {
                 const coverClass= "av__gallery-cover av__gallery-cover--" + view.cardAspectRatio
                 if (item.coverURL) {

app/src/protyle/util/editorCommonEvent.ts

@@ -33,6 +33,7 @@ import {webUtils} from "electron";
 /// #endif
 import {addDragFill} from "../render/av/cell";
 import {processClonePHElement} from "../render/util";
+import {insertGalleryItemAnimation} from "../render/av/gallery/item";
 
 const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element,
                    isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => {
@@ -838,6 +839,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.getAttribute("data-col-id")]}`,
                     target.outerHTML);
                 return;
+            } else if (target.classList.contains("av__gallery-item")) {
+                window.siyuan.dragElement = target;
+                event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}GalleryItem${Constants.ZWSP}${[target.getAttribute("data-id")]}`,
+                    target.outerHTML);
+                return;
             }
         }
         // 选中编辑器中的文字进行拖拽
@@ -988,7 +994,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                         }
                     }
                 } else if (targetElement.classList.contains("av__row")) {
-                    // 拖拽到属性视图内
+                    // 拖拽到属性视图 table 内
                     const blockElement = hasClosestBlock(targetElement);
                     if (blockElement) {
                         let previousID = "";
@@ -1047,6 +1053,71 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                             insertAttrViewBlockAnimation(protyle, blockElement, sourceIds, previousID);
                         }
                     }
+                } else if (targetElement.classList.contains("av__gallery-item")) {
+                    // 拖拽到属性视图 gallery 内
+                    const blockElement = hasClosestBlock(targetElement);
+                    if (blockElement) {
+                        let previousID = "";
+                        if (targetClass.includes("dragover__right")) {
+                            previousID = targetElement.getAttribute("data-id") || "";
+                        } else {
+                            previousID = targetElement.previousElementSibling?.getAttribute("data-id") || "";
+                        }
+                        const avID = blockElement.getAttribute("data-av-id");
+                        if (gutterTypes[1] === "galleryitem" && gutterTypes[0] === "nodeattributeview") {
+                            // gallery item 内部拖拽
+                            const doOperations: IOperation[] = [];
+                            const undoOperations: IOperation[] = [];
+                            const undoPreviousId = blockElement.querySelector(`.av__gallery-item[data-id="${selectedIds[0]}"]`).previousElementSibling.getAttribute("data-id") || "";
+                            selectedIds.reverse().forEach(item => {
+                                if (previousID !== item && undoPreviousId !== previousID) {
+                                    doOperations.push({
+                                        action: "sortAttrViewRow",
+                                        avID,
+                                        previousID,
+                                        id: item,
+                                        blockID: blockElement.dataset.nodeId,
+                                    });
+                                    undoOperations.push({
+                                        action: "sortAttrViewRow",
+                                        avID,
+                                        previousID: undoPreviousId,
+                                        id: item,
+                                        blockID: blockElement.dataset.nodeId,
+                                    });
+                                }
+                            });
+                            transaction(protyle, doOperations, undoOperations);
+                        } else {
+                            const newUpdated = dayjs().format("YYYYMMDDHHmmss");
+                            transaction(protyle, [{
+                                action: "insertAttrViewBlock",
+                                avID,
+                                previousID,
+                                srcs,
+                                blockID: blockElement.dataset.nodeId
+                            }, {
+                                action: "doUpdateUpdated",
+                                id: blockElement.dataset.nodeId,
+                                data: newUpdated,
+                            }], [{
+                                action: "removeAttrViewBlock",
+                                srcIDs: sourceIds,
+                                avID,
+                            }, {
+                                action: "doUpdateUpdated",
+                                id: blockElement.dataset.nodeId,
+                                data: blockElement.getAttribute("updated")
+                            }]);
+                            blockElement.setAttribute("updated", newUpdated);
+                            insertGalleryItemAnimation({
+                                protyle,
+                                blockElement,
+                                srcIDs: sourceIds,
+                                previousId: previousID
+                            });
+                        }
+                    }
                 } else if (sourceElements.length > 0) {
                     if (targetElement.parentElement.getAttribute("data-type") === "NodeSuperBlock" &&
                         targetElement.parentElement.getAttribute("data-sb-layout") === "col") {
@@ -1290,11 +1361,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
         }
         const fileTreeIds = (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE) && window.siyuan.dragElement) ? window.siyuan.dragElement.innerText : "";
         if (event.shiftKey || (event.altKey && fileTreeIds.indexOf("-") === -1)) {
-            const targetAssitElement = hasClosestBlock(event.target);
+            const targetAssetElement = hasClosestBlock(event.target);
-            if (targetAssitElement) {
+            if (targetAssetElement) {
-                targetAssitElement.classList.remove("dragover__top", "protyle-wysiwyg--select", "dragover__bottom", "dragover__left", "dragover__right");
+                targetAssetElement.classList.remove("dragover__top", "protyle-wysiwyg--select", "dragover__bottom", "dragover__left", "dragover__right");
-                targetAssitElement.removeAttribute("select-start");
+                targetAssetElement.removeAttribute("select-start");
-                targetAssitElement.removeAttribute("select-end");
+                targetAssetElement.removeAttribute("select-end");
             } else {
                 // https://github.com/siyuan-note/siyuan/issues/14177
                 editorElement.querySelectorAll(".dragover__top, .protyle-wysiwyg--select, .dragover__bottom, .dragover__left, .dragover__right").forEach((item: HTMLElement) => {
@@ -1308,7 +1379,14 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
         }
         // 编辑器内文字拖拽或资源文件拖拽或按住 alt/shift 拖拽反链图标进入编辑器时不能运行 event.preventDefault()， 否则无光标; 需放在 !window.siyuan.dragElement 之后
         event.preventDefault();
-        targetElement = hasClosestByClassName(event.target, "av__row") || hasClosestByClassName(event.target, "av__row--util") || hasClosestBlock(event.target);
+        targetElement = hasClosestByClassName(event.target, "av__gallery-item") ||
+            hasClosestByClassName(event.target, "av__row") || hasClosestByClassName(event.target, "av__row--util") ||
+            hasClosestBlock(event.target);
+        if (targetElement && targetElement.getAttribute("data-av-type") === "gallery" &&
+            event.target.classList.contains("av__gallery")) {
+            // 拖拽到属性视图 gallery 内，但没选中 item
+            return;
+        }
         const point = {x: event.clientX, y: event.clientY, className: ""};
 
         // 超级块中有a，b两个段落块，移动到 ab 之间的间隙 targetElement 会变为超级块，需修正为 a
@@ -1377,6 +1455,12 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 (window.siyuan.dragElement && !window.siyuan.dragElement.contains(targetElement))) {
                 targetElement = false;
             }
+        } else if (targetElement && gutterType && gutterType.startsWith(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}GalleryItem${Constants.ZWSP}`.toLowerCase())) {
+            // gallery item 只能拖拽当前 av 中
+            const galleryElement = hasClosestByClassName(event.target, "av__gallery");
+            if (!galleryElement || !galleryElement.contains(window.siyuan.dragElement) || targetElement.isSameNode(window.siyuan.dragElement)) {
+                targetElement = false;
+            }
         }
         if (!targetElement) {
             return;
@@ -1432,6 +1516,15 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 }
                 return;
             }
+            if (targetElement.classList.contains("av__gallery-item")) {
+                const midLeft = nodeRect.left + nodeRect.width / 2;
+                if (event.clientX < midLeft && event.clientX > nodeRect.left - 13) {
+                    targetElement.classList.add("dragover__left");
+                } else if (event.clientX > midLeft && event.clientX <= nodeRect.right + 13) {
+                    targetElement.classList.add("dragover__right");
+                }
+                return;
+            }
             if (event.clientX < nodeRect.left + 32 && event.clientX >= nodeRect.left - 1 &&
                 !targetElement.classList.contains("av__row")) {
                 targetElement.classList.add("dragover__left");