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

最新推荐文章于 2023-05-05 00:05:48 发布

DanieL_wWw

最新推荐文章于 2023-05-05 00:05:48 发布

阅读量1.8k

点赞数 3

分类专栏： HTML5 文章标签： HTML5 CSS3

本文链接：https://blog.csdn.net/weixin_41871881/article/details/82703808

版权

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

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

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

实现思路：

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: absolut

最低0.47元/天解锁文章

DanieL_wWw

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
如果要你做一个购物车结算系统你会怎么做？HTML5利用拖拽api和datatranster实现购物车结算

开发工具可参考博客置顶贴实现思路：HTML5+CSS结构添加draggable属性实现API互动 JS获取HTML节点 JS添加拖拽事件（如：ondragstart、ondragover、ondrop）首先展示的是HTML5和CSS的结构： &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/tit...
复制链接

扫一扫

专栏目录