Modify prevent drag

BusHanyang · Oct 8, 2023 · 5526ad6 · 5526ad6
1 parent 4208808
commit 5526ad6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -20,7 +20,7 @@ const Apps = styled.div`
   ${tw`
     h-full pl-5 pr-5 bg-white text-black font-Ptd text-center mx-auto select-none max-w-7xl relative
     dark:bg-zinc-800 dark:text-white
-  `} drag-save-n
+  `}
 `
 
 const Circle = styled.span`
@@ -240,7 +240,7 @@ function App() {
                   }
                   resistance={3}
                 >
-                  <div className={`${isDarkMode ? 'dark' : ''} h-full`}>
+                  <div className={`${isDarkMode ? 'dark' : ''} h-full`} onContextMenu={(e) => e.preventDefault()}>
                     <Apps>
                       <header className="App-header">
                         <div className="relative">

diff --git a/src/app/components/Realtime.tsx b/src/app/components/Realtime.tsx
@@ -26,7 +26,7 @@ const TimetableWrapper = styled.div`
 `
 
 const HeadlineWrapper = styled.div`
-  ${tw`flex justify-center mb-1 hsm:mb-0`} drag-save-n
+  ${tw`flex justify-center mb-1 hsm:mb-0`}
 `
 
 const Headline = styled.h2`
@@ -182,18 +182,18 @@ const getDestination = (bstatnNm: string): string => {
 
 const getRapidOrLastElement = (bstatnNm: string) => {
   if (bstatnNm.includes('막차')) {
-    return <img className="h-4 ml-[0.15rem]" src={t('last_train_img')} />
+    return <img className="h-4 ml-[0.15rem]" src={t('last_train_img')} draggable="false"/>
   } else if (bstatnNm.includes('급행')) {
-    return <img className="h-4 ml-[0.15rem]" src={t('rapid_train_img')} />
+    return <img className="h-4 ml-[0.15rem]" src={t('rapid_train_img')} draggable="false"/>
   }
 }
 
 const getLineMarkElement = (line: string): JSX.Element => {
   if (line === '1004') {
-    return <Chip src="/image/line4.svg" />
+    return <Chip src="/image/line4.svg" draggable="false"/>
   } else if (line === '1075') {
-    return <Chip src={`/image/${t('suin')}.svg`} />
-  } else return <Chip src="/image/helpblack.svg" />
+    return <Chip src={`/image/${t('suin')}.svg`} draggable="false"/>
+  } else return <Chip src="/image/helpblack.svg" draggable="false"/>
 }
 
 const RealtimeAPI = async (url: string): Promise<Array<SingleTrainInfo>> => {
@@ -525,10 +525,12 @@ export const Realtime = ({ station }: ScheduleInfo) => {
         <Chip
           className="pb-2 hm:pb-0 hsm:pb-2 mr-[0.1rem]"
           src="/image/line4.svg"
+          draggable="false"
         />
         <Chip
           className="pb-2 hm:pb-0 hsm:pb-2 mr-1.5"
           src={`/image/${t('suin')}.svg`}
+          draggable="false"
         />
         <Headline>{titleText(station.trim())}</Headline>
       </HeadlineWrapper>

diff --git a/src/index.css b/src/index.css
@@ -2,14 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-.drag-save-n {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -webkit-user-drag: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -user-drag: none;
-}
-
+@layer base{
+    body {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -webkit-user-drag: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        -user-drag: none;
+    }
+}