HTML5 拖放(Drag 和 Drop)2

简介: 为了实现元素的可拖放功能,首先需将元素的 `draggable` 属性设为 `true`。接着,使用 `ondragstart` 事件指定拖动开始时的动作,通过 `dataTransfer.setData()` 设置拖动数据的类型和值。`ondragover` 事件用于确定放置位置,并通过 `event.preventDefault()` 允许放置。最后,`ondrop` 事件触发时执行放置操作,使用 `dataTransfer.getData()` 获取拖动数据并将其追加到目标元素中。

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。
放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()

进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码解释:

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
相关文章
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 拖放(Drag 和 Drop)1
HTML5拖放功能是标准的一部分,允许用户将任何元素从一个位置拖放到另一个位置。此功能在主流浏览器如IE、Firefox、Chrome和Safari中得到支持(注意Safari 5.1.2除外)。通过拖放,可以实现更直观的交互体验,例如将RUNOOB.COM图标拖入指定矩形框内。
|
4月前
|
移动开发 JavaScript API
HTML5 拖放详解
HTML5 的拖放功能增强了网页的互动性和用户友好性,允许用户通过拖动操作移动网页元素。其核心包括拖动源和放置目标,并提供了 `draggable` 属性及多个事件(如 `dragstart`、`dragover` 和 `drop`)来实现这一功能。示例代码展示了如何使用这些 API 创建一个简单的拖放组件,通过设置样式和监听事件来提升用户体验。在实际应用中,需注意样式提示和浏览器兼容性测试。
|
8月前
|
JavaScript 前端开发 搜索推荐
HTML拖放
HTML拖放
58 0
|
8月前
|
移动开发 JavaScript 前端开发
HTML5作业(二)-----扑克牌拖放小游戏
该实验旨在理解元素拖放、CSS定位和DOM操作,任务是创建一个扑克牌拖放游戏。用户需将A框内13张随机扑克牌(背面朝上)按顺序拖至B框,最多存5张。当B框内形成顺子时游戏结束,显示拖动次数。实验提供HTML结构及部分JavaScript代码,包括创建和乱序扑克牌、处理拖放事件等。
155 0
|
8月前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
109 0
|
移动开发 定位技术 API
HTML5 —— 拖放、地理位置、视频和音频的基本使用
HTML5 —— 拖放、地理位置、视频和音频的基本使用
119 0
|
Web App开发 移动开发 JavaScript
|
16天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
87 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
81 7