購物車的拖放事件
目錄
一、首先，要看有關的文件
HTML5中的檔案與拖放
1.掌握files物件
2. FileReader物件的使用方法
3.FileReader物件事件
4.掌握HTML5新增拖拽的api
5.掌握dataTransfer的使用方法
在HTML5中，從Web網頁上訪問本地檔案系統非常簡單，那就是使用它新增的API，files物件。
一) files物件的使用方法
| 屬性 |
描述 |
| name |
檔名稱 |
| size |
檔案大小 |
| type |
檔案型別 |
注意:使用者每個選擇的檔案都是一個files物件，而fileList物件則為這些files物件的列表，代表使用者選擇的所有檔案。
練習1:打印出上傳檔案的詳細資訊
練習2:進行上傳檔案字尾判斷
二) FileReader介面讀取檔案
FileReader介面主要用來把檔案讀入記憶體，並且讀取檔案中的資料。FileReader介面提供了一個非同步的api，使用該api可以在瀏覽器主執行緒中非同步訪問檔案系統，讀取檔案中的資料。
| 方法 |
引數 |
描述 |
| readAsDataUrl |
file |
將檔案讀取為DataURL |
| readAsText |
file |
將檔案讀取為文字 |
2.1：readAsDataUrl:該方法將檔案讀取為一段以data開頭的字串，這段字串實際上是dataURL.，並且讀取結果都將儲存在result屬性中。
2.2:readAsText該方法會讀取檔案中的文字元素，並且讀取結果都將儲存在result屬性中。
注意:使用FileReader的時候，必須使用new運算子，創建出物件，並且呼叫readAsDaraUrl方法讀取檔案，在例項的onload事件中，獲取到成功讀取到的檔案內容。
練習3：使用readAsDataUrl預覽圖片
思考題;如何實現多個圖片預覽上傳？
練習4：使用readAsText讀取文字檔案
- FileReader事件
FileReader介面中包含了一套完整的事件模型，用於捕獲讀取檔案的狀態。
| 事件 |
描述 |
| onabort |
中斷時觸發 |
| onerror |
出錯時觸發 |
| onload |
檔案讀取成功完成時觸發 |
| onloadstart |
讀取完成觸發，無論成功或失敗 |
| onloadend |
讀取時觸發 |
| onprogress |
讀取中（接受事件物件） |
練習5：ajax非同步上傳檔案(帶進度條)
注意：檔案上傳是屬於資料流的格式，那麼我們就要注意，就要使用HTML5中的FormData物件
FormData物件用以將資料編譯成鍵值對，以便用XMLHttpRequest來發送資料。其主要用於傳送表單資料，但亦可用於傳送帶鍵資料(keyed data)，而獨立於表單使用。
jquery中ajax方法，用法如下:
| var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // 不處理資料 contentType: false // 不設定內容型別 )}
|
四) 常見的拖放api
在HTL5中，支援直接拖放操作的api。雖然HTML5之前已經可以使用mousedown,mousemove和mouseup來進行操作，但只支援在瀏覽器內部的拖放；而在HTML5中，已經支援在瀏覽器與其它應用程式之間的資料互相拖動。
實現拖拽的步驟
- 把需要拖放的物件元素的draggable屬性設為true(draggable=true)。這樣才能將該元素進行拖放。
- 編寫與拖放有關的事件處理程式碼。
拖拽api
拖拽元素API：
- ondragstart:開始拖拽時觸發
- Ondrag:拖拽中觸發事件
- Ondragend:拖拽結束觸發事件
目標元素API:
- ondragenter:進入目標元素時觸發
- Ondragover:在目標元素時觸發
- Ondragleave:離開目標元素時觸發
- Ondrop:在目標元素上釋放觸發
注意:使用ondrop事件，必須要在ondragover中阻止預設事件。（e.preventDefault()）
- dataTransfer物件用法
拖拽過程中，一定伴隨著一個datatransfer物件，這個是新增的事件物件。
Datatransfer有兩個重要的方法:
- setData(key,value):設定資料
- getData(key):獲取資料
練習7:利用datatransfer中的setData()和getData()設定和獲取文字
練習8:利用 datatransfer實現文字(txt)預覽
練習9:利用datatranster實現單張圖片預覽
練習10:利用datatranster實現多張圖片預覽
練習11:利用拖拽api和datatranster實現購物車結算
五) 總結
主要介紹了檔案api和拖放api。在檔案api中主要介紹了fileList物件與file物件，以及FileReader介面。通過這些檔案的物件和介面，可以實現檔案上傳與檔案預覽等操作。介紹了dataTransfer物件的屬性與方法的介紹，通過使用檔案的api與拖放API，對於web頁面上訪問本地檔案系統的相關操作，將會變得很簡單。
二、然後建立THML，佈局，寫好css的樣式
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul li{
list-style: none;
}
.list{
width: 880px;
height: 300px;
border: 1px solid #ddd;
margin: 0 auto;
margin-bottom: 10px;
}
.list ul li{
width: 200px;
height: 240px;
float: left;
margin: 10px;
}
.list ul li img{
width: 200px;
height: 240px;
}
.view{
width: 880px;
margin: 0 auto;
border: 1px solid #ddd;
min-height: 300px;
position: relative;
}
.view span{
float: left;
width: 293px;
height: 40px;
border-bottom: 1px solid #ddd;
text-align: center;
line-height: 40px;
}
.view .allMoney{
position: absolute;
width: 100%;
height: 20px;
left: 0;
bottom: 0;
text-align: right;
}
</style>
</head>
<script type="text/javascript" src="js/2.js" ></script>
<body>
<div class="list" id="list">
<ul>
<li draggable="true">
<img src="img/1.jpg" />
<p>javascript精粹</p>
<p>140</p>
</li>
<li draggable="true">
<img src="img/2.jpg" />
<p>javascript權威指南</p>
<p>240</p>
</li>
<li draggable="true">
<img src="img/3.jpg" />
<p>javascriptDom藝術</p>
<p>340</p>
</li>
<li draggable="true">
<img src="img/4.jpg" />
<p>javascript紅皮書</p>
<p>40</p>
</li>
</ul>
</div>
<div class="view" id="view">
<!--<span class="num">1</span>
<span class="title">javascript精粹</span>
<span class="money">40</span>
<div class="allMoney">
40
</div>-->
</div>
三、最後編寫js指令碼，解釋都在檔案中。
<script>
var oList = document.getElementById("list")
var oLi = oList.getElementsByTagName("li")
var oView = document.getElementById("view")
var obj = {}//布林值為真
var sum = 0
var oDiv = null//布林值為假
//給每個li被拖拽的事件
for (var i=0;i<oLi.length;i++) {
oLi[i].ondragstart = function(e){
var oP = this.getElementsByTagName("p")//獲取到li下面的p節點
//利用dataTransfer這個事件物件來設定和獲取資料
e.dataTransfer.setData("sTitle",oP[0].innerHTML)//通過setData的方法來設定資料
e.dataTransfer.setData("sMoney",oP[1].innerHTML)
}
}
//一定要阻止預設事件
oView.ondragover = function(e){
e.preventDefault()//阻止預設行為
}
oView.ondrop = function(e){
e.preventDefault()//阻止預設行為
var oTitle = e.dataTransfer.getData("sTitle")//通過getData的方法接收資料快取到oTitle中
var oMoney = e.dataTransfer.getData("sMoney")
//建立一個空的物件來做判斷條件
if(!obj[oTitle]){
//通過盤對條件來相對應的新增節點和資料
var oSpan = document.createElement("span")
oSpan.className = "num"//設定節點的屬性
oSpan.innerHTML = 1//給節點的文字賦值
oView.appendChild(oSpan)//將節點新增到oView節點的下面
var oSpan = document.createElement("span")
oSpan.className = "title"
oSpan.innerHTML = oTitle
oView.appendChild(oSpan)
var oSpan = document.createElement("span")
oSpan.className = "money"
oSpan.innerHTML = oMoney
oView.appendChild(oSpan)
obj[oTitle] = 1
}else {
// alert(2)
var allNum = document.getElementsByClassName("num")//獲取到每個屬性為num的節點
var allTitle = document.getElementsByClassName("title")//獲取到每個屬性為title的節點
//for迴圈每個節點
for (var i=0;i<allNum.length;i++) {
//如果每個allTitle節點的innerTHML跟原來的oTitle的innerTHML相同，allNum節點的IinnerHTML就+1
if(allTitle[i].innerHTML == oTitle){
allNum[i].innerHTML = parseInt(allNum[i].innerHTML)+1
}
}
}
//同理上面的判斷條件，如果這個oDiv物件不存在就在oView節點下面新增oDiv節點，否則就將oMoney的number追加到oDiv的innerHTML
if(!oDiv){
oDiv = document.createElement("div")
oDiv.className = "allMoney"
oView.appendChild(oDiv)//新增節點
}
// console.log(oMoney)
sum+=parseFloat(oMoney)//追加資料
oDiv.innerHTML = "總計"+sum+"元"//賦值
}
</script>