《上机实践拖曳式点菜界面ppt课件.pptx》由会员分享，可在线阅读，更多相关《上机实践拖曳式点菜界面ppt课件.pptx（12页珍藏版）》请在三一办公上搜索。
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); e.prev
3、entDefault();,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区域之间的拖曳操作。,
