드래그 앤 드롭은 HTML5 표준의 일부입니다.
브라우저 지원
Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5는 드래그 앤 드롭을 지원합니다.
드래그 요소, 드래그 미망인 :
1. 이벤트 추가 : OnDragStart 2. 속성 추가 : 드래그 가능배치 요소, 배수 :
1. 이벤트 추가 : Ondargenter, Ondragover, Ondragleave, Ondragend, Ondrop
그것은 분류에 대한 Mouser의 사건과 유사하며, 다음과 같은 예는 반복되지 않습니다.
1. 페이지의 요소 사이를 드래그 앤 드롭합니다
아래의 작은 예를 사용하여 DIV 사이의 드래그 앤 드롭이 표시됩니다. 각 이벤트가 트리거되는 방법.
<! src = ../../jquery-1.8.3.js type = text/javaScript charset = utf-8> </script> <script type = text/javaScript>/*** 드래그 (드래그 앤 드롭) IS. HTML5 표준 구성 요소. * 브라우저는* Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5를 지원합니다. * / $ (fuins () {$ (#dragele) [0] .OndRagStart = function (event) {console.log (drawStart); event.datatransfer.setData (text, event.target.id);}; /* * * 드래그 데이터가 배치되면 드롭 이벤트가 발생합니다. p] + @@) * / console.log (ondrop); ) .d (div) .length); ;} $ (#dropele) [0] .OndRagleave = function (event) {ondrop Leave) {console.log (ondrop end); Head> <body> <div style : 1px solid red : 텍스트-엘인트; : 330px; 202px;다음에주의를 기울여야합니다.
A. OnTragover는 이벤트의 기본 동작을 구성해야합니다.
B. 드롭 이벤트의 기본 동작은 링크에서 열리므로 기본 동작을 방지해야합니다.
드래그 및 삭제시 이벤트에는 이벤트가 포함되어 있음을 알 수 있습니다. , 복사하십시오. 요소가 배치 된 div에 추가됩니다.
다른 개체의 다른 방법은 다음과 같습니다.
event.datatransfer :
항목 = [Object DataTransferntemlist] @@ drag_drop.html : 44
files = [Object FilleList] @@ drag_drop.html : 44
type = text/plain @@ drag_drop.html : 44
effectalowed = all @@ drag_drop.html : 44
dropeffect = none @@ drag_drop.html : 44
cleartata = function cleanata () {[기본 코드]} @@ drag_drop.html : 44
getData = fuory getData () {[기본 코드]} @@ drag_drop.html : 44
setData = function setData () {[기본 코드]} @@ drag_drop.html : 44
setdragimage = function setdragimage () {[aviation code]} @@
JS를 사용하여 모든 속성을 인쇄했습니다.
1. GetData, setData의 예제는 위의 예에서 사용되었으며 ClearData는 설정 데이터를 지우는 것입니다.
2. 해당 파일이 운영 체제에서 선택한 파일이 DIV로 드래그되면 파일의 정보가 저장됩니다.
3. SetDragimage (이미지, x, y)는 마우스 이동 중에 마우스와 함께 움직이는 렌더링을 설정하는 데 사용됩니다. DragStart에서 설정해야합니다.
4. 유형, 이펙트 홀드 및 드롭 피트는 드래그 과정에서 마우스로 표시되는 스타일을 드래그하는 유형입니다.
위는이 기사의 모든 내용입니다.