6.5 上机实践——拖曳式点菜界面

《6.5 上机实践——拖曳式点菜界面》由会员分享，可在线阅读，更多相关《6.5 上机实践——拖曳式点菜界面（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(i

3、d); 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区域之间的拖曳操作。,