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

第6章HTML5的元素拖拽6.1曾经的拖曳解决方案6.2HTML5中拖曳的实现方法6.3dataTransfer对象6.4文件拖曳操作6.5上机实践——拖曳式点菜界面6.5上机实践——拖曳式点菜界面6.5.1实践目的应用HTML5的拖曳技术，实现一个点菜界面，在已有的菜品中，为指定顾客点选、分配。6.5.2设计思路假设有三位顾客，每种菜品只能分配给任意一位顾客，对于没有人选择的菜品，可以进行删除。分配菜品使用拖曳形式，当将某一菜品拖曳至顾客对应物品栏时，其他顾客将无法再次选择此菜品。根据如上分析，我们设定设计步骤如下。（1）设计界面，包括两大部分，一是顾客物品栏区域，二是已有菜品区域。（2）对各区域添加相应拖曳事件。6.5.3实现过程根据上面的设计思路，我们设计代码如下。htmlheadstyletype=text/csstable,td{border-color:#e6e6e6;border-style:solid;}/stylescriptfunctiondragIt(target,e){e.dataTransfer.setData('SpanImg',target.id);}functiondropIt(target,e){varid=e.dataTransfer.getData('SpanImg');target.appendChild(document.getElementById(id));e.preventDefault();}functiontrashIt(target,e){varid=e.dataTransfer.getData('SpanImg');removeElement(id);e.preventDefault();}functionremoveElement(id){vard_node=document.getElementById(id);d_node.parentNode.removeChild(d_node);}/script/headbodycentertablewidth=100%border=1cellspacing=0cellpadding=5trtdcolspan=3align=centerb请将选择的菜品和果品拖曳至对应顾客下方区域/b/td/trtrbgcolor=#F2F2F2tdwidth=30%class=tableheaderalign=centerp顾客A/p/tdtdwidth=30%class=tableheaderalign=centerp顾客B/p/tdtdwidth=30%class=tableheaderalign=centerp顾客C/p/td/trtrtdwidth=30%align=centerid=customAondrop=dropIt(this,event)ondragenter=returnfalseondragover=returnfalsespandraggable=trueid=Aondragstart=dragIt(this,event) /span/tdtdwidth=30%align=centerid=customBondrop=dropIt(this,event)ondragenter=returnfalseondragover=returnfalsespandraggable=trueid=Bondragstart=dragIt(this,event) /span/tdtdwidth=30%align=centerid=customCondrop=dropIt(this,event)ondragenter=returnfalseondragover=returnfalsespandraggable=trueid=Condragstart=dragIt(this,event) /span/td/tr/tablebrbrtablewidth=100%border=1cellspacing=0cellpadding=5trbgcolor=#F2F2F2tdclass=tableheaderwidth=80%valign=topalign=leftp可选择的菜品及果品/p/tdtdwidth=20%class=tableheadervalign=topalign=centerp删除/p/td/trtrtdwidth=80%valign=bottomalign=leftid=holderondrop=dropIt(this,event)ondragenter=returnfalseondragover=returnfalsespandraggable=trueid=1ondragstart=dragIt(this,event)imgsrc=img/1.jpg/spanspandraggable=trueid=2ondragstart=dragIt(this,event)imgsrc=img/2.jpg/spanspandraggable=trueid=3ondragstart=dragIt(this,event)imgsrc=img/3.jpg/spanspandraggable=trueid=4ondragstart=dragIt(this,event)imgsrc=img/4.jpg/spanspandraggable=trueid=5ondragstart=dragIt(this,event)imgsrc=img/5.jpg/spanspandraggable=trueid=6ondragstart=dragIt(this,event)imgsrc=img/6.jpg/spanspandraggable=trueid=7ondragstart=dragIt(this,event)imgsrc=img/7.jpg/spanspandraggable=trueid=8ondragstart=dragIt(this,event)imgsrc=img/8.jpg/spanspandraggable=trueid=9ondragstart=dragIt(this,event)imgsrc=img/9.jpg/spanspandraggable=trueid=10ondragstart=dragIt(this,event)imgsrc=img/10.jpg/spanspandraggable=trueid=11ondragstart=dragIt(this,event)imgsrc=img/11.jpg/span/tdtdwidth=20%valign=middlealign=centerspanid=bucket3ondragenter=returnfalseondragover=returnfalseondrop=trashIt(this,event)imgsrc=img/trash.pngdraggable=false/span/td/tr/table/center/body/html演示效果点菜初始界面通过拖曳操作分别为顾客分配菜品及果品后，得到的效果如图所示。对于顾客不想要的菜品，可以拖曳回原位置，或者直接拖曳至垃圾桶图标进行删除。例如，将顾客A的梨子拖回原处，将顾客C的猕猴桃删除，得到的效果如图6-7所示。为顾客分配菜品后的效果拖回原处及删除后的效果小结本章通过与之前的拖曳技术对比开始介绍HTML5中拖曳技术的实现，主要介绍了HTML5中元素拖曳的相关事件、dataTransfer对象的用法以及文件的拖曳操作。习题（1）HTML5中拖曳包括哪几种事件？（2）dataTransfer对象如何保存数据？（3）编写一个页面，该页面包含两个DIV元素：div1和div2，其中div1中包含三张图片。请使用HTML5的元素拖曳技术，实现已有图片在两个div区域之间的拖曳操作。