在此之前，實現拖拽操作都是開發人員自定義邏輯實現的，但是html5提供了拖拽api ，使得拖拽操作的實現變得簡單。
fish.gif
拖拽 #div1 {
width: 100px;
height: 100px;
padding: 200px;
position: absolute;
top:100px;
left:100px;
background: url("bowl.png") no-repeat;
!(fish.png)
function drag(ev) {
ev.datatransfer.setdata("text", ev.target.id);
function allowdrop(ev) {
ev.preventdefault();
function drop(ev) {
ev.preventdefault();
var data = ev.datatransfer.getdata("text");
下面分步講解一下是如何實現拖拽效果的：
設定元素為可拖放模式
首先，為了使元素可拖動，把draggable 屬性設定為 true：
被拖放物體 - ondragstart
在上面的例子中，ondragstart屬性呼叫了乙個函式，drag(event)，它規定了被拖動的資料。
datatransfer.setdata() 方法設定被拖資料的資料型別和值：
function drag(ev)
ev.datatransfer.setdata("text",ev.target.id);
在這個例子中，資料型別是 "text"，值是可拖動元素的 id為("img1")。
放到何處 - ondragover
ondragover事件規定在何處放置被拖動的資料。
預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。
這要通過呼叫 ondragover 事件的 event.preventdefault() 方法：
event.preventdefault();
進行放置 - ondrop
當放置被拖資料時，會發生 drop 事件。
在上面的例子中，ondrop 屬性呼叫了乙個函式，drop(event)：
function drop(ev)
ev.preventdefault();
var data=ev.datatransfer.getdata("text");
**解析：
呼叫 preventdefault()來避免瀏覽器對資料的預設處理(drop 事件的預設行為是以鏈結形式開啟)
通過 datatransfer.getdata("text")方法獲得被拖的資料。該方法將返回在 setdata() 方法中設定為相同型別的任何資料。
被拖資料是被拖元素的id ("img1")
把被拖元素追加到目標元素中,如下圖所示，被拖放物體放在目標物體的content的左上角
例項
h5拖動總結
1.拖動神器sortablejs sortablejs 有vue，angular，react 版的實現 vue版 通過options 可以完全使用 sortable的配置 2.vue grid layout 拖動事件使用 interactjs 來實現的。可以實現在容器內拖動 自由碰撞，碰撞原理是 使...
h5 不是 html5 的縮寫！！！！
誰說 h5 是 html5 的縮寫 html5 網際網路領域縮寫詞，全稱 hypertext markup language 5 超文字標記語言 5 h5 不知什麼的縮寫，意指 包含一定特效的移動端營銷網頁 注意 而html5第五代html的標準，一種規範，可以說，h5都是用 html5編寫 的，也...
HTML5學習筆記《一》 認識H5
html5 將成為 html xhtml 以及 html dom 的新標準。html 的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 最新版本的 safar...