阻止页面中的链接、图片等元素被拖到桌面生成复制项

Author: MingTianSang

frontend/plugin-manager/src/main.ts

@@ -27,42 +27,47 @@ import { initPluginDashboardYuiGuideRuntime } from './yui-guide-runtime'
 initDarkMode()
 initPluginDashboardYuiGuideRuntime()
 
-function initDecorativeImageDragGuard() {
-  const markImage = (img: HTMLImageElement) => {
-    img.draggable = false
-    img.setAttribute('draggable', 'false')
+function initNativeDragGuard() {
+  const markNativeDragSource = (element: HTMLAnchorElement | HTMLImageElement) => {
+    element.draggable = false
+    element.setAttribute('draggable', 'false')
   }
 
-  const markImages = (root: ParentNode | HTMLImageElement = document) => {
-    if (root instanceof HTMLImageElement) {
-      markImage(root)
+  const markNativeDragSources = (root: ParentNode | HTMLAnchorElement | HTMLImageElement = document) => {
+    if (root instanceof HTMLAnchorElement || root instanceof HTMLImageElement) {
+      markNativeDragSource(root)
       return
     }
-    root.querySelectorAll<HTMLImageElement>('img').forEach(markImage)
+    root.querySelectorAll<HTMLAnchorElement | HTMLImageElement>('a[href], img').forEach(markNativeDragSource)
   }
 
   const handleDragStart = (event: DragEvent) => {
-    if (event.target instanceof HTMLImageElement) {
+    const target = event.target
+    if (
+      target instanceof HTMLAnchorElement
+      || target instanceof HTMLImageElement
+      || (target instanceof Element && target.closest('a[href], img'))
+    ) {
       event.preventDefault()
     }
   }
 
-  markImages(document)
+  markNativeDragSources(document)
   document.addEventListener('dragstart', handleDragStart, true)
 
   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
       mutation.addedNodes.forEach((node) => {
         if (node instanceof Element) {
-          markImages(node)
+          markNativeDragSources(node)
         }
       })
     })
   })
   observer.observe(document.documentElement, { childList: true, subtree: true })
 }
 
-initDecorativeImageDragGuard()
+initNativeDragGuard()
 
 console.log('🚀 Starting N.E.K.O Plugin Management System...')
 

static/css/base.css

@@ -39,6 +39,7 @@ button img,
 
 img,
 svg,
+a[href],
 [aria-hidden="true"] img {
     -webkit-user-drag: none;
     -khtml-user-drag: none;

static/js/window_controls.js

@@ -3,6 +3,7 @@
 
     const CONTROL_SELECTOR = '[data-neko-window-control]';
     const MAXIMIZE_ICON_SELECTOR = '.neko-window-maximize-icon';
+    const NATIVE_DRAG_SOURCE_SELECTOR = 'a[href], img, svg, video, audio';
 
     function translate(key, fallback) {
         try {
@@ -121,6 +122,19 @@
         }
     }
 
+    function initNativeDragGuard() {
+        if (window.__nekoNativeDragGuardBound) return;
+        window.__nekoNativeDragGuardBound = true;
+
+        document.addEventListener('dragstart', (event) => {
+            const target = event.target;
+            if (!target || typeof target.closest !== 'function') return;
+            const source = target.closest(NATIVE_DRAG_SOURCE_SELECTOR);
+            if (!source) return;
+            event.preventDefault();
+        }, true);
+    }
+
     async function restoreCurrentWindowFromOpener() {
         const api = window.nekoWindowControl;
         if (!api || typeof api.restore !== 'function') return;
@@ -139,8 +153,12 @@
     });
 
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initWindowControls);
+        document.addEventListener('DOMContentLoaded', () => {
+            initWindowControls();
+            initNativeDragGuard();
+        });
     } else {
         initWindowControls();
+        initNativeDragGuard();
     }
 })();