实现li标签的拖拽功能，在html5之后，链接、文本和图像默认是可以拖动的，其他的控件想要实现拖拽，在定义的时候将 draggable 设置为true。
在进行拖拽的时候，使用具体的一些方法：
for(var i=0;i<aA.length;i++){
aA[i].ondragstart = function(ev){ //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'link';
};
aA[i].ondragend = function(){ //拖拽结束触发
}
oDiv.ondragenter = function(){ //相当于onmouseover
};
oDiv.ondragleave = function(){ //相当于onmouseout
};
oDiv.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
};
oDiv.ondrop = function(ev){ //释放鼠标的时候触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
float: left;
width: 200px;
margin: 10px;
}
p{
height:30px;
line-height:30px;
text-indent:1em;
font-weight:bold;
border-bottom:1px #333 dashed;
}
#shopping_car{
width: 600px;
height: 300px;
border: 1px #000 solid;
clear: both;
}
.box1{
float:left; width:200px;
}
.box2{
float:left; width:200px;
}
.box3{
float:left; width:200px;
}
</style>
<script>
window.onload = function(){
//首先是每一个li是可以进行拖动的，所以
var aLi = document.getElementsByTagName("li");
var oDiv = document.getElementById('shopping_car');
var obj ={
};
//这里主要是拖拽时进行数据的存储
for(var i = 0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){
var aP = this.getElementsByTagName('p');
ev.dataTransfer.setData('title',aP[0].innerHTML);
//这里在进行拖拽的进行保存一个键值对，vaule必须是字符串
ev.dataTransfer.setData('money',aP[1].innerHTML);
};
}
oDiv.ondragover = function(ev){
//进入目标、离开目标之间，连续触发。
ev.preventDefault();//阻止默认事件：元素就可以释放了。
};
oDiv.ondrop = function(ev){
//释放鼠标的时候进行释放
//在释放的时候就将拖拽时保存的数据在div中创建li进行显示
ev.preventDefault();
//获取刚刚保存的数据
var sTitle = ev.dataTransfer.getData('title');
var sMoney = ev.dataTransfer.getData('money');
//这里是为了区别是否是第一次拖进div，第一次拖拽进div就需要新建p、新建span等
if(!obj[sTitle]) {
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = sTitle;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = sMoney;
oP.appendChild(oSpan);
oDiv.appendChild(oP);
obj[sTitle] = 1;
}else{
//第二次之后的拖拽都是只用改变number即可，
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;
}
}
}
};
};
</script>
</head>
<body>
<ul>
<li draggable="true">
<p>java</p>
<p>40￥</p>
</li>
<li draggable="true">
<p>kotlin</p>
<p>69￥</p>
</li>
<li draggable="true">
<p>js</p>
<p>48￥</p>
</li>
</ul>
<div id="shopping_car"></div>
</body>
</html>
注意的地方是： var aP = this.getElementsByTagName(‘p’); 这里刚开始我是写的 document.getElementsByTagName(),这里应该是this。如果写的document的话就是只能获取到第一个li下面的p元素，不能正确获取都li的title。