html5专题,html5专题

拖拽

在相应的可拖拽元素上设置 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')

拖拽购物车案例：

Document

* {

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;

}

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 + `

1

${sTitle}

${sMoney}

`

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 + `

${iNum}￥

`

allMoney = 1;

}

document.getElementById('allMoney').innerHTML = iNum + '￥';

oDiv.appendChild(document.getElementById('allMoney'));

}

}

• 

  js高级程序设计

  80￥

• 

  css技术指南

  60￥

• 

  node深入学习

  78￥