HTML5拖拽上傳 ／ 2-2 傳統拖拽的簡單實現（指令碼部分）

事件中觸發的匿名函式內的引數e代表這個事件。    設定一個變數，記錄滑鼠是否按下，判斷滑鼠按下的時候再執行移動的事件（否則滑鼠沒按下的時候一直執行事件，瀏覽器會崩潰） 在設定一個空物件，存放滑鼠移動後的位置。 設定滑鼠按下，移動，和鬆開的事件。 最新的位置就是原本的top和left加上滑鼠移動的距離，滑鼠移動的距離為e.pageX-起初滑鼠點選時的距離。 每觸發一次移動事件，就要更新一次當前的位置，也就是時刻更新當前位置，否則會有問題。 當滑鼠鬆開的時候，要初始化滑鼠，並初始化位置。 移動事件綁在document上不會讓滑鼠丟擲div外部。
 pageX指的是滑鼠在頁面上的位置，從頁面左上角開始，即是以頁面為參考點，不隨滑動條移動而變化 clientX指的是滑鼠在頁面上可視區域的位置，從瀏覽器可視區域左上角開始，即是以瀏覽器滑動條此刻的滑動到的位置為參考點，隨滑動條移動 而變化。

HTML5拖拽上傳 ／ 2-4 實現滑鼠事件位置的4種方式

實現滑鼠事件位置的4中方式： e.clientX / e.clientY：滑鼠到瀏覽器視口左上角的位置（不包括瀏覽器工作列），並且，無視滾動，左上角都是為0。 e.pageX / e.pageY：與上方基本相同，唯一不同的是，需要計算滾動的高寬。 e.offsetX / e.offsetY：滑鼠到最近的父元素左上角的距離。 e.screenX / e.screenY：滑鼠到整個電腦顯示屏左上角的距離。
 

HTML5拖拽上傳 ／ 3-1 HTML5拖拽的語法

html5拖拽基礎知識： -draggable=true； -拖拽事件 -dataTransfer物件

HTML5拖拽上傳 ／ 3-2 HTML5拖拽語法的小案例

為被拖拽元素新增屬性： draggable="true";//可拖拽 ondragstart="dragstart(event)";//引號內部是一個函式，利用函式控制   為目標容器新增屬性： ondrop="drop(event)";//引號內也是函式。 ondropover="dragover(event)";//同理。被拖拽元素進入目標區域時會不停觸發，只有在目標區域時才會觸發，鬆開滑鼠停止。    e.target;//獲取事件的目標元素 e.dataTransfer.setData( "Text", e.target.id );//儲存一個數據型別為Text的資料，第一個引數為資料型別，第二個為資料。 e.dataTransfer.getData("Text");//獲取。 e.preventDefault();//預設情況下瀏覽器阻止所有的拖放操作,所以需要監聽dragenter或者dragover取消瀏覽器預設行為使元素可拖放。 e.target.appendChild('dom物件');//引號內的dom物件是被拖拽元素，這裡將被拖拽元素放入容器目標中
  e.preventDefault();//這裡的e為window物件上的event物件。 這裡因為event沒有在其他地方被定義，因此，這樣寫ondrop="drop(event)"的目的是為了實現IE和火狐瀏覽器中event的傳遞。 因為在IE中，event是全域性的（即：公用的）相當於window.event，而火狐瀏覽器中的event則是必須存在事件中，必須要寫。 為了相容瀏覽器，即都能在兩個瀏覽器上正常執行，所以繫結的js事件函式預設傳遞的引數是event，這裡的event在IE上指window.event簡寫event，在火狐瀏覽器中則是事件onchange固有的引數e，簡單的理解就是為了相容瀏覽器的。   ondrop="drop(event)";不能寫成drop(e); 因為window物件中沒有e屬性，只有event屬性。 這裡不僅僅是一個引數，是有實際意義的。相當於把滑鼠的event物件傳遞進去了，因為這個是滑鼠拖動的事件。

HTML5拖拽上傳 ／ 3-3 拖拽詳解

在容器目標中繫結還可繫結事件 ondragenter="dragenter(event)";//滑鼠拖拽進入容器（輪廓觸碰容器都算，一碰就觸發）時觸發事件。 ondragleave="dragleave(event)";//滑鼠拖拽離開容器時觸發事件。 ondragend="dragendContainer(event)";//拖拽到進入容器的區域鬆開滑鼠後就會觸發此事件   還可為被拖拽元素新增事件： ondrag="drag(event)";//拖拽的時候會不停觸發這個事件，就算滑鼠停止也會不停觸發。 ondragend="dragendTarget(event)";//拖拽到無論哪個區域鬆開滑鼠後就會觸發此事件     e.dataTransfer.setDragImage(圖片的dom元素, 圖片的position-x, position-y);//改變拖拽時滑鼠下的圖片;
 在所有的拖拽事件中都提供了一個數據傳遞物件就是datetransfer，用於在源物件和目標物件之間傳遞資料。 傳遞資料就是為了實現拖拽。 比如：一個div（div1）想要拖拽到另一個div（div2）元素中，那麼可以將div1中的id值傳遞過去，當div2接收到資料的時候，直接通過傳遞的id值獲取div1元素，然後追加到div2中就可以了。

HTML5拖拽上傳 ／ 4-3 拖拽問卷（3）

jQ中使用append()方法追加東西（東西就是引數的東西）在元素之後。 find()方法查詢後代所有滿足的子元素。不是直接後代，是所有後代 clone()複製元素。  

 HTML5拖拽上傳 ／ 5-1 例項--拖拽拼圖

(function($) {})(jQuery);//這樣不會汙染程式空間。 通過jQuery獲取到原始物件的資料：e.originalEvent.dataTransfer.setData('key', value);【這裡的e.originalEvent是事件裡的event，JQ將其封裝了起來。但是window物件上的event仍舊是e】 ondragover事件必須新增e.preventDefault();否則不會生效。

HTML5拖拽上傳 ／ 6-2 拖拽檔案上傳案例JS（1）

拖拽檔案上傳js編寫步驟：   目標物件繫結dragenter事件 在裡頭判斷tips（提示）是否還存在，若存在，則改變文字（鬆開滑鼠即可上傳），目標物件的邊框發生變化表示enter事件發生； 在繫結dragleave事件，在裡頭判斷tips（提示）是否還存在，若存在，則改變文字（拖動檔案至此區域即可上傳），刪除目標物件的邊框； 再繫結dragover事件，新增e.preventDefault();//取消預設事件； 再繫結drop事件，新增e.preventDefault()，在裡頭判斷tips（提示）是否還存在，若存在，則移除提示（新增display：none），並把檔案放置的地方顯示出來，（起初是設定為display：none的）display: block，並把邊框變回顏色， 接著依舊在這個事件中獲取檔案，可以從e.dataTransfer.files（jQ中用e.originalEvent.dataTransfer.files）， 接下來需要遍歷獲取檔案，因為上傳的檔案可能是多個，所以files是一個數組， 接著複製上傳的這個列表（目的是把這個列表放置到顯示這個列表的區域），並獲取裡面name（把file的name屬性獲取到，送給顯示name的區域），進度progress，圖示，最後定義一個顯示進度條動畫的函式，傳入file，progress，圖示。並判斷在一定條件下progress的樣式變化並設定。
   使用原生js方法時，return false只能阻止預設行為，不能阻止冒泡。 preventDefault它是事件物件(Event)的一個方法，作用是取消一個目標元素的預設行為。 如果 type 屬性是 "submit"，在事件傳播的任意階段可以呼叫任意的事件發生時要進行的操作，通過呼叫preventDefault方法，可以阻止提交表單。 event.stopPropagation()方法不能阻止同一個Document節點上的其他事件被呼叫。   拖拽外掛2-Dragdealer.js： 地址：skidding.github.io/dragdealer/     jQuery拖拽外掛：pep.briangonzalez.org