拖放API

拖放功能是电脑用户认为理所应当能够“顺畅运行”的功能，我们有数种方法在浏览器中启用此功能
。Windows Internet Explorer 9 和早期版本的 Windows Internet Explorer 支持用于拖动图像
、链接和文本的 DataTransfer 对象和事件。Internet Explorer 10 添加了对 draggable 属性和
DataTransfer.files 属性的支持，这将支持将一个或多个文件从桌面拖放到网页上。
Microsoft Edge 中引入了对最新 W3C 拖放模型的支持，其中 DataTransferItemList 对象（通过
DataTransfer.items 属性访问）用作拖动操作数据存储。以上提到的传统拖放 API 仍受支持。有关
详细信息，请参阅新的和传统的拖放。

时间： 2024-08-09 07:50:22

拖放API的相关文章

html5的新特性——拖放API

在HTML5之前只能使用鼠标事件模拟出"拖放"效果:HTML5专门为拖放提供了7个事件句柄.  被拖动的源对象可以触发的事件: (1)ondragstart:源对象开始被拖动 (2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动) (3)ondragend:源对象被拖动结束 拖动源对象可以进入到上方的目标对象可以触发的事件: (1)ondragenter:目标对象被源对象拖动着进入 (2)ondragover:目标对象被源对象拖动着悬停在上方   注意:必须组织drago

HTML5 文件拖放API讲解

本章向大家讲解一下HTML 5中文件API与拖放API的使用方法.HTML5的文件API,可以在浏览器中直接显示客户端文件的信息或文件中的内容,而通过拖放API,可以直接将位于客户端中的文件拖动到浏览器中,也可以单独拖动页面中的元素或者元素中的内容. HTML5拖拽文件预览效果图: 在线演示 以前,我们使用file控件,单击上传按钮后选择计算机中的文件.在HTML5中,我们可以先将计算机中的文件直接拖动到浏览器中进行预览,确定文件是我们所需要的,然后单击上传按钮将该文件上传到服务器端. 我们使用

Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)

一.拖放API WEB 拖放 - 在桌面应用程序上,可以将元素从一个位置拖放到另一个位置,但在Web上,开发者没有一种能够实现这种操作的标准技术,从而在Web上去实现这个功能并不太容易 - 在 HTML5 标准中引入了拖放API,从而使我们有可能开发出于桌面应用程序完全相同的 Web应用程序 源元素事件 - 在拖放 API 中引入了一些新的事件,其中有一些元素是由源元素(拖动的元素)触发,称之为源元素事件,另一些事件由目标元素触发(源元素投放的元素) - 源元素事件: - dragstart:当

HTML5拖放API

拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在 Safari 5.1.2 中不支持拖放. 拖放步骤 1.对象元素的draggable属性设置为true(draggable="true").还需要注意的是a元素和img元素必须指定href.dragstart 被拖放的元素

HTML5 拖放API

1.设置元素可拖放(draggable: true)<img draggable='true' id='source'/>2.拖动什么ondragstart setData var source = document.getElementById('source'); source.addEventListioner('dragstart', function (event) { event.dataTransfer.setData('Text', event.target.id) }, fa

HTML5新增的拖放API

其实所谓的拖放就是拖动那个元素,然后就会打开一个新的页面,根据拖动元素所随带的信息来实现不同的功能.如果没有携带,则有浏览器自己来决定如何做. <body> <div id="source" style="width:80px;height:80px;border:1px solid black; background-color:#bbb;" draggable="true"> 我不想让你知道我是谁 </div&g

HTML5拖放API(相关重点)

DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如: <div title="拖拽我" draggable="true">列表1</div> ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触

HTML5拖放API(代码展示)

源代码展示 其中HTML结构如下: <div class="dustbin"><br />垃<br />圾<br />箱</div> <div class="dragbox"> <div class="draglist" title="拖拽我" draggable="true">列表1</div> <div

HTML5学习之三：文件与拖放

(本内容部分节选自<HTML 5从入门到精通>) 选择文件 -------------------------------------------------------- 在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,在file控件内允许一次放置多个文件.控件内的每一个用户选择的文件都是一个file对象,而FileList对象则为这些file对象的列表,代表用户选择的所有文件.File对象有两个属性,name属性表示文件名,不包括路 径