第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 )对各区域添加相应拖曳事件。 6.5.3 实现过程 根据上面的设计思路,我们设计代码如下。 table, td border-color: #e6e6e6; border-style: solid; function dragIt(target, e) e.dataTransfer.setData(SpanImg, target.id); fun