드래그 앤 드롭은 공통적 인 기능, 즉 캡처 객체 후에 다른 위치로 드래그합니다. 드래그 앤 드롭은 표준의 표준 부분입니다. HTML5에서 사용자는 마우스를 사용하여 드래그 요소를 선택하고 요소를 위치 가능한 요소로 드래그 한 다음 마우스 버튼을 이러한 요소에 넣을 수 있습니다. 드래그 작동 중에, 마우스 포인터를 나타내는 반 -트랜스 파렌트를 드래그 할 수있다.
요소가 드래그 될 수 있기를 희망한다면 드래그 가능한 속성을 True로 설정해야합니다 (태그 드래그 가능한 기본값은 참)).
드래그 앤 드롭 이벤트드래그 앤 드롭 작업의 여러 단계에서 여러 이벤트가 트리거 될 것이며, 드래그 및 드래그 사건의 Datatransfer 속성은 관련 데이터를 드래그 앤 드롭 작업에 저장해야합니다.
| 드래그 스타트 | [Source Element]에 대해 Active, 요소가 드래그되기 시작하면 사용자 끌기 요소에는 추가 드래그 스타트 이벤트가 필요합니다. 이 사건에서 청취자는 데이터 및 이미지 드래그와 같은이 드래그와 관련된 정보를 설정합니다. |
| Dragenter | [소스 요소]에 대해 활성화되고 요소로 끌리는 마우스가 트리거됩니다. 이 사건의 청취자는이 영역에서 마우스를 방출 할 수 있는지 여부를 나타냅니다. 리스너가 설정되지 않았거나 청취자가 작동하지 않으면 기본적으로 해제 할 수 없습니다. |
| 드래그 오버 | [대상 요소]에서 활성화되면 마우스가 드래그에 의해 움직일 때 트리거됩니다. |
| 드래그 리브 | [대상 요소]에서 활성화되면 마우스가 드래그하는 요소를 떠날 때 트리거됩니다. 해제 할 수있는 하이라이트 또는 삽입 마크로 사용할 수 있습니다. |
| 견인 | [소스 요소]에 대해 활성화 된 이벤트는 요소가 드래그되면 트리거됩니다. |
| 떨어지다 | [Target Element]를 활성화하고 드래그 작업의 출시가 해제 될 때 릴리스 요소를 트리거합니다. |
| 드래그 | [소스 요소]에 대해 활성화 된 드래그 소스는 작업이 성공했는지 여부에 관계없이 드래그 작업 끝에서 트리거됩니다. |
(드래그 할 때는 드래그 관련 이벤트, 예 : MouseMove와 같은 마우스 이벤트를 트리거합니다.
Datatransfer 객체드래그 앤 드롭 작업을 처리 할 때는 Datatransfer 객체를 사용하여 드래그 된 데이터를 저장해야합니다. Datatransfer는 하나 이상의 데이터, 하나 이상의 데이터 유형을 저장할 수 있습니다.
재산
| Dropeffect | Dropeffect [문자열] 실제 배치 효과, 가능한 값을 지정합니다. 복사 : 새 위치로 복사하십시오 이동 : 새로운 위치로 이동하십시오 링크 : 소스에서 새 위치로 링크 생성 없음 : 배치 할 수있는 금지 (작동 없음) |
| 효과적으로 | [문자열] 드래그 할 때 허용 된 효과를 지정하십시오. 가능한 값 : 복사 : 새 위치로 복사하십시오. 이동 : 새로운 위치로 이동하십시오. 링크 : 소스에서 새 위치로 링크를 만듭니다. Copylink : 복사 또는 링크를 허용하십시오. CopyMove : 복사 또는 이동 허용. LinkMove : 링크 또는 이동 허용. 모두 : 모든 작업을 허용합니다. 없음 : 모든 작업을 금지합니다. 비 초기화 : 기본값 (기본값)은 모두와 같습니다. |
| 파일 | 데이터 전송에서 사용 가능한 로컬 파일 목록이 포함되어 있습니다. 드래그 작업에 드래그 파일이 포함되지 않으면이 속성은 빈 목록입니다. |
| 유형 | 스토리지 데이터 유형 목록을 저장 첫 번째 항목으로 저장하면 순서는 데이터 추가 순서와 일치합니다. 데이터가 추가되지 않으면 빈 목록이 반환됩니다. |
방법
| void addElement (요소 요소) | 드래그 소스를 설정하십시오. 드래그 및 드래그 이벤트 트리거에 영향을 줄 노드를 수정하면 일반적으로 변경할 필요가 없습니다. 기본 목표는 노드를 드래그하는 것입니다 |
| void clearData (문자열 유형) | 주어진 유형과 관련된 데이터를 삭제합니다. 유형 매개 변수는 선택 사항입니다. 유형이 비어 있거나 지정되지 않은 경우 모든 유형의 관련 데이터를 삭제하십시오. 지정된 유형의 데이터가 없거나 데이터 전송에 데이터가 포함되어 있지 않으면이 방법은 영향을 미치지 않습니다. |
| 문자열 getData (문자열 유형) | 주어진 유형의 데이터를 얻습니다. 주어진 유형의 데이터가 존재하지 않거나 데이터를 포함하지 않고 데이터가 저장되면 메소드는 빈 문자열을 반환합니다. |
| void setData (문자열 유형, 문자열 데이터) | 주어진 유형에 대한 데이터를 설정하십시오. 데이터 유형이 존재하지 않으면 끝에 추가 되며이 유형 목록의 마지막 프로젝트는 새 형식이됩니다. 이미 존재하는 경우 기존 데이터를 동일한 위치로 바꾸십시오. 즉, 동일한 유형의 데이터를 대체하면 유형 목록의 순서가 변경되지 않습니다. |
| void setdragimage (Domlement Image, Long X, Long Y) | 예상 드래그 사진을 사용자 정의하십시오. 대부분의 경우 드래그 된 노드가 기본 사진으로 생성되기 때문에이 항목을 설정할 필요가 없습니다. 이미지는 드래그 피드백 이미지 요소로 사용해야합니다. X 이미지의 수평 변위. Y 동상의 수직 오프셋. |
브라우저 지원
Internet Explorer 9+, Firefox, Opera 12, Chrome 및 Safari 5+
데모 코드
<! 높이 : 1px 솔리드 #ccccff; solid #ccccff; 오버플로; > </div> <div class = bin> & nbsp; '. Box'); e.datatransfer.efectransfer }; 드래그 요소는 대상 요소를 입력합니다. '; // 요소를 드래그하십시오. function (e) {drag.parentnode.removechild (drag); 함수 (e) {E.StopPropagation ();위는 HTML5에서 드래그 앤 드롭 관련 정보를 도입하는 것입니다.