H5API：文件拖放 draggable

最新推荐文章于 2023-06-12 09:44:47 发布

YYQingJs

最新推荐文章于 2023-06-12 09:44:47 发布

阅读量149

点赞数

文章标签： html 前端 html5 javascript

本文链接：https://blog.csdn.net/YYQingJs/article/details/125943339

版权

H5API：文件拖放

摘要由CSDN通过智能技术生成

1.draggable设置元素是否可拖放在标签内添加属性draggable = 'true'

2.event 全局内容保存 event.dataTransfer.setData(key标记,内容);

3.event 全局内容读取 event.dataTransfer.getData(key标记);

源对象事件：

1.ondragstart 源对象拖动开始=按下拖动

2.ondrag 源对象拖动过程中=被按住过程中持续触发

3.ondragend 源对象拖动结束=松开

目标对象事件：

1.ondragenter 目标对象被源对象拖着进入=拖动进入

2.ondragover 目标对象被源对象拖着停留在上方=拖动进入停留持续触发

3.ondragleave 目标对象被源对象拖着离开=拖动进入后离开

4.ondrop 目标对象被源对象拖着停留松开了鼠标=拖动进入松开鼠标


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖放</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 300px;
			border: 1px solid red;
			float: left;
			margin-left: 20px;
		}
		div#div2 {
			border-color: blue;
		}
		div#div3 {
			border-color: green;
		}
		p {
			background: pink;
			margin: 0px;