
6.5 上机实践——拖曳式点菜界面.pptx
- 1.请仔细阅读文档,确保文档完整性,对于不预览、不比对内容而直接下载带来的问题本站不予受理。
- 2.下载的文档,不会出现我们的网址水印。
- 3、该文档所得收入(下载+内容+预览)归上传者、原创作者;如果您是本文档原作者,请点此认领!既往收益都归您。
下载文档到电脑,查找使用更方便
10 文币 0人已下载
下载 | 加入VIP,免费下载 |
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 6.5 上机实践——拖曳式点菜界面.pptx
- 资源描述:
-
1、第6章 HTML5的元素拖拽,6.1 曾经的拖曳解决方案,6.2 HTML5中拖曳的实现方法,6.3 dataTransfer对象,6.4 文件拖曳操作,6.5 上机实践拖曳式点菜界面,6.5 上机实践拖曳式点菜界面,6.5.1 实践目的 应用HTML5的拖曳技术,实现一个点菜界面,在已有的菜品中,为指定顾客点选、分配。 6.5.2 设计思路 假设有三位顾客,每种菜品只能分配给任意一位顾客,对于没有人选择的菜品,可以进行删除。分配菜品使用拖曳形式,当将某一菜品拖曳至顾客对应物品栏时,其他顾客将无法再次选择此菜品。根据如上分析,我们设定设计步骤如下。 (1)设计界面,包括两大部分,一是顾客物品栏
2、区域,二是已有菜品区域。 (2)对各区域添加相应拖曳事件。 6.5.3 实现过程 根据上面的设计思路,我们设计代码如下。,table, td border-color: #e6e6e6;border-style: solid; function dragIt(target, e) e.dataTransfer.setData(SpanImg, target.id); function dropIt(target, e) var id = e.dataTransfer.getData(SpanImg);target.appendChild(document.getElementById(id);
