HTML 5的拖放API实现购物车拖放效果

1、结果展示的拖曳效果：



2、代码如下：

<div class="goodsBox" ondrop="drop(event)" ondragover="allowDrop(event)">
			<h2>商品列表</h2>
			<hr>
			<img src="img/one.jpg" id="img1" draggable="true" ondragstart="drag(event)">
			<img src="img/two.jpg" id="img2" draggable="true" ondragstart="drag(event)">
			<img src="img/three.jpg" id="img3" draggable="true" ondragstart="drag(event)">
			<img src="img/four.jpg" id="img4" draggable="true" ondragstart="drag(event)"> 
		</div>
		<div class="shoppingCarBox" ondrop="drop(event)" ondragover="allowDrop(event)">
			<h2>购物车</h2>
			<hr>
		</div>
		
	</body>

.goodsBox,.shoppingCarBox{
	width:400px;
	height:260px;
	margin:50px 50px;
	border:1px solid cornflowerblue;	
	background: plum;
	position: float;
	float:left;
}
h2{
	margin-left: 30px;
}
hr{color:#4CAF50;}
img{
	position: float;
	float:left;
	width:98px;
	height:187px;
	margin-top:-9px;
	margin-left: 0px;
	border:1px solid #4CAF50;}

//创建一个图像元素
var myImg=document.createElement("img");
//设置图像的src属性
myImg.src="img/one.jpg";
//拖动方法
var drag=function(e){
	e.dataTransfer.effectAllowed="link";
	e.dataTransfer.setData("text/plain",e.target.id);
}
var drop=function(e){
	allowDrop(e);
	var data=e.dataTransfer.getData("text");
	if(e.target.tagName=="DIV"){
		e.target.appendChild(document.getElementById(data));
	}else if(e.target.tagName=="IMG"){
		e.target.parentNode.appendChild(document.getElementById(data));
	}
}
var allowDrop=function(e){
	e.preventDefault();//通知浏览器不在执行事件相关的默认动作
	e.stopPropagation();//阻止事件冒泡
}

以上文字均为自己在学习时的总结 ，如有错误，或表述不对的地方，请多包涵，ps：可以在评论区交流哟！