如果要你做一个购物车结算系统你会怎么做？HTML5利用拖拽api和datatranster实现购物车结算

原创

于 2018-09-14 15:48:55 发布 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #CSS3

本文介绍如何使用HTML5的拖拽API和DataTransfer对象来创建购物车结算系统。通过设置元素的draggable属性，结合ondragstart、ondragover和ondrop事件，实现物品拖放到购物车的功能。同时，Datatransfer对象用于在拖拽过程中传递数据，setData和getData方法分别用于设置和获取数据。这是一个学习HTML5拖拽功能的应用实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具可参考博客置顶贴

实现思路：

HTML5+CSS结构
添加draggable属性实现API互动
JS获取HTML节点
JS添加拖拽事件（如：ondragstart、ondragover、ondrop）

首先展示的是HTML5和CSS的结构：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>/*css*/
			*{margin: 0;padding: 0;}
			ul li{list-style: none;}
			.list{width: 880px;height: 300px;border: 1px solid #ddd;margin: 0 auto;margin-bottom: 10px;}
			.list ul li{width: 200px;height: 240px;float: left;margin: 10px;}
			.list ul li img{width: 200px;height: 240px;}
			.view{width: 880px;margin: 0 auto;border: 1px solid #ddd;min-height: 300px;position: relative;}
			.view span{float: left;width: 293px;height: 40px;border-bottom: 1px solid #ddd;text-align: center;line-height: 40px;}
			.view .allMoney{position: absolute;width: 100%;height: 20px;left: 0;bottom: 0;t