!DOCTYPE HTML  html  head  meta charset= utf-8  title 拖放 /title  script type= text/javascript function init()  // (1) 拖放開始 source.addEventListener( dragstart , function(ev)  //(1) 向dataTransfer對象追加數據 var dt = ev.dataTransfer; dt.effectAllowed = all  //(2) 拖動元素為dt.setData( text/plain , this.id);  dt.setData( text/plain , 你好  }, false); // (3) dragend：拖放結束 dest.addEventListener( dragend , function(ev)  //不執行默認處理（拒絕被拖放） ev.preventDefault(); }, false); // (4) drop:被拖放 dest.addEventListener( drop , function(ev)  // 從DataTransfer對象那里取得數據 var dt = ev.dataTransfer; //(5) 不執行默認處理（拒絕被拖放） ev.preventDefault(); //停止事件傳播 ev.stopPropagation(); }, false); /script  /head  body onload= init()  h5 請拖放 /h5  /html 

在上述的代碼中，在頁面加載時，自動觸發inint()事件。該事件中包括拖放開始，被拖放和結束拖放三個函數。在瀏覽器中打開該網頁，鼠標拖動顯示到網頁中的晚間圖片，網頁會自動加載要的內容。

【相關推薦】

1. 免費h5在線視頻教程

2. HTML5 完整版手冊

3. VeVb.com原創html5視頻教程

以上就是分享一個HTML5實現拖放的實例代碼的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。