VCL 라이브러리의 경우 Borland는 자체 버전의 Drag&Drop 인터페이스("드래그"로 번역됨)를 구현했습니다. 이 인터페이스는 내부적입니다. "(양식 자체 제외) 양식 내에서 모든 델파이 컨트롤을 보내고 받을 수 있습니다. 해당 Windows API 기능을 사용하지 않고 구현됩니다. 끌어서 놓기로 다른 작업과의 통신을 구성할 때 사용해야 합니다. .
클릭 왼쪽 버튼컨트롤 위에 마우스를 가져가면 다른 요소로 "끌어올" 수 있습니다. 프로그래머의 관점에서 이것은 키를 드래그하고 놓는 순간 드래그된 객체에 대한 포인터, 현재 커서 좌표 등 필요한 모든 정보를 전송하는 특정 이벤트가 생성된다는 것을 의미합니다. 이벤트 수신기는 요소입니다 그 위에 이 순간커서가 위치합니다. 이러한 이벤트에 대한 처리기는 주어진 컨트롤이 "보내기"를 수락하는지 여부를 시스템에 알려야 합니다. 수신기 컨트롤 위에서 버튼을 놓으면 수신기의 준비 상태에 따라 하나 또는 두 개의 이벤트가 더 발생합니다.
취소드래그 현재 끌어서 놓기 또는 끌어서 놓기 작업을 취소합니다.
함수 FindDragTarget(const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;
이 함수는 기본 클래스의 객체를 반환합니다.티컨트롤 , 이는 Pos 매개변수에 의해 지정된 좌표로 화면 위치를 나타냅니다. 이 기능은 끌어서 놓기 또는 끌어서 놓기 작업의 잠재적 수신자를 결정하는 데 사용됩니다. 지정된 위치에 대한 창 컨트롤이 없으면 함수는 다음을 반환합니다.무 . AllowDisabled 매개 변수는 비활성화된 개체를 고려할지 여부를 결정합니다.
함수 IsDragObject(보낸 사람: TObject): 부울 ;
이 함수는 Sender 매개변수에 지정된 개체가 클래스의 자손인지 여부를 결정합니다. TDragObject . 이 기능 OnDragOver 및 OnDockOver 이벤트 처리기에서 Source 매개 변수로 사용하여 드래그한 개체가 허용되는지 여부를 결정할 수 있습니다. 또한 기능 IsDragObject드래그한 개체를 올바르게 해석하기 위해 OnDragDrop 및 OnDockDrop 이벤트 처리기에서 Source 매개 변수로 사용할 수 있습니다.
DragMode, DragCursor 속성, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag 메서드, Accept 매개변수
마우스로 한 개체에서 다른 개체로 정보를 드래그하는 프로세스는 Widows에서 널리 사용됩니다.폴더 간 파일 이동, 폴더 자체 이동 등을 수행할 수 있습니다.
드래그 앤 드롭 프로세스와 관련된 모든 속성, 메서드 및 이벤트는 모든 Delphi 시각적 구성 요소의 부모인 TControl 클래스에 정의됩니다. 따라서 모든 구성 요소에 공통적입니다.
끌기의 시작은 디자인 타임에 설정하거나 dmManual 또는 dmAutomatic과 프로그래밍 방식으로 동일하게 설정할 수 있는 DragMode 속성에 의해 결정됩니다. dmAutomatic(automatic) 값은 사용자가 구성 요소 위에서 마우스 버튼을 클릭할 때 끌기 프로세스의 자동 시작을 결정합니다. 그러나 이 경우 사용자가 마우스 버튼을 누른 것과 관련된 OnMouseDown 이벤트는 이 구성 요소에 대해 전혀 발생하지 않습니다.
구성 요소를 전송 및 수신하기 위한 인터페이스는 오래전에 등장했습니다. 응용 프로그램 실행 중에 두 컨트롤 간의 상호 작용을 제공합니다. 이 경우 필요한 모든 작업을 수행할 수 있습니다. 구현의 단순성과 개발의 시대에도 불구하고 많은 프로그래머(특히 초보자)는 이 메커니즘을 모호하고 이국적이라고 생각합니다. 그러나 끌어서 놓기를 사용하면 매우 유용하고 쉽게 구현할 수 있습니다. 이제 우리는 이것을 확인할 것입니다.
메커니즘이 작동하려면 그에 따라 두 가지 컨트롤을 구성해야 합니다. 하나는 소스(Source)이고 두 번째는 수신자(Target)여야 합니다. 이 경우 소스는 아무데도 이동하지 않고 메커니즘에 그대로 등록됩니다.
날 믿어, 충분히 쉽게 변신할 수 있어 X,Y 좌표, OnDragOver 및 OnDragDrop 이벤트의 매개변수를 양식 좌표로 전달합니다.
커서가 가리키고 있는 구성 요소의 왼쪽 및 위쪽 속성으로 작업합니다. 간단한 예를 들어 드리겠습니다. 양식에 메모 구성 요소를 배치하고 할당 속성 정렬 alTop 값. 양식에 패널을 놓고 Align 속성도 alTop으로 설정하고 Height 속성을 작은 값(예: 6 또는 7픽셀)으로 설정합니다. DragMode를 dmAutomatica로, DragCursor를 crVSplit으로 설정합니다. 다른 Memo 컴포넌트를 배치하고 Align을 alClient로 설정합니다. 두 개의 메모 패널을 동시에 선택하고 아래와 같이 공통 OnDragOver 이벤트 핸들러를 만듭니다.
드래그 앤 드롭 기능은 iPad의 성능을 향상시키는 데 도움이 될 수 있습니다. 사용 방법은 다음과 같습니다.
따라서 한 클라우드 스토리지 서비스에서 다른 클라우드 스토리지 서비스로 파일을 이동하고 Safari에서 텍스트를 텍스트 편집 앱으로 복사하여 인용문을 추가하거나 지원파일 저장 응용 프로그램의 특정 사진.
사진, 파일 및 텍스트를 끌어다 놓는 방법
1. 다른 앱으로 드래그하려는 사진, 파일 또는 강조 표시된 텍스트를 길게 터치합니다.
2. 항목을 드래그하여 올바른 장소안에 이 신청서또는 Slide Over 또는 Split View에서 연 다른 항목 및 릴리스.
한 번에 여러 사진 또는 파일을 끌어다 놓는 방법
1. 드래그하려는 사진이나 파일 중 하나를 길게 터치합니다.
2. 현재 항목을 드래그하는 동안 드래그하려는 다른 사진이나 파일을 탭합니다. 이동하고 싶은 만큼의 요소로 다시 수행하십시오.
3. 선택한 모든 개체를 Slide Over 또는 Split View에서 연 다른 응용 프로그램의 지정된 위치로 끌어서 놓습니다.
한 응용 프로그램에서 다른 응용 프로그램으로 텍스트를 드래그하는 방법
1. 드래그하여 선택하려는 텍스트 부분을 길게 누릅니다.
2. 선택 지점을 사용하여 드래그하려는 나머지 텍스트를 강조 표시합니다.
3. 선택한 텍스트를 길게 누릅니다.
4. 텍스트를 배치하려는 응용 프로그램으로 끌어서 놓습니다.
"드래그 앤 드롭"을 사용하여 한 번에 여러 응용 프로그램의 아이콘 위치를 변경하는 방법
대부분의 iOS 드래그 앤 드롭 기능은 iPad에서만 작동하지만 이 트릭은 실제로 iPhone과 iPad 모두에서 작동합니다. 이를 통해 홈 화면에서 다음을 사용하여 애플리케이션의 위치를 구성할 수 있습니다. « 드래그 앤 드롭'을 사용하여 하나씩 이동하지 않습니다.
1. 홈 화면에서 위치를 변경하려는 앱의 아이콘을 길게 터치합니다.
2. 접촉 추가 신청, 또한 이동해야 합니다.
3. 이러한 앱을 원하는 페이지나 폴더로 끌어다 놓습니다.
오랫동안 드래그 앤 드롭 인터페이스를 만들 수 있는 JavaScript 기능이 있었습니다. 그러나 이러한 구현 중 어느 것도 브라우저에 고유하지 않습니다.HTML5에는 끌어서 놓기 인터페이스를 만드는 고유한 방법이 있습니다(JavaScript의 약간의 도움으로). 이 기사에서 우리는 이것이 어떻게 달성될 수 있는지 알려줄 것입니다...
브라우저 지원
HTML5 드래그 앤 드롭은 현재 모든 주요 데스크톱 브라우저(IE 포함(IE 5.5도 부분 지원))에서 지원되지만 인기 있는 모바일 브라우저에서는 지원되지 않습니다.
드래그 앤 드롭 이벤트
드래그 앤 드롭의 각 단계에서 다양한 이벤트가 발생하여 브라우저에서 실행할 JavaScript 코드를 알립니다. 이벤트 목록:
- dragStart: 사용자가 요소를 끌기 시작할 때 시작됩니다.
- dragEnter: 드래그된 요소가 대상 요소 위로 처음 드래그될 때 시작됩니다.
- dragOver: 드래그가 진행되는 동안 마우스가 요소 위로 이동할 때 발생합니다.
- dragLeave: 드래그하는 동안 사용자의 커서가 요소를 떠나면 시작됩니다.
- 드래그: 요소를 드래그하는 동안 마우스를 이동할 때마다 실행됩니다.
- drop: 실제 드롭이 실행될 때 발생합니다.
- dragEnd: 개체를 드래그하는 동안 사용자가 마우스 버튼을 놓을 때 시작됩니다.
이러한 모든 이벤트 리스너를 사용하면 인터페이스가 작동하는 방식을 많이 제어할 수 있습니다.
데이터 전송 객체
여기에서 모든 끌어서 놓기 마술이 발생합니다. 이 개체에는 끌기 작업으로 제출된 데이터가 포함되어 있습니다. 데이터 설정 및 검색 가능 다른 방법들, 그 중 가장 중요한 것은 다음과 같습니다.
- dataTransfer.effectAllowed=value: 허용되는 작업 유형을 반환합니다. 가능한 값: 없음, 복사, copyLink, copyMove, 링크, linkMove, 이동, 모두 초기화되지 않음.
- dataTransfer.setData(format, data): 특정 데이터 및 형식을 추가합니다.
- dataTransfer.clearData(format): 특정 형식의 모든 데이터를 지웁니다.
- dataTransfer.setDragImage(element, x, y): 드래그하려는 이미지를 설정합니다. x 및 y 값은 마우스 커서가 있어야 할 위치를 나타냅니다(0, 0은 왼쪽 상단에 위치).
- data = dataTransfer.getData(format) : 이름에서 알 수 있듯이 특정 형식의 데이터를 반환합니다.
드래그 앤 드롭 예제 만들기
이제 간단한 드래그 앤 드롭 예제를 만들기 시작합니다. 보시다시피 두 개의 작은 div와 하나의 큰 div가 있으므로 작은 div를 큰 div 안에 끌어다가 다시 이동할 수도 있습니다.
개체 끌기
가장 먼저 해야 할 일은 HTML을 만드는 것입니다. draggable 속성을 사용하여 div를 드래그 가능하게 만듭니다.
완료되면 이 요소를 이동하기 시작하는 즉시 실행할 JavaScript 함수를 정의해야 합니다.
기능 dragStart(ev)( ev.dataTransfer.effectAllowed="이동"; ev.dataTransfer.setData("텍스트", ev.target.getAttribute("id")), ev.dataTransfer.setDragImage(ev.target,100,100) ; 참을 반환; )
이 코드에서는 먼저 작업에서 어떤 유형의 효과를 허용하는지 선언하고 이동하도록 설정합니다. 두 번째 줄에서 작업할 데이터를 설정합니다. 여기서 텍스트는 텍스트이고 값은 드래그하는 요소의 ID가 됩니다. 그 후, 우리는 무엇을 드래그할지 설정하는 setDragImage 메소드를 사용하고 드래그하는 동안 커서가 어디에 있을 것인지를 설정하고 큐브는 200 x 200 픽셀이므로 가장 중앙에 배치합니다. 마지막에 return true를 반환합니다.
드롭 개체
요소가 드롭을 허용하려면 dragEnter, dragOver 및 drop 이벤트의 3가지 다른 이벤트를 수신해야 합니다. 따라서 ID가 큰 HTML5 div에 다음을 추가해 보겠습니다.
함수 dragEnter(ev) ( ev.preventDefault(); 반환 true; ) 함수 dragOver(ev) ( ev.preventDefault(); )
첫 번째 함수에서 드래그하는 요소가 드롭이 발생해야 하는 원하는 요소에 도달할 때 어떤 일이 발생해야 하는지 정의합니다. 이 경우 브라우저의 기본 동작만 방지합니다. 다음으로 dragOver 함수에서 기본적으로 드롭이 발생하지 않도록 합니다.
다음 부분에서는 요소가 원하는 대상에 "던질" 때 함수를 정의합니다.
기능 dragDrop(ev) ( var 데이터 = ev.dataTransfer.getData("텍스트"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); 반환 거짓; )
이 마지막 부분에서는 먼저 데이터 변수를 설정하여 사용할 수 있는 모든 데이터를 가져옵니다. 텍스트 형식, 그런 다음 요소를 삭제하려는 div에 데이터를 추가합니다.
드롭 섹션을 대상으로 설정
데모는 두 개의 div를 제자리로 다시 이동할 수 있음을 보여줍니다. 다행히도 다른 놓기 대상을 추가하는 것은 생각보다 훨씬 쉽습니다. 이미 이러한 기능이 있고 이벤트 리스너를 추가하기만 하면 되므로:
그리고 그것이 div를 제자리로 다시 드래그하는 데 필요한 전부입니다.
로 구축된 많은 드래그 앤 드롭 애플리케이션이 있습니다. 자바스크립트 사용라이브러리이며 종종 사용하기 더 쉽습니다. 그러나 우리는 이 HTML5와 자바스크립트 기술, 당신은 당신의 문제를 해결할 수 있는 미래의 잠재력을 보게 될 것입니다.
HTML 드래그 앤 드롭인터페이스를 통해 응용 프로그램은 브라우저에서 끌어서 놓기 기능을 사용할 수 있습니다.사용자가 선택할 수 있습니다 드래그 가능요소를 마우스로 드래그하여 떨어뜨릴 수 있는요소를 클릭하고 마우스 버튼을 놓아 드롭합니다. 반투명 표현 드래그 가능요소는 끌기 작업 중에 포인터를 따릅니다.
웹 사이트, 확장 및 XUL 응용 프로그램의 경우 당신은 할 수 있습니다어떤 요소가 될 수 있는지 사용자 정의 드래그 가능, 피드백 유형 드래그 가능요소가 생성하고 떨어뜨릴 수 있는집단.
HTML 끌어서 놓기에 대한 이 개요에는 인터페이스에 대한 설명, 응용 프로그램에 끌어서 놓기 지원을 추가하는 기본 단계 및 인터페이스의 상호 운용성 요약이 포함됩니다.
드래그 이벤트
| 이벤트 | 이벤트 핸들러에서 | 다음과 같은 경우에 발생합니다. |
|---|---|---|
| 견인 | 온드래그 | …ㅏ 드래그된 항목(요소 또는 텍스트 선택)이 드래그됩니다. |
| 드래젠드 | 온드라젠드 | … 끌기 작업이 종료됩니다(예: 마우스 버튼을 놓기 또는 Esc 키 누르기, 끌기 완료 참조). |
| 드래젠터 | 온드라젠터 | … 드래그한 항목이 유효한 놓기 대상으로 들어갑니다. ( 놓기 대상 지정 을 참조하십시오.) |
| 드래그 엑시트 | 온드라그엑시트 | … 요소는 더 이상 끌기 작업의 즉각적인 선택 대상이 아닙니다. |
| 드래그리브 | 온드라이브 | … 드래그한 항목이 유효한 놓기 대상을 남깁니다. |
| 드래그오버 | 온드래거 | ...끌어놓은 항목이 수백 밀리초마다 유효한 놓기 대상 위로 드래그됩니다. |
| 드래그스타트 | ondragstart | ...사용자가 항목을 끌기 시작합니다. ( 끌기 작업 시작 을 참조하십시오.) |
| 하락 | 하락 | … 아이템이 유효한 놓기 대상에 떨어졌습니다. (드롭 수행을 참조하십시오.) |
메모: OS에서 브라우저로 파일을 드래그할 때 dragstart 및 dragend 이벤트가 발생하지 않습니다.
인터페이스
기본
이 섹션은 응용 프로그램에 끌어서 놓기 기능을 추가하는 기본 단계에 대한 요약입니다.
무엇인지 식별 드래그 가능
요소 만들기 드래그 가능다음 코드 샘플과 같이 draggable 속성과 ondragstart 전역 이벤트 핸들러를 추가해야 합니다.
이 요소는 드래그할 수 있습니다.
자세한 내용은 다음을 참조하세요.
드롭을 처리 효과
drop 이벤트에 대한 핸들러는 애플리케이션별 방식으로 드래그 데이터를 자유롭게 처리할 수 있습니다.
일반적으로 응용 프로그램은 getData() 메서드를 사용하여 드래그 항목을 검색한 다음 그에 따라 처리합니다. 또한 응용 프로그램 의미는 값에 따라 다를 수 있습니다.
드래그 앤 드롭 기술은 수년에 걸쳐 발전해 왔습니다. 당연히 개방형 플러그인을 개발하는 프로그래머의 수가 증가함에 따라 소스 코드(예: jQuery의 경우) 이전 메서드가 부활합니다. JavaScript 라이브러리는 적응력이 뛰어나 이 웹 기술 시대에 많은 개선 사항을 제공합니다.
이 자습서에서는 웹 사이트에서 끌어서 놓기 동적 사각형을 만드는 데 사용할 수 있는 스크립트를 만들 것입니다. 프로세스는 jQuery에 의해 제어됩니다. 이러한 스크립트는 미리 만들어진 기능을 제공하여 시간을 절약합니다! 그리고 드래그 앤 드롭 라이브러리는 다른 프로젝트에서 사용할 수 있습니다.
콘텐츠를 준비합니다
우선, 프로젝트를 위한 작은 웹사이트를 준비할 것입니다. 프로젝트 폴더에서 주목할만한 이름을 가진 두 개의 디렉토리를 생성해야 합니다. "js"그리고 "css"그리고 빈 파일 index.html . 코드는 작업에 대한 명확한 아이디어가 있고 추가 개발 포인트가 있도록 매우 간단합니다.
아래는 우리의 코드입니다 HTML 파일. 장에서 머리우리는 3개의 스크립트를 포함합니다. 기본 jQuery 스크립트는 Google 코드 서버에서 로드됩니다. style.css 파일도 포함되어 있습니다. 여기에는 구성을 위한 주요 속성이 포함되어 있습니다. 모습우리 문서.
나를 끌어
나도 끌릴 수 있어
P.S. 아무데나 떨어뜨릴 수 있습니다!