我不明白阻力的幾個部分拖放

這是我的代碼：我不明白阻力的幾個部分拖放

<html> 
    <head> 
     <style> 
      #div1 { 
       width:350px; 
       height:70px; 
       padding:10px; 
       border:1px solid #aaaaaa; 
      } 
     </style> 
     <script> 
      function allowDrop(ev) { 
       ev.preventDefault(); 
      } 

      function drag(ev) { 
       ev.dataTransfer.setData("text", ev.target.id); 
      } 

      function drop(ev) { 
       ev.preventDefault(); 
       var data = ev.dataTransfer.getData("text"); 
       ev.target.appendChild(document.getElementById(data)); 
      } 
     </script> 
    </head> 
    <body> 
     <p>Drag the W3Schools image into the rectangle:</p> 
     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
     <br> 
     <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 
    </body> 
</html>

問題：

1）爲什麼要使用的document.getElementById（數據）？數據是可變的沒有ID。

2）爲什麼數據類型在第一個參數中setData是文本？是圖像沒有文字。

3）第二個參數setData是Element還是id？

4）爲什麼事件（ondrogover和ondrop）使用event.preventDefault？一個事件是不夠的？

來源

2016-05-22 Ehsan

首先。 SO不是一個編碼學校。

但問題不像noob，因爲它看起來。
要這樣問，我有這樣的感覺，@ehsan當然要閱讀整個W3C頁面，他拿他的代碼示例。（http://www.w3schools.com/html/html5_draganddrop.asp）

好吧，所以哥們想要對這個拖放事物做更具體的解釋...到每個方法和事件的深度。
而這個非常基本的W3C解釋並不能滿足它的知識需求。
好學生！

讓我們嘗試回答它！
首先，讓我們來看看事件的命令：

的對象是針對作爲在它點擊鼠標保持可拖動對象。這是可能的，因爲這個元素被定義爲：draggable="true"

這裏，事件是ondragstart。它觸發drag()函數，在一個dataTransfer對象中「設置數據」。直到他拖過來已定義做一些指定事件ondragover元素

2-用戶可以只要他想拖動它無論在視口中無任何影響...
。

在我們的例子中，它是調用的allowDrop()函數。
這是一個簡單的函數，說«防止默認»。
多看書這裏：http://www.w3schools.com/jsref/event_preventdefault.asp

在我們的情況下，刪除默認阻止砸在它裏面的東西。
爲什麼？：因爲它是網頁的每個元素的默認值。因此，我們必須儘快撤銷此塊。

用戶最終釋放他的鼠標按鈕通過此下拉使能元素。
因此ondrop事件被觸發，其中調用drop()函數。

該函數實際上將«target»元素（此時懸停的元素）與最初由用戶拖動的完整HTML對象定義（作爲文本！）附加在一起。

Javascript如何知道哪個元素被拖動？
它在由事件ondragstart創建的dataTransfer對象中。
這個完整的HTML對象在這裏是TEXT ... drag()函數的結果。

-----現在
答案！ ;）

問題＃1：變量«data»包含一個id（這裏的確是javaScript的基本知識）。

問題＃2：數據類型爲«text»，因爲附加的數據是文本格式（一個HTML元素，因爲您將它寫入純文本編輯器中）。它可以是一個圖像，一個鏈接，一個按鈕......無論如何。

問題3：這是一個ID。在這種情況下，「目標」元素的ID將被拖動。
（我們在功能drag()和我們仍然在元素被拖動）

這是不一樣的«目標»在drop()功能（當用戶在啓用滴元素），因爲這現在是其他事件的「目標」。

問題＃4：您可能已經明白，在刪除之前，您必須啓用刪除，因爲它在默認情況下被阻止。就像在入門之前打開一扇門一樣簡單。

-----
dataTransfer對象在這裏更多的閱讀：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

來源

2016-05-22 02:58:37

我不明白阻力的幾個部分拖放

回答

相關問題