HTML5+CSS3+JavaScript Web前端开发案例教程课件：仿问卷星.pptxVIP

仿问卷星

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：仿问卷星（在线问卷调查平台）核心功能：组件拖拽自动生成表单删除表单元素自动生成HTML代码

案例介绍仿问卷星效果演示

02技术准备

技术准备技术1：HTML5拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。HTML5实现拖放的属性包括：draggable=true，设置该属性的元素可以被拖放；ondragstart=script，该属性设置开始拖动时触发的js事件；ondragover=script，该属性拖放元素至何处；ondrop=script，拖动的元素被放置时触发的函数。

技术准备拖放实现：第一步，设置元素为可拖动。divdraggable=true/div

技术准备第二步，定义拖拽事件。divdraggable=trueondragstart=drag(event)/divscriptfunctiondrag(event){evData(Text,ev);}/script

技术准备第三步，设置被放置区域允许放置元素，并阻止浏览器默认行为。divondragover=allowDrop(event)/divscriptfunctionallowDrop(event){event.preventDefault()}/script

技术准备第四步，放置元素。divondrop=drop(event)/divscriptfunctionallowDrop(event){event.preventDefault();vardata=evData(Text);evendChild(document.getElementById(data));}/script

技术准备拖拽效果演示

技术准备技术2：Document创建元素在HTMLDOM(DocumentObjectModel)中,每一个元素都是节点：文档是一个文档节点；所有的HTML元素都是元素节点；所有HTML属性都是属性节点；文本插入到HTML元素是文本节点。aretextnode；注释是注释节点。

技术准备Document对象提供的用于创建节点的方法：方法名描述document.createAttribute()创建一个属性节点document.createComment()创建注释节点document.createDocumentFragment()创建空的DocumentFragment对象，并返回此对象document.createElement()创建元素节点document.createTextNode()创建文本节点

03案例实现

案例实现文件结构：