亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML5拖拽的簡(jiǎn)單實(shí)例

  發(fā)布時(shí)間：2016-05-30 15:55:47   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇HTML5拖拽的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

拖拽相關(guān)屬性

draggable屬性是html5的全局屬性，是html5支持拖放操作的方式之一，用來(lái)表示元素是否可以被拖放,draggable有三個(gè)值，true表示可以拖放，false表示不可以被拖放，auto表示使用瀏覽器的默認(rèn)值

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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>  

 

拖拽相關(guān)的事件

ondragstart：此事件在用戶開始拖動(dòng)元素或選擇文本時(shí)觸發(fā) ondrag:元素正在拖動(dòng)時(shí)觸發(fā) ondragend:用戶完成元素拖放時(shí)觸發(fā) ondragleave:當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開其容器范圍時(shí)觸發(fā) ondragover:當(dāng)某個(gè)被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件，此事件發(fā)生在目標(biāo)元素身上 ondrop:在一個(gè)拖動(dòng)過(guò)程中，釋放鼠標(biāo)時(shí)觸發(fā)，此事件作用在目標(biāo)元素身上

dataTransfer 對(duì)象相關(guān)方法

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

Event.preventDefault()

此方法是阻止事件的默認(rèn)行為，在ondragover中一定要執(zhí)行preventDefault(),否則ondrop事件不會(huì)被觸發(fā)

實(shí)現(xiàn)案例：

image

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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.                                                 //事件對(duì)象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+"被放進(jìn)了垃圾箱";   
  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拖拽的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • HTML5拖拽API經(jīng)典實(shí)例詳解

    拖拽API是HTML5的新特性，相對(duì)于其他新特性來(lái)說(shuō)，重要程度占到6成。這篇文章通過(guò)經(jīng)典案例給大家介紹了HTML5拖拽API的知識(shí)要點(diǎn)，需要的朋友參考下吧
    2018-04-20

  • HTML5 拖拽批量上傳文件的示例代碼

    這篇文章主要介紹了HTML5 拖拽批量上傳文件的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-28

  • html5 canvas繪制可拖拽的3D立體文字效果源碼

    這是一款基于html5 canvas繪制可拖拽的3D立體文字效果源碼。畫面上立體的文字可通過(guò)鼠標(biāo)拖拽改變觀察角度，也可通過(guò)鼠標(biāo)滾輪進(jìn)行文字的縮放。文字帶有極其強(qiáng)烈的明暗陰影視
    2017-12-09

  • html5 canvas繪制的可拖拽全屏3D地球旋轉(zhuǎn)動(dòng)畫特效源碼

    這是一款基于html5 canvas繪制的可拖拽全屏3D地球旋轉(zhuǎn)動(dòng)畫特效源碼。頁(yè)面的星空背景上呈現(xiàn)出3D地球旋轉(zhuǎn)的效果，通過(guò)鼠標(biāo)拖動(dòng)可改變觀察視角。點(diǎn)擊右下方的按鈕可切換到全屏
    2017-12-08

  • HTML5+Three.js WebGL實(shí)現(xiàn)的月球發(fā)光著色與拖拽動(dòng)畫效果源碼

    這是一款基于HTML5+Three.js WebGL實(shí)現(xiàn)的月球發(fā)光著色與拖拽動(dòng)畫效果源碼。畫面中的星空背景中央是帶有大氣層發(fā)光效果的月球，通過(guò)鼠標(biāo)拖拽可改變?cè)虑虻挠^察角度。右上方的
    2017-10-26

  • html5實(shí)現(xiàn)的網(wǎng)格圖片鼠標(biāo)拖動(dòng)拼圖游戲源碼

    這是一款基于html5實(shí)現(xiàn)的網(wǎng)格圖片鼠標(biāo)拖動(dòng)拼圖游戲源碼，通過(guò)鼠標(biāo)拖動(dòng)圖片碎片來(lái)將其組合成一個(gè)完整圖片，拼圖完成后會(huì)彈出提示信息
    2016-08-03

  • 用HTML5制作視頻拼圖的教程

    這篇文章主要介紹了用HTML5制作視頻拼圖的教程,主要用到了HTML5的Canvas API,需要的朋友可以參考下
    2015-05-13

  • html5版canvas自由拼圖實(shí)例

    這篇文章主要為大家介紹了html5版canvas自由拼圖實(shí)例,較為詳細(xì)的講述了該功能的完整實(shí)現(xiàn)過(guò)程,具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2014-10-15

  • HTML5拖拽功能實(shí)現(xiàn)的拼圖游戲

    本文通過(guò)實(shí)例代碼給大家介紹了HTML5拖拽功能實(shí)現(xiàn)的拼圖游戲，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2018-07-31

最新評(píng)論