很多前端恐怕都不了解HTML5的拖拽怎么實現吧，本文了解了下思路。進行整理備份，便于以后查閱。
先上示例：
index.html
XML/HTML Code復制內容到剪貼板
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Drag</title>
- <style>
- .box{
- width: 400px;
- height: 400px;
- float: left;
- }
- #box1{
- background: #CCC;
- }
- #box2{
- background: #FF0;
- }
- </style>
- </head>
- <body>
- <div id="box1" class="box"></div>
- <div id="box2" class="box"></div>
- <img src="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />
JavaScript Code復制內容到剪貼板
- <script src="app1.js"></script>
- </body>
- </html>
-
- app1.js
-
-
-
-
- var oBox1,
- oBox2,
- oImg1;
-
- window.onload = function(){
- oBox1 = document.getElementById('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;
- };
-
- function dropImg(e){
- e.preventDefault();
- var tempImg = 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.html
