diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 4f9c2e528..06d7370c6 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -345,6 +345,7 @@ object-fit: cover; width: 100%; object-position: center; + pointer-events: none; &--fit { object-fit: contain; diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts index af0dd400d..0edfd8812 100644 --- a/app/src/protyle/util/editorCommonEvent.ts +++ b/app/src/protyle/util/editorCommonEvent.ts @@ -850,12 +850,16 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { } else if (target.classList.contains("av__gallery-item")) { const blockElement = hasClosestBlock(target); if (blockElement) { + target.classList.add("av__gallery-item--select"); const ghostElement = document.createElement("div"); - ghostElement.className = "protyle-wysiwyg protyle-wysiwyg--attr"; - ghostElement.append(processClonePHElement(target.cloneNode(true) as Element)); - ghostElement.setAttribute("style", `position:fixed;opacity:.1;padding:0; -width:${target.clientWidth}px;;height:${target.clientHeight}px;`); - ghostElement.querySelector(".av__gallery-fields").setAttribute("style", "background-color: var(--b3-theme-background)"); + ghostElement.className = "protyle-wysiwyg protyle-wysiwyg--attr " + target.parentElement.className; + blockElement.querySelectorAll(".av__gallery-item--select").forEach(item => { + const cloneItem = processClonePHElement(item.cloneNode(true) as Element); + cloneItem.setAttribute("style", `width:${item.clientWidth}px;;height:${item.clientHeight}px;`); + cloneItem.querySelector(".av__gallery-fields").setAttribute("style", "background-color: var(--b3-theme-background)"); + ghostElement.append(cloneItem); + }); + ghostElement.setAttribute("style", "position:fixed;opacity:.1;padding:0;z-index:1;"); document.body.append(ghostElement); event.dataTransfer.setDragImage(ghostElement, -10, -10); setTimeout(() => { @@ -870,7 +874,7 @@ width:${target.clientWidth}px;;height:${target.clientHeight}px;`); selectIds.push(target.getAttribute("data-id")); } event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}GalleryItem${Constants.ZWSP}${selectIds}`, - target.outerHTML); + ghostElement.outerHTML); } return; }