HTML5 拖放(Drag 和 Drop)1

简介: HTML5拖放功能是标准的一部分,允许用户将任何元素从一个位置拖放到另一个位置。此功能在主流浏览器如IE、Firefox、Chrome和Safari中得到支持(注意Safari 5.1.2除外)。通过拖放,可以实现更直观的交互体验,例如将RUNOOB.COM图标拖入指定矩形框内。

HTML5 拖放(Drag 和 Drop)

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

将 RUNOOB.COM 图标拖动到矩形框中。
拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。

注意:Safari 5.1.2不支持拖动.
HTML5 拖放实例

下面的例子是一个简单的拖放实例:
实例
<!DOCTYPE HTML>










拖动 RUNOOB.COM 图片到矩形框中:









尝试一下 »

它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。

相关文章
element ui table 表格高度自适应
设置element ui table 表格高度自适应
2188 0
|
10天前
|
移动开发 HTML5
HTML5 拖放(Drag 和 Drop)2
为了实现元素的可拖放功能,首先需将元素的 `draggable` 属性设为 `true`。接着,使用 `ondragstart` 事件指定拖动开始时的动作,通过 `dataTransfer.setData()` 设置拖动数据的类型和值。`ondragover` 事件用于确定放置位置,并通过 `event.preventDefault()` 允许放置。最后,`ondrop` 事件触发时执行放置操作,使用 `dataTransfer.getData()` 获取拖动数据并将其追加到目标元素中。
|
19天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
3月前
|
移动开发 JavaScript API
HTML5 拖放详解
HTML5 的拖放功能增强了网页的互动性和用户友好性,允许用户通过拖动操作移动网页元素。其核心包括拖动源和放置目标,并提供了 `draggable` 属性及多个事件(如 `dragstart`、`dragover` 和 `drop`)来实现这一功能。示例代码展示了如何使用这些 API 创建一个简单的拖放组件,通过设置样式和监听事件来提升用户体验。在实际应用中,需注意样式提示和浏览器兼容性测试。
|
7月前
|
JavaScript 前端开发 搜索推荐
HTML拖放
HTML拖放
44 0
|
Web App开发 移动开发 前端开发
html5 h5 draggable的理解,及其实现拖拽功能
事件是由行为触发的,但是一个行为不止可以触发一个事件,可以触发多个事件
html5 h5 draggable的理解,及其实现拖拽功能
|
JavaScript 前端开发 Android开发
04.HTML5(拖放)
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { /*默认地,无法将数据/元素放置到其他元素中。
915 0
|
Web App开发 移动开发 JavaScript