<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 488px; height: 100px; padding: 10px; border: 5px black solid; } </style> <!--定義樣式/CSS padding 是內邊距，增大可以增加整個方形div的大小 border 是邊框的屬性 10px是邊框線的粗細， yellow設置顏色， solid設置爲顯示 --> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); //默認是不能將一個元素拖拽放到另外一個元素上，需要阻止這種默認形式。 } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); //拖拽發生時，會給被拖拽的元素 一個類型，一個值。 // Text是類型，ev.target.id是值。ev是本事件，ev.target是事件所在的元素，ev.target.id是元素的ID } function drop(ev){ ev.preventDefault(); //W3S的解釋是默認是以鏈接形式打拖拽後的效果，阻止默認，就會在原界面中產生效果。 但是註釋掉這行，仍然不會產生新的鏈接。這就很尷尬了。 var data=ev.dataTransfer.getData("Text"); //通過 dataTransfer.getData("Text") 方法獲得被拖的數據，該方法將返回在 setData() 方法中設置爲相同類型的任何數據。就是說會獲得TEXT類型那個數據的ID ev.target.appendChild(document.getElementById(data)); //appendChild（ID） 將ID爲data這個數的元素 放置到ev.target上，也就是div1上。 } </script> </head> <body> <p>把圖片拖放至下面的框內</p> <div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)" ></div> <!--οndragοver="xx(event)" 規定在何處放置被拖拽的元素 ，參數是event說明傳入的是事件本身--> <!--οndrοp="xxx(event)" 是當放置被拖拽的元素時執行函數--> </br> <img id="drag1" draggable="true" οndragstart="drag(event)" src="w3school_banner.gif"/> <!--draggable="true" 將其設置成可拖拽--> <!--οndragstart="xxx(event)" 規定了被拖拽的元素 以及被拖拽時發生的函數--> <!--img標籤不需要結束標籤，一個就夠了--> </body> </html>
解釋如下：
body標籤裏有兩個標籤
一個div 一個img
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)" ></div>
<!--οndragοver="xx(event)" 規定在何處放置被拖拽的元素 ，參數是event說明傳入的是事件本身--> <!--οndrοp="xxx(event)" 是當放置被拖拽的元素時執行函數-->id="div1" 是設置這個div的id,
這個div的格式由在head裏的style標籤來設置。
<style type="text/css"> #div1 { width: 488px; height: 100px; padding: 10px; border: 5px black solid; } </style>
<!--定義樣式/CSS padding 是內邊距，增大可以增加整個方形div的大小 border 是邊框的屬性 10px是邊框線的粗細， yellow設置顏色， solid設置爲顯示 -->
</br>
換行標籤
<img id="drag1" draggable="true" οndragstart="drag(event)" src="w3school_banner.gif"/>
<!--draggable="true" 將其設置成可拖拽--> <!--οndragstart="xxx(event)" 規定了被拖拽的元素 以及被拖拽時發生的函數--> <!--img標籤不需要結束標籤，一個就夠了-->src是規定圖片位置。
函數寫在script標籤裏，script標籤寫在了head裏，也可以寫在body裏。
<script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); //默認是不能將一個元素拖拽放到另外一個元素上，需要阻止這種默認形式。 } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); //拖拽發生時，會給被拖拽的元素 一個類型，一個值。 // Text是類型，ev.target.id是值。ev是本事件，ev.target是事件所在的元素，ev.target.id是元素的ID } function drop(ev){ ev.preventDefault(); //W3S的解釋是默認是以鏈接形式打拖拽後的效果，阻止默認，就會在原界面中產生效果。 但是註釋掉這行，仍然不會產生新的鏈接。這就很尷尬了。 var data=ev.dataTransfer.getData("Text"); //通過 dataTransfer.getData("Text") 方法獲得被拖的數據，該方法將返回在 setData() 方法中設置爲相同類型的任何數據。就是說會獲得TEXT類型那個數據的ID ev.target.appendChild(document.getElementById(data)); //appendChild（ID） 將ID爲data這個數的元素 放置到ev.target上，也就是div1上。 } </script>div img標籤裏的函數，都寫在這裏。
具體效果如下
