HTML5のPCには非常に多くの機能が実装されており、この関数もドラッグアップロードが使用されています
ドラッグターゲットのトリガーイベント（ソース要素）：ondragstart-ユーザーが要素のドラッグを開始したときにトリガー
Ondrag -Elementは、ドラッグ時にトリガーされます
ondragend-ユーザー完了要素ドラッグトリガー
ターゲットをリリースするときにトリガーされたイベント：Ondragenter-マウスによってドラッグされたオブジェクトが容器に入ると、この事件がトリガーされました
ondragover-ドラッグされたオブジェクトが別のオブジェクトコンテナの範囲内でドラッグされると、このインシデントがトリガーされます
ondragleave-マウスによってドラッグされたオブジェクトが容器を離れるときにこのインシデントをトリガーする
オンドロップ - ドラッグを行うと、マウスキーをリリースするとこのイベントがトリガーされます
コーディング
<html lang = en> <head> <meta charset = utf-8> <title>拖拽</title> <style> .box {width：800px; height：600px; float：left;}＃box1 {background- {色：#ccc;}＃box2 {background-color：＃000;} </style> </head> <body> <div id = box1 class = box> </div> <div id = box2 class = box> </div> <img id = img1 src = 1.jpg> <div id = msg> </div> </body> <script> var box1div、box2div、msgdiv.onload = function（）{box1div = document.getElementbyid（ 'box1'）; e）{e.preventdefault（）;} box2div.ondragover = function（e）{e.preventdefault（）;} andragstart = function（e）d '、' img1 '）;} box1div.ondrop = dopimghandler; .ondrop = dopimghandler;} dopimghandler（e）{e）; j）{s+= k+：+obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>この関数は、左右の2つのdivのメソッドにドラッグできます。
以下は、ドラッグコードとアップロードコードです。
<！ heig ht：500px;} </style> </head> <body> <div id = imgcontainer> </div> <div id = msg> <script> var imgcontainer、msgdiv; （e）{imgcontainer = document.getElementById（ 'imgcontainer'）; E.PreventDefault（）; //写真を取得した後、IMGContainerで表示されます。 /// firster.readasdataurl（f）; obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>上記は、この記事のすべての内容です。