남산 아래 개발자들

안녕하세요. 명동섞어찌개입니다. 오늘은 Angular 를 이용한 파일 업로드 기능 개발 시 편리한 사용성을 위해 Drag and Drop 드래그 앤 드랍 기능을 추가하는 방법을 알아볼건데요, vanila javascript (순수 자바스크립트) 로 개발하면 익스플로러와 크롬 브라우저 등 브라우저 별 예외처리가 필요해서 시간이 꽤 걸리는 일이지만 (개인적으로 0 부터 시작해서 개발했을 때 다른 업무 처리하면서 일주일 정도 걸렸습니다..) Angular 는 directive 를 사용해서 간편하게 개발할 수 있더라구요. Angular Version: 8 결과화면 1. 먼저 drag-and-drop directive 를 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 import { Directive , EventEmitter , Host , HostBinding , HostListener , Input , Output } from ' @angular / core' ; @Directive ({ selector: ' [ appDragDrop ] ' }) export class DragDropDirective { @Output () onFileDropped = new EventEmitter < any >(); @Input ( 'draggable' ) public draggable = true ; @HostBinding ( 'hintLine' ) public deco = false ; @HostBinding ( 'style . b...