드래그 앤드 드롭

KDE에서 드래그 앤드 드롭으로 파일을 이동하는 모습 **드래그 앤드 드롭**(Drag-and-drop, 끌어서 놓기)은 컴퓨터 그래픽 사용자 인터페이스 환경에서 시각적인 객체를 클릭하면서 다른 위치나 다른 가상 객체로 드래그하는 행위이다. 수많은 종류의 동작을 일으킬 수 있으며, 두 추상적 대상 사이에 다양한 종류의 연결을 만들 수 있다. 기능 동작에 한하여 모든 소프트웨어에 드래그 앤드 드롭을 사용할 수 있는 것은 아니지만 가끔은 사용자가 작업 수행을 하는 데 빠르고 쉽게 배울 수 있는 기술로 쓰일 수 있다. 그러나 드래그 앤드 드롭 기능으로의 행동 유도성이 부족하므로 항목을 드래그할 수 있는 여부가 늘 확실한 것은 아니다.url-status=dead
# 동작
드래그 앤 드롭의 기본 순서는 다음과 같다. * 포인터를 객체로 이동한다. * 마우스 또는 기타 포인팅 장치의 버튼을 누른 상태로 유지하여 객체를 "잡는다". * 포인터를 원하는 위치로 이동하여 객체를 "드래그"한다. * 버튼을 놓아 객체를 "드롭"한다. 드래그는 버튼을 누르지 않은 상태로 동일한 포인팅 장치를 이동하는 것보다 더 많은 물리적 노력이 필요하다. 이 때문에 사용자는 드래그하는 동안 빠르고 정확하게 움직일 수 없다 (피츠의 법칙 참조). 그러나 드래그 앤 드롭 작업은 두 피연산자(드래그할 객체 및 드롭 위치)를 단일 작업으로 신중하게 묶는 장점이 있다.archive-date=7 June 2004 (그래픽 디자인에서와 같이) 확장된 드래그 앤 드롭은 마우스를 사용하는 손에 스트레스를 줄 수 있다. 동일한 버튼이 항목을 선택하고 드래그할 때 디자인 문제가 발생한다. 부정확한 움직임으로 인해 객체를 선택하려는 시도가 드래그 동작으로 등록될 수 있다. 또 다른 문제는 드롭 대상이 다른 객체 아래에 숨겨져 있을 수 있다는 것이다. 사용자는 드래그를 중지하고 소스와 대상을 모두 보이게 한 다음 다시 시작해야 한다. 클래식 Mac OS에서는 화면 상단의 메뉴 모음이 보편적인 "드래그 취소" 대상으로 사용되었다. 이 문제는 Mac OS X에서 Exposé의 도입으로 해결되었다.
# Mac OS에서
당시 **클릭 앤 드래그**라고 불리던 드래그 앤 드롭은 오리지널 매킨토시에서 파일을 조작하는 데 사용되었다 (예를 들어 디스크 간에 파일을 복사하거나publisher=folklore.org 폴더 간에 복사하는 경우publisher=folklore.org). 시스템 7은 문서 아이콘을 응용 프로그램 아이콘 위에 드롭하여 응용 프로그램에서 문서를 여는 기능을 추가했다. 애플은 시스템 7.5에 "매킨토시 드래그 앤 드롭"을 추가하여 "클릭 앤 드래그"를 문서 내에서 텍스트 콘텐츠를 복사하거나 이동하는 것과 같은 일반적인 클립보드 작업으로 확장했다. 콘텐츠는 파일 시스템으로 드래그하여 "클리핑 파일"을 생성할 수도 있었고, 이 파일은 저장하고 재사용할 수 있었다. 파일은 응용 프로그램 창에 드롭할 수도 있었는데, 예를 들어 문서를 이메일에 첨부하거나 워드 프로세서 문서에 이미지를 추가하는 데 사용되었다. 역사상 대부분의 기간 동안 Mac OS는 버튼이 마우스 상단 표면의 대부분을 차지하는 단일 버튼 마우스를 사용했다. 이는 드래그하는 동안 버튼을 누르고 있는 것에 대한 인체공학적 우려를 완화할 수 있다.
# OS/2에서
OS/2의 Workplace Shell은 보조 마우스 버튼으로 드래그 앤 드롭을 광범위하게 사용하며, 기본 버튼은 선택 및 클릭에 사용한다. 이러한 사용은 다른 고급 Common User Access 기능과 마찬가지로 네이티브 OS/2 응용 프로그램을 플랫폼 독립적 포트와 구별했다.
# 웹 디자인에서

## HTML에서
HTML5 작업 초안 사양에는 드래그 앤 드롭 지원이 포함되어 있다.publisher=w3.org HTML5는 다음과 같은 다양한 종류의 드래그 앤 드롭 기능을 지원한다. * 텍스트 및 HTML 코드 드래그 앤 드롭 * HTML 요소 드래그 앤 드롭 * 파일 드래그 앤 드롭 필요한 작업에 따라 위 유형 중 하나를 사용할 수 있다. HTML 요소가 현재 위치를 이동하기 위해 드래그될 때, 해당 ID는 대상 상위 요소로 전송된다. 따라서 텍스트를 전송하며 첫 번째 그룹으로 간주될 수 있다. 구글의 웹 기반 이메일 응용 프로그램인 Gmail은 최신 구글 크롬 브라우저와 애플의 사파리 (5.x)에서 영상 및 첨부 파일의 드래그 앤 드롭을 지원한다. 구글 이미지는 사용자가 브라우저에 이미지 파일을 드래그 앤 드롭하여 역 이미지 검색을 수행할 수 있도록 허용한다.
## 웹사이트 빌더에서
드래그 앤 드롭 웹사이트 빌더 (DIY 웹사이트 빌더라고도 함)는 웹 개발 경험이나 코딩 언어 지식 없이도 사용자가 다양한 요소를 페이지에 "드래그"하고 "드롭"하는 것만으로 웹사이트를 만들고 사용자 정의할 수 있는 시각적 인터페이스를 제공한다. 노코드 개발 플랫폼은 초기 시각 편집기의 기능을 훨씬 뛰어넘어 발전했다.date=3 November 2022 인공지능의 출현으로 웹사이트 구축이 더욱 빨라졌다.date=12 July 2023 2025년 5월 기준 2,100만 개 이상의 웹사이트가 드래그 앤 드롭 웹사이트 빌더를 사용하여 구축되었다. 시장 선두 주자는 다음과 같다.archive-date=12 May 2025 {| class="wikitable" |- | align=center|1. | Wix.com | align=center|7.0M | align=center|33% |- | align=center|2. | Squarespace | align=center|5.2M | align=center|25% |- | align=center|3. | GoDaddy | align=center|4.1M | align=center|19% |- | align=center|4. | Weebly | align=center|0.7M | align=center| 03% |}
# 터치스크린에서
터치스크린 인터페이스에는 드래그 앤 드롭 또는 더 정확하게는 길게 누른 다음 드래그하는 기능이 포함된다. 예를 들어 아이폰 또는 안드로이드 홈 화면에서 볼 수 있다. iOS 11은 아이패드에서 사용자가 앱 내 또는 앱 간에 항목을 터치(다른 손가락으로 탭하여 더 많은 항목을 드래그)할 수 있는 드래그 앤 드롭 기능을 구현한다.access-date=10 October 2017 아이폰에서는 이 기능이 사용자가 드래그를 시작한 동일한 앱 내에서만 사용할 수 있다.access-date=23 June 2017
# 최종 사용자 프로그래밍에서
드래그 앤 드롭은 많은 최종 사용자 개발 시스템에서 중요한 프로그램 구성 접근 방식으로 간주된다. 보다 전통적인 텍스트 기반 프로그래밍 언어와 달리, 많은 최종 사용자 프로그래밍 언어는 최종 사용자가 드래그 앤 드롭 인터페이스를 통해 조작하는 타일 또는 아이콘과 같은 시각적 구성 요소를 기반으로 한다. 아이들을 위한 프로그래밍 환경인 AgentSheetsurl-status=dead는 드래그 앤 드롭 블록 프로그래밍의 현대적 개념을 도입하여 4가지 핵심 기능을 제공했다. 1) 최종 사용자가 조합 가능한 블록, 2) 최종 사용자가 편집 가능한 블록, 3) 트리 구조를 나타내기 위해 블록을 중첩할 수 있음, 4) 구문을 정의하기 위해 블록이 기하학적으로 배열됨. 드래그 앤 드롭은 블렌더와 같은 그래픽 도구의 많은 셰이더 편집 프로그램에도 포함되어 있다.url-status=dead 드래그 앤 드롭은 언리얼 엔진, GameMaker Studio, Construct 2 및 확장 기능을 포함한 일부 비디오 게임 엔진인 유니티에서도 사용된다.
# 예시
일반적인 예는 가상 데스크톱 환경에서 파일을 삭제하기 위해 아이콘을 특별한 휴지통 아이콘으로 드래그하는 것이다. 추가 예시는 다음과 같다. * 데이터 파일을 프로그램 아이콘 또는 창으로 드래그하여 보거나 처리하는 것. 예를 들어, 텍스트 파일을 나타내는 아이콘을 마이크로소프트 워드 창으로 드롭하는 것은 "이 문서를 워드에서 새 문서로 열기"를 의미한다. * 파일을 새 위치/디렉토리/폴더로 이동하거나 복사하는 것. * 처리할 객체 목록에 객체를 추가하는 것. * 그래픽 사용자 인터페이스에서 위젯을 재정렬하여 레이아웃을 사용자 정의하는 것. * 속성을 명령이 적용될 객체로 드래그하는 것. ** 예를 들어, 색상을 그래픽 객체로 드래그하여 색상을 변경하는 것. * 도구를 캔버스 위치로 드래그하여 해당 위치에 도구를 적용하는 것. * 한 위치 또는 단어에서 다른 위치 또는 문서로 하이퍼링크를 만드는 것. * 대부분의 워드 프로세서는 선택한 텍스트를 한 지점에서 다른 지점으로 드래그할 수 있도록 허용한다. * 셰이더 및 재료 설계를 위해 블렌더에서와 같이 일련의 코드 블록을 드래그하는 것.