【drag】HTML5 drag API

1、将想要拖放的对象元素的draggable属性设置为true。另外，img元素和a元素必须指定href，默认允许拖放。

2、编写与拖放有关的事件处理代码。关于拖放存在如下表所示的几个事件：

事件	产生事件的元素	描述
dragstart	被拖放的元素	开始拖放操作
drag	被拖放的元素	施放过程中
dragenter	拖放过程中鼠标经过的元素	被拖放的元素开始进入本元素的范围内
dragover	拖放过程中鼠标经过的元素	被拖放的元素正在本元素内移动
dragleave	拖放过程中鼠标经过的元素	被拖放的元素离开本元素的范围
drop	拖放的目标元素	有其他元素被拖放到了本元素中
dragend	拖放的对象元素	拖放操作结束

3、dataTransfer对象

拖拽事件周期中会初始化一个DataTransfer对象，用于保存拖拽数据和交互信息。

clearData方法可以用来清除dataTransfer对象内数据。

setData方法在拖放开始时间向dataTransfer对象中存入数据，用types属性来指定数据。

getData方法在拖动结束时读取dataTransfer对象中的数据。

setDragImage方法制定拖拽元素跟随鼠标移动的图片，x、y分别是相对于鼠标的坐标。

4、流程

设置元素可以被拖动：draggable=‘true’

ondragstart里setData

ondragover里阻止默认事件 //prebentDefaule()

ondrop里，阻止默认事件，并getData，append到元素里

5、代码实现图片拖拽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1{border: 1px solid red;width: 500px;height: 300px;}.div2{border: 1px solid blue;width: 500px;height: 300px;}</style>
</head>
<body><!-- 3、ondragover里阻止默认事件 --><div class="div1" ondragover="dgover(event)" ondrop="_drop(event)"></div><div class="div2"><!-- 1、设置当前元素可以被拖动 --><!-- 2、设置ondragstart（设置在被拖放的元素中） --><img id="img1" src="./images/shu.png" draggable="true" ondragstart="dgstart(event)"/></div><script>function dgstart(event){//获取dataTransfer对象（将拖动的元素进行数据化便于传输）event.dataTransfer.setData('Text',event.target.id)}function dgover(event){//阻止浏览器对当前行为的默认事件执行event.preventDefault();}function _drop(event){//阻止默认事件event.preventDefault();const data = event.dataTransfer.getData('Text')//append到元素里 event.target指向当前divevent.target.appendChild(document.getElementById(data))}
</script>
</body>
</html>

【drag】HTML5 drag API相关推荐

【翻译】HTML5开发——轻量级JSON存储解决方案Lawnchair.js
[翻译]HTML5开发--轻量级JSON存储解决方案Lawnchair.js 参考文章: (1)[翻译]HTML5开发--轻量级JSON存储解决方案Lawnchair.js (2)https://ww ...
【Demo】HTML5 拍照上传
本文主要讲解手机浏览器如何拍照为什么会有这个需求最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...
【HTML】HTML5给网页音频带来的变化
[HTML]HTML5给网页音频带来的变化引言内容速递:看了本文您能了解到的知识! 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计 ...
【Python】使用CDS API下载ECMWF气候数据
[Python]使用CDS API下载ECMWF气候数据数据集简介最近需要气象数据算东西,找到EC的数据~ECMWF是欧洲中期天气预报中心,他们的ERA模型提供全球的气象再分析和预报数据,最新的数 ...
【C++】Windows控制台API基本使用(上)
目录前言一.控制台缓冲区大小一.获取缓冲区大小二.设置缓冲区大小三.更详细的结构体四.特性二.窗口大小一.获取窗口大小二.设置窗口大小三.光标位置一.获取光标位置二.设置光标位 ...
【NFC】Android NFC API Reference中英文
SkySeraph 博客园首页新随笔联系订阅管理随笔- 192 文章- 0 评论- 441 [NFC]Android NFC API Reference中英文 [NFC]Androi ...
【HTML】HTML5的介绍
[HTML]HTML5的介绍学习完python基础以后,我们来了解一下 html 的相关知识,有助于我们以后对于爬虫内容的学习理解. 制作我们第一个网页在我们进行正式学习之前,先来热热身,首先在桌 ...
【前端】HTML5+CSS3 CSS浮动（四)
文章目录 [前端]HTML5+CSS3 CSS浮动(四) 1.浮动的简介 2.浮动的特点 3.脱离文档流的特点 4.页面简单布局 5.实战小练习 [前端]HTML5+CSS3 CSS浮动(四) 1.浮 ...
【Day05】Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5？
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...

【drag】HTML5 drag API

【drag】HTML5 drag API相关推荐

最新文章

热门文章