HTML5의 PC에서 상당히 많은 기능이 구현되며,이 기능은 구체적으로 기록됩니다
드래그 대상의 트리거 이벤트 (소스 요소) :ondragStart -users는 사용자가 요소를 드래그하기 시작하면 트리거됩니다.
ondrag -요소는 드래그 할 때 트리거됩니다
Ondragend -user 완료 요소 드래그 트리거
대상을 출시 할 때 이벤트가 트리거되었습니다.Ondragenter- 마우스에 의해 끌린 물체가 컨테이너로 들어가면이 사건을 트리거했습니다.
ONDRAGOVER- 드래그 된 객체가 다른 객체 컨테이너의 범위 내에서 드래그되면이 사건을 트리거합니다.
Ondragleave- 마우스에 의해 드래그 된 물체가 컨테이너를 떠날 때이 사건을 트리거합니다.
ONDROP -DRAR, 마우스 키를 릴리스 할 때이 이벤트를 트리거합니다.
코딩
<html lang = en> <head> <메타 charset = utf-8> <title> </title> <style> .box {너비 : 800px; 높이 : 600px; float : 왼쪽;} #box1 {배경- 색상 : #ccc;}#box2 {back </div> <img id = img1 src = 1.jpg> <div id = msg> </div> </body> <cript> box2div, msgdiv, img1; = getElementById ( 'box1'); e) {e.preventDefault ();} box2div.ondRagover = function (e) {e.preventDefault ();} img1.ondragstart = function (e) d ','img1 ');} box1div.ondrop = dropimghandler; .OndRop = dropimghandler;} dropimghandler (e) {showobj (e); j) {s+= k+:+obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>이 기능은 왼쪽과 오른쪽의 두 개의 div에서 그림을 드래그 할 수 있습니다.
다음은 드래그 및 업로드 코드입니다.
<! Heig HT : 500px;} </style> </head> <body> <div id = imgcontainer> </div> <div id = msg> </body> <cript> var imgcontainer, msgdiv; (e) {imgcontainer = getElementById ( 'imgcontainer'); e.preventDefault (); e.datatransfer.files [0]; // 다음은 사진을 얻은 후 IMGContainer에 표시됩니다. /> // firster.readasdataurl (f); obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>위는이 기사의 모든 내용입니다.