HTML5教程之-文件拖拽功能实现
生活随笔
收集整理的這篇文章主要介紹了
HTML5教程之-文件拖拽功能实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
現在打開優酷的網站我們再觀看視頻時如果拖動滾動條，頁面會自動出現一個小的播放窗口，而這個播放窗口是可以說隨便拖拽的。這種對圖片或者鏈接的拖拽效果是怎么實現的？其實用HTML5就很容易實現了，因為HTML5中有個
html5中默認對圖片、鏈接可以拖放，其它元素需要設置draggable="true"才能拖放，事不宜遲，老夫馬上去試試。 1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 7 </head> 8 <body> 9 <div id="dragme" draggable="true" style=" width: 200px; border: 1px solid gray;">請拖放</div> 10 <div id="text" style=" width: 200px; height: 200px; border: 1px solid gray;"></div> 11 <script type="text/javascript"> 12 document.ondragover = function (e) { 13 e.preventDefault(); 14 }; 15 document.ondrop = function (e) { 16 e.preventDefault(); 17 }; 18 19 var source = document.getElementById('dragme'); 20 var dest = document.getElementById('text'); 21 source.addEventListener('dragstart', function (e) { 22 var dt = e.dataTransfer; 23 dt.setData('text/plain', '您好' new Date()); 24 }, false); 25 26 dest.addEventListener('dragend', function (e) { 27 e.preventDefault(); 28 }, false); 29 30 dest.addEventListener('drop', function (e) { 31 var dt = e.dataTransfer; 32 var text = dt.getData('text/plain'); 33 dest.innerHTML = text; 34 e.stopPropagation(); 35 e.preventDefault(); 36 return false; 37 }, false); 38 39 </script> 40 </body> 41 </html>
html5中默認對圖片、鏈接可以拖放，其它元素需要設置draggable="true"才能拖放，事不宜遲，老夫馬上去試試。 1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 7 </head> 8 <body> 9 <div id="dragme" draggable="true" style=" width: 200px; border: 1px solid gray;">請拖放</div> 10 <div id="text" style=" width: 200px; height: 200px; border: 1px solid gray;"></div> 11 <script type="text/javascript"> 12 document.ondragover = function (e) { 13 e.preventDefault(); 14 }; 15 document.ondrop = function (e) { 16 e.preventDefault(); 17 }; 18 19 var source = document.getElementById('dragme'); 20 var dest = document.getElementById('text'); 21 source.addEventListener('dragstart', function (e) { 22 var dt = e.dataTransfer; 23 dt.setData('text/plain', '您好' new Date()); 24 }, false); 25 26 dest.addEventListener('dragend', function (e) { 27 e.preventDefault(); 28 }, false); 29 30 dest.addEventListener('drop', function (e) { 31 var dt = e.dataTransfer; 32 var text = dt.getData('text/plain'); 33 dest.innerHTML = text; 34 e.stopPropagation(); 35 e.preventDefault(); 36 return false; 37 }, false); 38 39 </script> 40 </body> 41 </html>
拖放時候一定要記住，阻止頁面默認行為，否則會打開新窗口的，其中以下亦是重點：
1 拖放可使用DataTransfer傳遞數據，該對象是非常有用的，因為在拖動目標元素時，可能會經過其它元素，我們可以用此傳遞信息；
API：
dragstart?被拖放元素?開始拖放時
drag?被拖放元素?拖放過程中
dragenter?拖放過程中鼠標經過的元素?被拖放元素開始進入本元素時
dragover ?拖放過程中鼠標經過的元素?本元素內移動
drageleave ?拖放過程中鼠標經過的元素?離開本元素
drop?拖放的目標元素?拖動的元素放到了本元素中
dragend 拖放的對象 拖放結束
總結
以上是生活随笔為你收集整理的HTML5教程之-文件拖拽功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5结合ajax实现文件上传以及进
- 下一篇： 只需5步，轻松创建HTML5离线应用