HTML5如何實現元素拖拽

2020-03-24 18:59:06

字體：大中小

來源：轉載

供稿：網友

很多前端恐怕都不了解HTML5的拖拽怎么實現吧，本文了解了下思路。進行整理備份，便于以后查閱。先上示例：index.htmlXML/HTML Code復制內容到剪貼板
divid= box1 'box1'); oBox2=document.getElementById('box2'); oImg1=document.getElementById('img1'); // oBox1.ondragover=oBox2.ondragover=function(e){ e.preventDefault(); }; // oImg1.ondragstart=function(e){ e.dataTransfer.setData('text',e.target.id); }; oBox1.ondrop=dropImg; oBox2.ondrop=dropImg; }; functiondropImg(e){ e.preventDefault(); vartempImg=document.getElementById(e.dataTransfer.getData('text')); e.target.appendChild(tempImg); }
涉及知識點在拖放的過程中會觸發以下事件：
在拖動目標上觸發事件 (源元素)
ondragstart - 用戶開始拖動元素時觸發
ondrag - 元素正在拖動時觸發
ondragend - 用戶完成元素拖動后觸發釋放目標時觸發的事件
ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件event對象（以e代替）e.target W3Cschool上的解釋是：返回觸發此事件的元素（事件的目標節點），這個target屬性只兼容ie9及以上e.preventDefault() 取消事件的默認動作。e.dataTransfer.setData() 設置被拖數據的數據類型和值：
復制代碼代碼如下:e.dataTransfer.setData("Text",ev.target.id); //第一個參數為Text（小寫的也行）e.dataTransfer.getData() 獲得被拖的數據：
復制代碼代碼如下:e.dataTransfer.getData("Text");以上就是本文的全部內容，希望對大家的學習有所幫助。原文：http://www.cnblogs.com/oovwall/p/5213580.htmlhtml教程

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

上一篇：一波HTML5 Canvas基礎繪圖實例代碼集合

下一篇：關于html頁面優化的實例詳解