欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5如何實現(xiàn)元素拖拽

  發(fā)布時間：2016-03-11 10:02:41   作者：烏拉圭的野鶴   我要評論
這篇文章主要為大家詳細介紹了HTML5是如何實現(xiàn)元素拖拽，拖拽效果的實現(xiàn)方法，感興趣的小伙伴們可以參考一下

很多前端恐怕都不了解HTML5的拖拽怎么實現(xiàn)吧，本文了解了下思路。進行整理備份，便于以后查閱。

先上示例：

index.html

XML/HTML Code復制內(nèi)容到剪貼板
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Drag</title>  
  6.     <style>  
  7.         .box{   
  8.             width: 400px;   
  9.             height: 400px;   
  10.             float: left;   
  11.         }   
  12.         #box1{   
  13.             background: #CCC;   
  14.         }   
  15.         #box2{   
  16.             background: #FF0;   
  17.         }   
  18.     </style>  
  19. </head>  
  20. <body>  
  21. <div id="box1" class="box"></div>  
  22. <div id="box2" class="box"></div>  
  23. <img src="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />  
JavaScript Code復制內(nèi)容到剪貼板
  1. <script src="app1.js"></script>   
  2. </body>   
  3. </html>   
  4.   
  5. app1.js   
  6. /**  
  7.  *   app1.js  
  8.  */  
  9.   
  10. var oBox1,   
  11.     oBox2,   
  12.     oImg1;   
  13.   
  14. window.onload = function(){   
  15.     oBox1 = document.getElementById('box1');   
  16.     oBox2 = document.getElementById('box2');   
  17.     oImg1 = document.getElementById('img1');   
  18.   
  19.     //   
  20.     oBox1.ondragover = oBox2.ondragover = function(e){   
  21.         e.preventDefault();   
  22.     };   
  23.   
  24.     //   
  25.     oImg1.ondragstart = function(e){   
  26.         e.dataTransfer.setData('text', e.target.id);   
  27.     };   
  28.   
  29.     oBox1.ondrop = dropImg;   
  30.     oBox2.ondrop = dropImg;   
  31. };   
  32.   
  33. function dropImg(e){   
  34.     e.preventDefault();   
  35.     var tempImg = document.getElementById(e.dataTransfer.getData('text'));   
  36.     e.target.appendChild(tempImg);   
  37. }    

涉及知識點

在拖放的過程中會觸發(fā)以下事件：
在拖動目標上觸發(fā)事件 (源元素)
　　ondragstart - 用戶開始拖動元素時觸發(fā)
　　ondrag - 元素正在拖動時觸發(fā)
　　ondragend - 用戶完成元素拖動后觸發(fā)

釋放目標時觸發(fā)的事件
　　ondragenter - 當被鼠標拖動的對象進入其容器范圍內(nèi)時觸發(fā)此事件
　　ondragover - 當某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件
　　ondragleave - 當被鼠標拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件
　　ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發(fā)此事件

event對象（以e代替）

e.target

　　W3Cschool上的解釋是：返回觸發(fā)此事件的元素（事件的目標節(jié)點），這個target屬性只兼容ie9及以上

e.preventDefault()

　　取消事件的默認動作。

e.dataTransfer.setData()

　　設置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：

復制代碼
代碼如下:
e.dataTransfer.setData("Text",ev.target.id); //第一個參數(shù)為Text（小寫的也行）

e.dataTransfer.getData()

　　獲得被拖的數(shù)據(jù)：

復制代碼
代碼如下:
e.dataTransfer.getData("Text");

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

原文：http://www.cnblogs.com/oovwall/p/5213580.html

相關文章

  • 詳解Html5原生拖拽操作

    本篇文章主要介紹了詳解Html5原生拖拽操作，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-12

  • html5使用Drag事件編輯器拖拽上傳圖片的示例代碼

    這篇文章主要介紹了html5使用Drag事件編輯器拖拽上傳圖片的示例代碼的相關資料,需要的朋友可以參考下
    2017-08-22

  • HTML5+CSS3實現(xiàn)無插件拖拽上傳圖片（支持預覽與批量）

    本篇文章主要介紹了HTML5+CSS3實現(xiàn)無插件拖拽上傳圖片（支持預覽與批量），現(xiàn)在html5提供了API以及File，F(xiàn)ileReader，XMLHttpRequest等強大的API，為我們拖放實現(xiàn)上傳提供
    2017-01-05

  • HTML5拖拽的簡單實例

    下面小編就為大家?guī)硪黄狧TML5拖拽的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-30

  • HTML5拖拽文件到瀏覽器并實現(xiàn)文件上傳下載功能代碼

    使用HTML5拖拽文件到瀏覽器并實現(xiàn)文件上傳下載，html5的功能是越來越強大了，下面與大家分享下具體的實現(xiàn)代碼，感興趣的朋友可以參考下哈
    2013-06-06

  • html5 拖拽上傳圖片實例演示

    拖拽上傳最重要的就是js部分的代碼，它實現(xiàn)了70%的功能，另外30%僅僅是把圖片信息提交到后臺，然后做對應的處理，比如壓縮啊，裁剪啊云云，感興趣的朋友可以參考下哈，希望
    2013-04-01

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

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

最新評論