拖拽
在相應的可拖拽元素上設置 draggable=‘true’
事件：
可拖動元素
1、dragstart:開始拖拽
2、drag：拖拽過程中
3、dragend：拖拽結束
拖拽的接受目標區域
1、dragenter：進入目標區域
2、dragover：在目標區域中
3、dragleave：離開目標區域
4、dragdrop：在目標區域中松開（需要早dragover事件中阻止默認事件）
傳送和接收數據：
event.dataTransfer.setdata('text',this.index)
event.dataTransfer.getdata('text')
拖拽購物車案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul:after {
display: block;
content: '';
clear: both;
}
li {
list-style: none;
float: left;
width: 200px;
border: 1px solid #000;
margin: 10px;
}
li img {
width: 200px;
}
p {
border-bottom: 1px dashed #000;
}
#div1 {
width: 600px;
height: 300px;
border: 1px #000 solid;
}
.box1 {
float: left;
width: 200px;
}
.box2 {
float: left;
width: 200px;
}
.box3 {
float: left;
width: 200px;
}
#allMoney {
float: right;
}
</style>
<script>
window.onload = function() {
var oLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var obj = {};
var iNum = 0;
var allMoney = null;
for (var i = 0; i < oLi.length; i++) {
oLi[i].ondragstart = function(ev) {
var aP = this.getElementsByTagName('p')
ev.dataTransfer.setData('title', aP[0].innerHTML)
ev.dataTransfer.setData('money', aP[1].innerHTML)
//ev.dataTransfer.setDragImage(this,0,0);
}
}
oDiv.ondragover = function(ev) {
ev.preventDefault();
}
oDiv.ondrop = function(ev) {
ev.preventDefault();
var sTitle = ev.dataTransfer.getData('title');
var sMoney = ev.dataTransfer.getData('money');
if (!obj[sTitle]) {
oDiv.innerHTML = oDiv.innerHTML + `
<p>
<span class="box1">1</span>
<span class="box2">${sTitle}</span>
<span class="box3">${sMoney}</span>
</p>
`
obj[sTitle] = 1;
} else {
var box1 = document.getElementsByClassName('box1');
var box2 = document.getElementsByClassName('box2');
for (var i = 0; i < box2.length; i++) {
if (box2[i].innerHTML == sTitle) {
box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
}
}
}
iNum += parseInt(sMoney);
console.log(iNum);
if (!allMoney) {
oDiv.innerHTML = oDiv.innerHTML + `<div id="allMoney">${iNum}￥</div>`
allMoney = 1;
}
document.getElementById('allMoney').innerHTML = iNum + '￥';
oDiv.appendChild(document.getElementById('allMoney'));
}
}
</script>
</head>
<body>
<ul>
<li draggable='true'>
<p>js高級程序設計</p>
<p>80￥</p>
</li>
<li draggable='true'>
<p>css技術指南</p>
<p>60￥</p>
</li>
<li draggable='true'>
<p>node深入學習</p>
<p>78￥</p>
</li>
</ul>
<div id="div1">
</div>
</body>
</html>
