<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
/*默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()*/
ev.preventDefault();
}
function drag(ev)
{
//这个text就向android中通过intent传递值时的键，通过这个键我们可以获取到value
//例如intent.putExtra("name","zhangsan");
ev.dataTransfer.setData("id",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。
//该方法将返回在 setData() 方法中设置为相同类型的任何数据。
var data=ev.dataTransfer.getData("id");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中：</p>
<!--ondragover 事件规定在何处放置被拖动的数据。-->
<!--当数据被放置时，会发生 drop 事件。-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<!--draggable="true"设置元素为可拖放-->
<!--ondragstart="drag(event)"规定当元素被拖动时，会发生什么 dataTransfer.setData() 方法设置被拖数据的数据类型和值：-->
<img id="drag1" src="asset/a.jpg" width="100" height="60" draggable="true" ondragstart="drag(event)" />
</body>
</html>
04.HTML5(拖放)
2018-03-20
914
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { /*默认地，无法将数据/元素放置到其他元素中。
目录
相关文章
|
2月前
|
移动开发
JavaScript
API
HTML5 拖放详解
HTML5 的拖放功能增强了网页的互动性和用户友好性，允许用户通过拖动操作移动网页元素。其核心包括拖动源和放置目标，并提供了 `draggable` 属性及多个事件（如 `dragstart`、`dragover` 和 `drop`）来实现这一功能。示例代码展示了如何使用这些 API 创建一个简单的拖放组件，通过设置样式和监听事件来提升用户体验。在实际应用中，需注意样式提示和浏览器兼容性测试。
56
1
1
|
6月前
|
JavaScript
前端开发
搜索推荐
|
6月前
|
移动开发
JavaScript
前端开发
HTML5作业(二)-----扑克牌拖放小游戏
该实验旨在理解元素拖放、CSS定位和DOM操作，任务是创建一个扑克牌拖放游戏。用户需将A框内13张随机扑克牌（背面朝上）按顺序拖至B框，最多存5张。当B框内形成顺子时游戏结束，显示拖动次数。实验提供HTML结构及部分JavaScript代码，包括创建和乱序扑克牌、处理拖放事件等。
124
0
0
|
6月前
|
移动开发
API
UED
【专栏：HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计，使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者，可创建图片排序、手势识别等交互功能，但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具，能提升用户体验，推动网页交互设计创新。
82
0
0
|
移动开发
定位技术
API
|
移动开发
HTML5
|
移动开发
JavaScript
前端开发
HTML的笔记及展示（1）（锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API）
HTML的笔记及展示（1）（锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API）
146
0
0
|
移动开发
API
HTML5
|
Web App开发
移动开发
JavaScript
|
Web App开发
移动开发
iOS开发
热门文章
最新文章
1
weex-html5 组件进阶
2
jquery插件整理篇（六）HTML编辑器插件
3
HTML学习4----表单控件
4
html5 开发android
5
六个好看实用的html简单登录页面源码
6
过滤代码中的html标签
7
HTML DOM 教程Part1
8
HTML6 无 JavaScript 的单页应用引起一片哗然
9
使用shell抽取html数据之二
10
HTML元素 属性 格式化标签
1
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
125
2
Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
76
3
【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
529
4
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
148
5
动态粒子发射404网站HTML源码
55
6
【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5
301
7
HTML 【实用教程】（2024最新版）
42
8
HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
243
9
HTML【详解】超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
148
10
「Python大数据」词频数据渲染词云图导出HTML
78