드래그 앤 드롭(Drag and Drop) HTML5 CSS3 구현 example_html5 튜토리얼 기술-H5 튜토리얼-php.cn

이 글에서는 HTML5의 드래그 앤 드롭 구현을 간략하게 소개합니다. 드래그 앤 드롭은 HTML5 표준의 일부입니다. 브라우저 지원: Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5는 드래그 앤 드롭을 지원합니다.

드래그된 요소, dragElement: (1) 이벤트 추가: ondragstart (2) 속성 추가: dragable

요소 배치, dropElement: 1. 이벤트 추가: ondargenter, ondragover, ondragleave, ondragend, ondrop 마우스 인/아웃 이벤트와 매우 유사하며 단어도 이해하기 쉽습니다. 자세한 내용은 다루지 않겠습니다. 아래에서 예시를 사용하겠습니다.

2. 페이지 요소 간 드래그 앤 드롭 다음은 각 이벤트가 어떻게 트리거되는지 보여주는 div 간 드래그 앤 드롭의 작은 예입니다.

코드 복사 코드는 다음과 같습니다. #dropEle div { float: 왼쪽; } ; /** * 드래그 앤 드롭은 HTML5 표준의 일부입니다. * 브라우저 지원 * Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5는 드래그 앤 드롭을 지원합니다. */ $(function () { $("#dragEle")[0].ondragstart = 함수 (이벤트) { console.log("dragStart"); event.dataTransfer.setData("Text", event.target.id); }; / ** * 드래그한 데이터를 드롭하면 드롭 이벤트가 발생합니다. * 브라우저의 기본 데이터 처리를 방지하려면 PreventDefault()를 호출하세요. (드롭 이벤트의 기본 동작은 링크로 열리는 것입니다.) * @param 이벤트 */ $("#dropEle")[0].ondrop = 함수(이벤트) { /* for (var p in event.dataTransfer) { console.log(p " = " event.dataTransfer[p] " @@"); } */ console.log("onDrop"); var id = 이벤트 .dataTransfer.getData ("텍스트"); $(this).append($("#" id).clone().text($(this).find("div").length)); event .preventDefault(); }; /** * ondragover 이벤트는 드래그된 데이터를 배치할 위치를 지정합니다. *기본적으로 데이터/요소는 다른 요소에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다. */ $("#dropEle")[0].ondragover = 함수(이벤트) { console.log("onDrop over"); event.preventDefault(); } $("#dropEle")[0].ondragenter = 함수(이벤트) { console.log("onDrop enter"); } $("#dropEle")[0].ondragleave = function (event) { console.log("onDrop 휴가 "); } $("#dropEle")[0].ondragend = 함수(이벤트) { console.log("onDrop end"); } }); 시스템에서 선택한 하나 이상의 파일을 div로 드래그하면 드래그된 파일의 정보가 파일에 저장됩니다. 그러면 파일을 통해 파일 형식, 길이, 내용을 가져온 다음 업로드할 수 있습니다.

3. setDragImage(image, x, y)는 마우스 이동 중에 마우스로 움직이는 효과 이미지 를 설정하는 데 사용됩니다. dragstart에서 설정해야 합니다.

4. types, effectAllowed 및 dropEffect는 각각 드래그되는 요소의 유형과 드래그 프로세스 중 마우스에 의해 표시되는 스타일입니다 . 그러나 이러한 속성은 일반적으로 무시될 수 있으며 일반적으로 사용되지 않습니다.