Ajax的和HTML5元素拖放实现购物车功能

最新推荐文章于 2020-03-18 10:32:02 发布

luoyu6

最新推荐文章于 2020-03-18 10:32:02 发布

阅读量1.6k

点赞数 2

分类专栏： js 文章标签： HTML5拖拽加入购物车 Ajax的和HTML5元素拖放实现购物车功能购物车

本文链接：https://blog.csdn.net/luoyu6/article/details/82911156

版权

本文介绍了如何利用HTML5的拖放功能和Ajax实现购物车功能。在浏览器支持的情况下，通过设置元素的draggable属性，定义ondragstart、ondragover和ondrop事件，可以实现在页面上拖动商品到购物车并动态更新总金额。在drop事件中，通过preventDefault防止默认行为，并获取并处理被拖元素的数据。

摘要由CSDN通过智能技术生成

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。

注意:Safari 5.1.2不支持拖动.

效果图：当每一个黑色的div被拖动到灰色div中，灰色div就追加一条黑色div的信息。并且自动计算总金额

接下来我先放一坨代码在这里，先别吐，简单扫一眼就可以，一会我给你说下每一段代码的作用

全部代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style type="text/css">
			.items>div {
				width: 150px;
				height: 150px;
				background: #111;
				float: left;
				color: #fff;
				margin-right: 10px;
			}
			
			#shopcar {
				width: 500px;
				height: 250px;
				background: #ccc;
				margin-top: 20px;
			}
			
			.title,
			#car_items>p {
				display: flex;
			}
			
			#car_items {
				margin-top: 20px;
			}
			
			.title>p,
			#car_items>p span {
				float: left;
				flex: 1;