HTML5--拖放(Drag&Drop)隨筆

時間 2019-11-29

標籤 html5 html 拖放 drag&drop drag drop 隨筆欄目 HTML5 简体版

原文原文鏈接

在 HTML5 中，拖放是標準的一部分，即抓取對象之後拖到另外一個位置(添加已定義好的父級元素裏)，任何元素都可以拖放。javascript

瀏覽器支持

Internet Explorer 九、Firefox、Opera 十二、Chrome 以及 Safari 5 支持拖放。html

*註釋：在 Safari 5.1.2 中不支持拖放。html5

一、設置元素爲可拖放

讓元素可拖動，把 draggable 屬性設置爲 true 。java

eg:jquery

<p id="txt" draggable="true">拖拽文字</p>

二、拖動什麼 - ondragstart 和 setData()

而後，規定當元素被拖動時，會發生什麼。web

ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。瀏覽器

<p id="txt" draggable="true" ondragstart="drag(event)">拖拽文字</p>

dataTransfer.setData() 方法設置被拖數據的數據類型和值。app

1 function drag(e1){ 2     e1.dataTransfer.setData('text',e1.target.id); 3 }

*數據類型是 "Text"，值是可拖動元素的 id ("drag1")。ide

三、放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的數據。函數

默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。

這要經過調用 ondragover 事件的 event.preventDefault() 方法。

四、進行放置 - ondrop

當放置被拖數據時，會發生 drop 事件。

ondrop 屬性調用了一個函數，drop(event)。

html :

<div id="box" style="height: 200px; border:2px solid deeppink;" ondrop="drop(event)" ondragover="allow(event)"></div>

js:

1 function allow(e){ 2  e.preventDefault(); 3 } 4 function drop(e){ 5     var tag=e.dataTransfer.getData('text');                    document.getElementById('box').appendChild(document.getElementById(tag)) 6 }

View Code

HTML5拖放示例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="box" style="height: 200px; border:2px solid deeppink;" ondrop="drop(event)" ondragover="allow(event)">
 9         </div>
10         <p id="txt" draggable="true" ondragstart="drag(event)">拖拽文字（添加已定義好的父級元素裏）（功能通常爲清除的垃圾箱）</p>
11         
12         <script type="text/javascript">
13             function drag(e1){ 14  e1.dataTransfer.setData('text',e1.target.id); 15  } 16             function allow(e){ 17  e.preventDefault(); 18  } 19             function drop(e){ 20                 var tag=e.dataTransfer.getData('text'); 21  document.getElementById('box').appendChild(document.getElementById(tag)) 22  } 23         </script>
24     </body>
25 </html>

View Code

代碼解釋：

調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）
經過 dataTransfer.getData("Text") 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中

轉自：w3school.com

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>Title</title>
  5     <meta charset="utf-8">
  6     <style>
  7         #draggable {
  8             width: 200px;
  9             height: 20px;
 10             text-align: center;
 11             background: white;
 12             margin: 0 auto;
 13         }
 14         .dropzone {
 15             box-sizing: border-box;
 16             width: 400px;
 17             height: 60px;
 18             background: blueviolet;
 19             margin: 10px auto;
 20             padding: 20px;
 21         }
 22     </style>
 23 </head>
 24 <body>
 25 <!--dropzone:表示可釋放的區域-->
 26 <div class="dropzone">
 27     <!--可拖動的元素 draggable="true"-->
 28     <div id="draggable" draggable="true" >
 29         來拖動我啊
 30     </div>
 31 </div>
 32 <div class="dropzone"></div>
 33 <div class="dropzone"></div>
 34 <div class="dropzone"></div>
 35 
 36 
 37 <script>
 38     /*儲存拖動的目標*/
 39     var dragged;
 40 
 41 
 42     /*開始拖動的時觸發。 只觸發一次*/
 43     document.addEventListener("dragstart", function (event) {
 44 //        console.log("開始拖動了");
 45         // 保存被拖動的元素對象
 46         dragged = event.target;
 47         // 把拖動元素的該成半透明。
 48         event.target.style.opacity = .3;
 49     }, false);
 50 
 51     /* 拖動的過程當中觸發。 只要元素在拖動，會一直重複觸發 */
 52     document.addEventListener("drag", function (event) {
 53 //        console.log("被拖的感受真爽")
 54     }, false);
 55 
 56     /*進入另一個元素的區域時觸發*/
 57     document.addEventListener("dragenter", function (event) {
 58         // 判斷當前的目標是否進入了潛在的 dropzone區域，若是是則高量這個潛在的目標區域
 59         if (event.target.className == "dropzone") {
 60 //            console.log("進入潛在的目標區域");
 61             event.target.style.background = "purple";
 62         }
 63 
 64     }, false);
 65 
 66     /* 在潛在目標區域的上方的時候會重複觸發 */
 67     document.addEventListener("dragover", function (event) {
 68 //        console.log("在潛在的目前區域上方");
 69         // 由於默認狀況下，拖放目標是不容許接受元素的。阻值默認行爲，能夠隨時是否元素。
 70         event.preventDefault();  //必須阻止默認行爲，不然的後面的drop事件不會觸發
 71     }, false);
 72 
 73     /*鬆開鼠標拖放結束。*/
 74     document.addEventListener("dragend", function (event) {
 75         console.log("拖放結束");
 76         // 把元素的透明從新設置爲1
 77         event.target.style.opacity = "1";
 78     }, false);
 79 
 80     /*從潛在目標元素上方離開的時候觸發*/
 81     document.addEventListener("dragleave", function (event) {
 82         console.log("離開目標元素");
 83         // 由於進入一個元素的時候更改了目標元素的北京，因此離開的時候要重置背景
 84         if (event.target.className == "dropzone") {
 85             event.target.style.background = "";
 86         }
 87 
 88     }, false);
 89 
 90     /*釋放拖動元素的時候觸發。  這個事件是在dropend事件觸發前觸發。*/
 91     document.addEventListener("drop", function (event) {
 92         console.log("drog.....");
 93         // prevent default action (open as link for some elements)
 94         event.preventDefault();
 95         // 把拖動的元素移動目標區域中
 96         if (event.target.className == "dropzone") {
 97             event.target.style.background = "";
 98             //把拖動元素從他原來的父節點中移除。
 99             dragged.parentNode.removeChild(dragged);
100             //插入到目標元素中。
101             event.target.appendChild(dragged);
102         }
103 
104     }, false);
105 </script>
106 </body>
107 </html>

eg2

轉自：完善飛躍

拓展學習--經典例子：

HTML5--拖拽API(含超經典例子)：http://blog.csdn.net/baidu_25343343/article/details/53215193

HTML5——拖拽相關API及其餘學習分享

一、HTML5 Sortable 是一個輕量級排序插件，使用原生的 HTML5拖放 API 建立排序列表和網格。

二、 Draggabilly 是一個很小的 JavaScript 庫，只須要簡單的設置參數就能夠在你的網站用添加拖放功能。兼容 IE8+ 瀏覽器，支持多點觸摸。能夠靈活綁定事件，支持 RequireJS 以及 Bower 安裝。中文可參照：http://blog.csdn.net/auven_zj/article/details/74611887。

三、html5和js超實用的拖放UI界面設計：

[來自：jQuery之家]

四、 11個好用的jQuery拖拽拖放插件

2017-11-08