DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5拖拽的簡單實例
HTML5拖拽的簡單實例
編輯：HTML5教程     

拖拽相關屬性

draggable屬性是html5的全局屬性，是html5支持拖放操作的方式之一，用來表示元素是否可以被拖放,draggable有三個值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏覽器的默認值

XML/HTML Code復制內容到剪貼板
  1. <ul>     
  2.     <li id="item1" draggable="true">列表1</li>  
  3.     <li id="item2" draggable="true">列表2</li>  
  4.     <li id="item3" draggable="true">列表3</li>  
  5.     <li id="item4" draggable="true">列表4</li>  
  6.     <li id="item5" draggable="true">列表5</li>  
  7.     <li id="item6" draggable="true">列表6</li>  
  8. </ul>  

 

拖拽相關的事件

ondragstart：此事件在用戶開始拖動元素或選擇文本時觸發 ondrag:元素正在拖動時觸發 ondragend:用戶完成元素拖放時觸發 ondragleave:當被鼠標拖動的對象離開其容器范圍時觸發 ondragover:當某個被拖動的對象在另一對象容器范圍內拖動時觸發此事件，此事件發生在目標元素身上 ondrop:在一個拖動過程中，釋放鼠標時觸發，此事件作用在目標元素身上

dataTransfer 對象相關方法

setData(format,data):添加自定義數據格式 getData(format):獲取自定義的數據格式clearData([format]):清除自定義的數據格式及數據

Event.preventDefault()

此方法是阻止事件的默認行為，在ondragover中一定要執行preventDefault(),否則ondrop事件不會被觸發

實現案例：

image

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>     
  2. <html>     
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <style type="text/css">  
  7.             .main{   
  8.                 width: 800px;   
  9.                 /*border: 1px solid #ccc;*/   
  10.                 height: 400px;   
  11.                 margin:0 auto;   
  12.             }   
  13.             .left{   
  14.                 float: left;   
  15.                 width: 25%;   
  16.                 background-color: #666;   
  17.                 height: 370px;   
  18.                 text-align: center;   
  19.                 color: black;   
  20.                 padding-top:30px ;   
  21.                 font-size: 110px;   
  22.             }   
  23.             .right{   
  24.                 float: right;   
  25.                 width: 69%;   
  26.             }   
  27.             .right ul,.right li{   
  28.                margin: 0;   
  29.                padding: 0;   
  30.             }   
  31.             .right li{   
  32.                 list-style: none;   
  33.                 border: 2px dashed  #666;   
  34.                 background-color: #ddd;   
  35.                 height: 60px;   
  36.                 margin-top: 3px;   
  37.                 text-indent: 30px;   
  38.                 line-height: 60px;   
  39.             }   
  40.             .right li:hover{   
  41.                 background-color: #ccc;   
  42.             }   
  43.             #message{   
  44.   
  45.                 width: 800px;   
  46.                 text-align: center;   
  47.                 border: 1px solid black;   
  48.                 margin: 20px auto;   
  49.                 font-size:28px;   
  50.             }   
  51.         </style>  
  52.         <script type="text/javascript">  
  53.             window.onload = function(){   
  54.                 var aLi = document.getElementsByTagName('li');   
  55.                 var oLeft = document.getElementsByClassName('left')[0];   
  56.                 var oMessage = document.getElementById('message');   
  57.   
  58.                 for(var i=0;i<aLi.length;i++){   
  59.                     aLi[i].index = i+1;   
  60.                     aLi[i].ondragstart = function(ev){   
  61.                                                 //事件對象ev   
  62.                         var evev = ev || event;   
  63.   
  64.                         ev.dataTransfer.setData("Text",this.id);   
  65.                     }   
  66.   
  67.                 }   
  68.                 oLeft.ondrop = function(ev){   
  69.   
  70.                     var evev = ev || event;   
  71.                     var data = ev.dataTransfer.getData("Text");   
  72.                     var num = document.getElementById(data).index;   
  73.                      document.getElementById(data).remove();   
  74.   
  75.                     oMessage.innerHTML = "列表"+num+"被放進了垃圾箱";   
  76.   
  77.                     this.style.color = "black";   
  78.   
  79.                     }   
  80.                 oLeft.ondragover = function(ev){   
  81.                     var evev = ev || event;   
  82.                     ev.preventDefault();   
  83.                 }   
  84.                 oLeft.ondragenter = function(){   
  85.                     this.style.color = "#fff";   
  86.                 }   
  87.             }   
  88.         </script>  
  89.     </head>  
  90.     <body>  
  91.         <div class="main">  
  92.             <div class="left">垃圾箱</div>  
  93.             <div class="right">  
  94.                 <ul>  
  95.                     <li id="item1" draggable="true">列表1</li>  
  96.                     <li id="item2" draggable="true">列表2</li>  
  97.                     <li id="item3" draggable="true">列表3</li>  
  98.                     <li id="item4" draggable="true">列表4</li>  
  99.                     <li id="item5" draggable="true">列表5</li>  
  100.                     <li id="item6" draggable="true">列表6</li>  
  101.                 </ul>  
  102.             </div>  
  103.             <div style="clear: both;"></div>  
  104.   
  105.   
  106.         </div>  
  107.         <div id="message">拖到垃圾箱刪除列表</div>  
  108.     </body>  
  109. </html>    

以上這篇HTML5拖拽的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

HTML5教程
使用Html5實現異步上傳文件,支持跨域,帶有上傳進度條
服務器准備IIS需要設置IIS裡面的HTTP響應標頭，如圖添加如下設置，添加這項“Acc
使用phonegap操作數據庫的實現方法
實例如下：<!DOCTYPE html> <html> <
21個HTML5+CSS3酷炫網站幫你忙
HTML 5橫空出世後，一直以炫目華麗的視覺特效震撼眼球，很多驚人的創意現在都可以輕松實現，今天我們

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
移動開發中HTML5能否替代本地程序？ 純HTML5+CSS3制作生日蛋糕(代碼易懂) html5 audio判斷暫停與播放狀態 基於Bootstrap的登錄表單界面 H5平面設計師該有哪些轉變？ 使用HTML5裡的classList操作CSS類 HTML5 對各個標簽的定義與規定：link HTML 5 語義化標簽收集 Html5實現用戶注冊自動校驗功能實例代碼 驚艷超炫的HTML 5應用程序示例
熱門推薦
HTML5基礎，第3部分：HTML5 API的威力 H5 meta小結(前端必看篇) 處理HTML5新標簽的浏覽器兼容版問題 HTML 5工作草稿的神秘面紗 京東H5廣告精選合集 聊聊年度最熱門的那些HTML 5案例 html5各種頁面切換效果和模態對話框用法總結 HTML 5 語義化標簽收集 五大主流浏覽器 CSS3 和 HTML5 兼容性大比拼
大家都在看
名詞解釋：什麼是XSL，它有什麼用途 JavaScript中的定時器之Item23的合理使用 使用CSS3新技術 完美實現圓角效果 獲取元素位置的position()與offset()方法區別介紹 EasyUI 結合JS導出Excel文件的實現方法 2010年最佳jQuery插件整理 JavaScript新窗口與子窗口之間的傳值 ff下JQuery無法監聽input的keyup事件的解決方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved