>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pic/raw/master/wx.jpg) > - 部落格園：http://www.cnblogs.com/lvonve/ > - CSDN：https://blog.csdn.net/lvonve/ > > 在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！  # 一、拖拽介面 **元素拖拽事件：** `ondrag ` ：應用於拖拽元素，整個拖拽過程都會持續呼叫； `ondragstart `：應用於拖拽元素，當拖拽開始時呼叫； `ondragleave`：應用於拖拽元素，拖拽過程中，當滑鼠離開拖拽元素範圍時呼叫； `ondragend` ：應用於拖拽元素，當拖拽結束時呼叫。 **目標拖拽事件：** `ondragenter`：應用於目標元素，當拖拽元素進入時呼叫； `ondragover`：應用於目標元素，當停留在目標元素上時呼叫； `ondrop`：應用於目標元素，當在目標元素上鬆開滑鼠時呼叫； `ondragleave`：應用於目標元素，當滑鼠離開目標元素時呼叫。 示例：**將一個div中的p標籤拖拽到另一個p標籤中** ```html

試著把我拖過去

``` > 1、被拖拽的元素必須新增 `draggable="true"` 屬性。 > > 2、瀏覽器預設會阻止目標元素的 ondrop 事件：我們必須在目標元素的 ondragover 中阻止瀏覽器的預設行為（使用事件引數物件的 `preventDefault() `方法），才能將拖拽的元素放到目標元素中。 **遺留問題：**如果有多個 div，那麼每個 div 都必須寫 ondragover 和 ondrop 事件觸發的處理函式，也就是隻能拖拽指定的元素到指定的元素中，這樣程式碼的可用性就很低了。 **分析問題：**既然有多個被拖拽元素和多個目標元素存在，這些元素都存在於 document 中的，那麼可不可以給 document 新增這些事件呢？ 答案是可以的。 ```html

試著把我拖過去

試著也把我拖過去

``` > 在事件引數物件中有一個 target 屬性，其值為被拖拽的元素物件。 問題解決了，但是，又是但是......，但是一般少使用全域性變數，全域性變數誰都可以修改，容易誤操作。 **在事件引數物件中有一個 `dataTransfer` 屬性，通過 `dataTransfer` 來實現資料的儲存與獲取。** dataTransfer 有兩個方法： `setData(format,data); `用於儲存資料； `getData(format,data); 用於取出資料；`**（取出資料必須在目標元素的 ondrop 事件中，其他事件中無法取到資料）** format:資料的型別：`text/html` ，` text/uri-list` Data:資料:一般來說是字串值 ```html

試著把我拖過去

試著也把我拖過去

``` # 二、Web儲存 使用者在瀏覽網頁的時候，可能需要儲存一些資料在本地，之前是採用 Cookie 的方式儲存，但是 Cookie 只能儲存大小為 4k 以內的資料，再多的資料就儲存不了。並且 Cookie 的解析也是很複雜的。 到了h5階段，又提供了兩種方式來儲存 web 資料：sessionStorage 和 localStorage。 ## 1、sessionStorage sessionStorage的使用：將儲存資料到本地。儲存的容量 **5MB** 左右。 注意：sessionStorage 的儲存特點： - **這個資料本質是儲存在當前頁面的記憶體中，意味著其它頁面和瀏覽器無法獲取資料。** - **它的生命週期為關閉當前頁面時，資料會自動清除。** 提供的方法： - **setItem(key,value)** ：儲存資料，以鍵值對的方式儲存， - **getItem(key)** ：獲取資料，通過指定名稱的key獲取對應的value值， - **removeItem(key)** ：刪除資料，通過指定名稱key刪除對應的值， - **clear()** ：清空所有儲存的內容。 示例： ```html

sessionStorage的使用

``` > 1、獲取資料的時候，如果找不到對應名稱的 key，那麼獲取的值為 null。 > > 2、刪除資料的時候，如果 key 值錯誤，不會報錯，但是也不會刪除資料。 ## 2、localStorage localStorage的使用： - 儲存的內容大概 **20MB** 大小 - **不同瀏覽器不能共享資料。但是在同一個瀏覽器的不同視窗中可以共享資料；** - **永久生效，它的資料是儲存在硬碟上，並不會隨著頁面或者瀏覽器的關閉而清除。如果想清除，必須手動清除** `setItem(key,value)`:儲存資料，以鍵值對的方式儲存 `getItem(key)`:獲取資料，通過指定名稱的key獲取對應的value值 `removeItem(key)`:刪除資料，通過指定名稱key刪除對應的值 `clear()`:清空所有儲存的內容 示例： ```html

localStorage的使用：

``` # 三、自定義播放器 我們知道不同的瀏覽器的音訊視訊的播放器控制元件顯示樣式有差異，那麼我們怎麼做一個在任何瀏覽器下都有相同樣式的播放器呢？ **常用方法**： - `load()` 載入， - `play()`播放， - `pause()` 暫停。 > 注意：jQuery中沒有提供對視訊播放控制元件的方式，所以如果使用jQuery操作元素，必須將其轉為原生 js 的方式來呼叫這些方法。 **常用屬性**： - `currentTime`：視訊播放的當前進度 - `duration`：視訊的總時長 - `paused`：視訊播放的狀態 **常用事件**： - `oncanplay`：事件在使用者可以開始播放視訊/音訊時出觸發 - `ontimeupdate`：通過該事件報告當前的播放進度 - `onended`：播放完時觸發 示例程式碼： ```html

自定義視訊播放器

00:00:00 \ 00:00:00 ```  > 1、視訊控制器中的播放暫停按鈕和全屏按鈕都是來自線上字型圖示 font-awesome。 > > 2、進度條一欄實際上有4層，處理可以看到的總時長，快取時長，播放時長外還有一個最頂層的透明層，用於點選進度條實現跳變功能。