如何使用JS實現拖放圖片到div中的功能

實現圖片的拖放，本家兒要利用JS中的ondrop事務和ondragover事務，下面介紹將圖片拖放到div中的功能。

方式/步調

1
新建一個HTML文件，保留為test.html，用于編寫代碼實現拖放功能。
2
在test.html添加一個div標簽，而且給它一個id，用于下面編寫樣式。
3
經由過程div的id , 給div界說CSS樣式，例如，把div界說為一個帶邊框的長方形。下面將實現將圖片拖放在這個長方形中。
4
在div的下面界說一張被拖放圖片，并設置該圖片的屬性為許可被拖放。
5
在被拖放的圖片上加上一個ondragstart事務，即圖片被拖動時觸發這個事務。再給事務一個函數，用于拖動圖片時，把圖片保留在一個變量中。
6
再給div界說兩個觸發事務，ondrop（）和ondragover（），一個是拖動時觸發，另一個正在被拖動時觸發，當觸發這兩個事務時，執行響應的操作，把圖片放在div中。代碼如下：
7
運行代碼，在瀏覽器中查看成果：
至此，完當作了利用JS實現拖放圖片到div中的功能。