分享
分享赚钱 收藏 举报 版权申诉 / 12

类型6.5 上机实践——拖曳式点菜界面.pptx

  • 上传人:weiwoduzun
  • 文档编号:5677997
  • 上传时间:2019-03-12
  • 格式:PPTX
  • 页数:12
  • 大小:849.04KB
  • 配套讲稿:

    如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);

    3、 e.preventDefault(); ,function trashIt(target, e) var id = e.dataTransfer.getData(SpanImg);removeElement(id);e.preventDefault(); function removeElement(id) var d_node = document.getElementById(id);d_node.parentNode.removeChild(d_node); 请将选择的菜品和果品拖曳至对应顾客下方区域,顾客A顾客B顾客C,可选择的菜品及果品删除,演示效果,点菜初始界面,通过拖曳操作分别

    4、为顾客分配菜品及果品后,得到的效果如图所示。对于顾客不想要的菜品,可以拖曳回原位置,或者直接拖曳至垃圾桶图标进行删除。例如,将顾客A的梨子拖回原处,将顾客C的猕猴桃删除,得到的效果如图6-7所示。,为顾客分配菜品后的效果,拖回原处及删除后的效果,小 结,本章通过与之前的拖曳技术对比开始介绍HTML5中拖曳技术的实现,主要介绍了HTML5中元素拖曳的相关事件、dataTransfer对象的用法以及文件的拖曳操作。,习 题,(1)HTML5中拖曳包括哪几种事件? (2)dataTransfer对象如何保存数据? (3)编写一个页面,该页面包含两个DIV元素:div1和div2,其中div1中包含三张图片。请使用HTML5的元素拖曳技术,实现已有图片在两个div区域之间的拖曳操作。,

    提示  道客多多所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:6.5 上机实践——拖曳式点菜界面.pptx
    链接地址:https://www.docduoduo.com/p-5677997.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    道客多多用户QQ群:832276834  微博官方号:道客多多官方   知乎号:道客多多

    Copyright© 2025 道客多多 docduoduo.com 网站版权所有世界地图

    经营许可证编号:粤ICP备2021046453号    营业执照商标

    1.png 2.png 3.png 4.png 5.png 6.png 7.png 8.png 9.png 10.png



    收起
    展开