HTML5_拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

支持的浏览器：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。

1、首先，为了使元素可拖动，把元素 draggable 属性设置为 true ：

时间： 2024-11-05 23:37:10

HTML5_拖放的相关文章

[HTML5_资源]给网页设计师的30个HTML5学习资源

Blowing up HTML5 video and mapping it into 3D space(将HTML5视频吹散并组成3D效果)最近我研究了HTML 5中的Canvas 和Video 标签,并发现了一些很酷的特性.其中之一就是Canvas.drawImage() api.此为详细介绍. Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3(用HTML5 和CSS3 打造向下兼容的网页)HTML5更加语义

拖放相关事件

一.拖放事件 1.任何元素都有一个draggable属性,draggable=true就能拖动,拖动元素时依次触发下列事件: (1)dragstart:按下鼠标并移动时,在被拖动元素上触发: (2)drag:在元素被拖动时持续触发: (3)dragend:拖动停止时触发: 2.当元素被拖动到一个有效的放置目标时,依次触发下列事件: (1)dragenter:元素被拖动到放置目标上触发: (2)dragover:被拖动元素在放置目标范围内移动时触发: (3)drop:元素被放到放置目标中触发: 二

【温故而知新-Javascript】使用拖放

HTML5 添加了对拖放(drag and drop)的支持.我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作.把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正如将要看到的,它能跨浏览器工作. 1. 创建来源项目我们通过 draggable属性告诉浏览器文档里的哪些元素可以被拖动.这个值有三个允许的值: 它的默认值是auto,即把决定权交给浏览器,通常来说这就意味着所有元素默认都是可拖动的,我们必须显示设置draggable 属性为false 来禁止拖动

[html5] 学习笔记- html拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,拖放是标准的一部分,任何元素都能够拖放. 1.html5拖放:(drag和drop)是HTML5标准的组成部分拖动开始:ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据设置拖动数据:setData():设置被拖数据的数据类型和值放入位置:ondragover:事件规定在何处放置被拖动的数据放置:ondrop:当放置被拖动数据时,会发生drop事件下例是将网页上的图片,拖放到网页上的指

HTML5-原声拖放

最早在网页中引入js拖放功能的是IE4,并且只可以拖放图像和某些文本.IE5.5以后网页中的任何元素都可以进行拖放.HTML5以IE为实例制定了拖放规范.FireFox3.5.Safari3+和Chrome也根据HTML5规范实现了原声拖放功能. 拖动某元素时,将依次触发下列事件: (1) dragstart (2)drag (3)dragend 这个事件和mousemove事件相似.以上三个事件的目标都是被拖动元素,默认情况下,浏览器不会在拖动期间改变被拖动元素的外观,但你可以自己修改.不过,

HTML5学习之三：文件与拖放

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

htm5拖放和画布

拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 首先,为了使元素可拖动,把 draggable 属性设置为 true ondragover 事件规定在何处放置被拖动的数据. 当放置被拖数据时,会发生 drop 事件. <!DOCTYPE html><html><head> <meta charset="utf-8"> <title></ti

html5 拖放---（二）转

draggable是一个枚举属性,用于指定一个标签是否可以被拖拽.有以下四种取值: true 表示此元素可拖拽 false 表示此元素不可拖拽 auto 除img和带href的标签a标签表示可拖拽外,其它标签均表示不可拖拽其它任何值表示不可拖拽事件: [被拖拽元素] ondragstart 拖拽前触发(鼠标按下并开始拖拽) ondrag 拖拽过程中触发(连续出发,即使鼠标不移动也会连续触发) ondragend 拖拽结束触发 [目标元素] ondragent

js高级技巧---拖放

拖放:点击某个对象,并按住鼠标按钮不放,将鼠标移动到另一个区域,然后释放鼠标按钮将对象“放”在某处. 涉及到event的对象的属性: clientX,clientY:当事件被触发时鼠标指针相对于浏览器页面(或客户区)的坐标. screenX,screenY:当事件发生时鼠标指针相对于屏幕的坐标. offsetX,offsetY:当事件发生时鼠标指针相对于触发事件的元素内边界的坐标. x,y:当事件发生时鼠标指针相对于触发事件的元素外边界的坐标. 1.声明了一个对象DragDrop,该对象是一个单