Way to be gorgeous developer

  • 홈
  • 방명록

Client/Javascript 1

Javascript) Drag and Drop Image Upload - Svelte

파일 폼 없이 드래그 앤 드랍으로 이미지를 업로드를 하고싶었다. 텍스트 공간에 이미지를 끌어넣고 텍스트처럼 위치를 조정하고 싶었다. Typescript, Svelte를 사용했다. // src/components/Email/email.svelte Send description이란 텍스트 공간을 div 태그로 구성했다. 이메일 폼을 만드느라 table을 사용했는데 이는 무관하다. 텍스트 전체가 드래그 되지 않게 draggable="false" 이미지가 드랍되면 새 창을 열지 않는 drop 이벤트. 이미지를 드래그하기 시작하면 마우스 위치 왼쪽 모서리에 잡히게 디자인한 dragstart 이벤트. 스토어를 사용하지 않아 드랍된 이미지를 텍스트에 img 태그로 저장하는 dragend 이벤트를 사용했다. 가장 중요..

Client/Javascript 2023.03.24
1
더보기
프로필사진

공부한 내용을 기록한 블로그입니다. 잘못된 내용은 알려주시면 다시 공부하여 수정하겠습니다.

방문자수Total

  • Today :
  • Yesterday :
  • 분류 전체보기 (327)
    • Client (40)
      • Next.js (12)
      • Unity (11)
      • VueJS 3.0 (9)
      • ReactJS & React-Native (6)
      • Javascript (1)
      • Nuxt3 (1)
    • Server (192)
      • C++ (77)
      • NodeJS & NestJS (48)
      • DB (25)
      • Linux (13)
      • C# (13)
      • Java (7)
      • Go (4)
      • Python (2)
      • Infta (3)
    • Settings (31)
      • Git (6)
      • Setting (23)
    • Study (50)
      • 에러 정리 (21)
      • 끄적끄적 (7)
      • 이론정리 (1)
      • 알고리즘 문제풀이 (10)
      • 알고리즘 이론 (11)
    • 생각정리 (8)
    • 개인 자료 (1)
방명록

최근글과 인기글

  • 최근글
  • 인기글

Copyright © Kakao Corp. All rights reserved.

  • git
  • instagram
  • resume

티스토리툴바