<!DOCTYPE html> <html> <head> <style type="text/css"> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 100px; padding: 10px; border: 10px solid black; } </style> <!-- style標籤裏可以設置div的格式，也就是css文件 float:left 是兩個div向左浮動 margin:100px 是元素的外邊距，可以有4個值，一個值表示上下左右4個值一樣。 padding:10px 是元素的內邊距 ，同上可以有4個值。 border:10px 是外邊界的大小 還有其他屬性的設置 --> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } // 放置拖拽元素的元素的函數，爲了阻止默認形式，默認形式不能讓兩個元素放置在一起。 function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } // 元素被拖拽時調用的函數，會給拖拽元素賦予一個類型，以及一個值，方便後邊的調用。 function drop(ev){ /*當放置發生時發生的函數。*/ ev.preventDefault(); /*是阻止默認形式，默認是會生成一個新的鏈接。*/ var data=ev.dataTransfer.getData("Text");/* 定義一個元素來接受剛纔獲取的拖拽元素的ID*/ ev.target.appendChild(document.getElementById(data)); /* 將拖拽元素鏈接到此事件所處的元素上。*/ } </script> </head> <body> <div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"> <!-- 設置id,οndrοp="xx(event)"規定當放置完成時調用函數，οndragοver="xx(event)"規定了被放置元素是誰而且還有一個函數.--> <img src="w3school_logo_black.gif" draggable="true" οndragstart="drag(event)" id="drag1"/> <!--設置ID，設置位置，設置是否可以被拖拽，還有拖拽發生時的執行函數--> </div> <div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"> </div> </body> </html>
具體效果：
拖拽前
拖拽後
解釋如下：
主體是兩個div，1個圖片。
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"> <!-- 設置id,
οndrοp="xx(event)"規定當放置完成時調用函數，
οndragοver="xx(event)"規定了被放置元素是誰而且還有一個函數.-->
<img src="w3school_logo_black.gif" draggable="true" οndragstart="drag(event)" id="drag1"/> <!--設置ID，設置位置，設置是否可以被拖拽，οndragstart="drag(event)"拖拽發生時的執行函數--> </div> <div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)">放在了body標籤裏，而且圖片放在了第一個div裏。
設置div的具體CSS格式
<style type="text/css"> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 100px; padding: 10px; border: 10px solid black; } </style>
<!-- style標籤裏可以設置div的格式，也就是css文件 float:left 是兩個div向左浮動 margin:100px 是元素的外邊距，可以有4個值，一個值表示上下左右4個值一樣。 padding:10px 是元素的內邊距 ，同上可以有4個值。 border:10px 是外邊界的大小 還有其他屬性的設置 -->
下邊是函數，寫在script裏，script寫在head裏，也可以寫在body裏。
<script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } // 放置拖拽元素的元素的函數，爲了阻止默認形式，默認形式不能讓兩個元素放置在一起。 function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } // 元素被拖拽時調用的函數，會給拖拽元素賦予一個類型，以及一個值，方便後邊的調用。 function drop(ev){ /*當放置發生時發生的函數。*/ ev.preventDefault(); /*是阻止默認形式，默認是會生成一個新的鏈接。*/ var data=ev.dataTransfer.getData("Text");/* 定義一個元素來接受剛纔獲取的拖拽元素的ID*/ ev.target.appendChild(document.getElementById(data)); /* 將拖拽元素鏈接到此事件所處的元素上。*/ } </script>