HTML5拖放API(相关重点)

  1. DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
  2. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:

    <div title="拖拽我" draggable="true">列表1</div>
  3. ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
  4. ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
  5. ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
  6. ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
  7. ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
  8. Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),
  9. 否则ondrop事件不会被触发。另外,如果 是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,
  10. 默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用 document的ondragover事件把它直接干掉。
  11. Event.effectAllowed 属性:就是拖拽的效果。
时间: 2024-10-13 10:18:37

HTML5拖放API(相关重点)的相关文章

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(代码展示)

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

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

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

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 File API初探 支持文件拖放上传功能

新一代Web开发标准HTML 5可以带来远远超出其本身作为一种标记语言的能力,除我们之前介绍的HTML 5可完美支持视频音频元素外,还提供一些强大的脚本工具,负责监督HTML5发展进程的W3C组织,刚刚出版了一份有关文档操作API的规格草案,HTML5 File API 接口功能. 该HTML5 File API的设计初衷,是改善基于浏览器的Web应用程序处理文件上传的方式,使文件直接拖放上传成为可能.草案定义了新的输入选项 ﹤input type=”file”﹥ 来处理文件上传. 更为惊喜的是

HTML5拖放API2

在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关于拖放方面的代码. 实现拖放的步骤 在HTML5中要想实现拖放操作,至少要经过两个步骤: 将想要拖放的对象元素的draggable属性设为true(draggable="true").这样才能将该元素进行拖放.另外,img元素和a元素(必须指定href属性)默认允许拖放. 编写与拖放有关的事件处理代码.关于拖放存在的几个事件如下所示. 拖放的相关事件 事件 产生事件的元素 描述 dragstart 被

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建