第12章 HTML5的文件操作与拖放操作1(HTML5与CSS3 Web前端开发技术).pptVIP

12.6 DataTransfer对象的属性与方法 12.6.1 DataTransfer对象的属性及拖放视觉效果 1．DataTransfer对象的属性 表12-7 DataTransfer对象的属性 属性 描述 effectAllowed 用于设置或返回指定元素被拖放时的显示效果，可以设定的值包括none、copy、copyLink、copyMove，link、linkMove、move、all、uninitialized。 dropEffect 用于设置或返回指定被拖放元素释放时的显示效果，该属性设置的取值必须在effectAllowed设置范围内，否则无效。 items 用于返回DataTransferItemList对象。 types 用于返回已保存的数据类型，如果是文件操作则返回文件类型。 files 用于返回被拖放的文件列表。 12.6 DataTransfer对象的属性与方法 ? 如果effectAllowed属性设定为none，则不允许拖放元素。 ? 如果不dropEffect属性设定为none，则不允许被拖放到目标元素中。 ? 如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。 ? 如果effectAllowed属性设定为具体效果（不为none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。 12.6 DataTransfer对象的属性与方法 2. DataTransfer对象的方法 （1）setData(format, data) 该方法将指定类型的数据存入dataTransfer对象，参数format表示保存的数据类型，参数data表示数据内容。 下面代码使用setData()方法将数据e.target.id保存到dataTransfer对象。 src.ondragstart = function (e) { //开始拖放元素时触发 //使用 dataTransfer保存拖放元素ID e.dataTransfer.setData(text,e.target.id); msg.innerHTML=开始拖放：+draggedID; } 12.6 DataTransfer对象的属性与方法 （2）getData(format) 该方法用于从dataTransfer对象中读取指定类型的数据信息，参数format表示读取的数据类型。 下面代码使用getData()方法从dataTransfer对象取得数据。 target.ondrop = function(ev){ //释放鼠标的时候触发 target.innerHTML=ev.dataTransfer.getData(text); e.preventDefault(); } 12.6 DataTransfer对象的属性与方法 （3）clearData(format) 该方法用于从dataTransfer对象中移除指定类型的数据信息，参数format表示移除的数据类型。 （4）setDragImage(image,x,y) 该方法用于设置拖拽过程中鼠标指针显示的图标，当没有显示调用setDragImage()方法进行设置时，拖拽图标将使用默认样式。参数image用于设定拖拽图标的图像元素，x用于设定图标与鼠标指针在x轴方向的距离，y用于设定图标与鼠标指针在y轴方向的距离。 12.6 DataTransfer对象的属性与方法 12.6.2 DataTransfer对象的方法 示例12-9展示了DataTransfer对象的方法。 12.7 拖放的应用 12.7.1 拖动网页元素 示例12-10实现了网页元素的拖动 12.7 拖放的应用 12.7.2 拖动上传图片 示例12-11实现了从文件夹中拖动图片到虚线框预览的效果 作业 * HTML5+CSS3 Web前端开发技术 LOGO HTML5+CSS3 Web前端开发技术 第12章HTML5的文件操作与拖放操作 file对象和FileList对象 1 ArrayBuffer对象与ArrayBufferView对象 2 Blob对象 3 FileReader接口 4 拖放API 5 DataTransfer对象的属性与方法 6 拖放的应用 7 12.1 file对象和FileList对象 在HTML 5中，为input元素添加multiple属性，file元素允许一次选择多个文件，用户选择的每一个文件都是一个file对象，而Fil