关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
系列文章
关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(三) ----- FormData
关于前端上传文件全面基础扫盲贴(四) ----- FileReader
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)
H5拖拽事件(知识点主要来源于HTML 5 拖放)
其实打算出实战代码的，想想好像可以插多一个拖曳扫盲贴，在PC上传文件也经常能用到的，先来看看有关知识点。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。先看看兼容性如何
移动端全线飘红我可以理解的，毕竟不是主要应用交互，
首先，为了使元素可拖动，把 draggable 属性设置为 true ：<p draggable="true" >元素哦</p>。
里面的事件有
| 事件 | 描述 |
|---|---|
| ondragstart | 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 |
| ondragenter | 当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 |
| ondragover | 拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上（默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式 event.preventDefault() 方法。） |
| ondrop | 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 |
| ondragend | 当拖拽完成后触发的事件，此事件作用在被拖曳元素上 |
方法有
| 方法 | 作用 |
|---|---|
| setData | 设置被拖元素的数据类型和值 |
| getData | 返回在 setData() 方法中设置为相同类型的任何数据 |
实例：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1,
#div2 {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#drag {
width: 200px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="div1" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag" draggable="true"></div>
</div>
<div id="div2" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/>
<p id='text1'></p>
<p id='text2'></p>
<script type="text/javascript">
var text1 = document.querySelector('#text1'),
text2 = document.querySelector('#text2'),
drag = document.querySelector('#drag'),
div1 = document.querySelector('#div1'),
div2 = document.querySelector('#div2');
drag.ondragstart = function (ev) {
text1.innerHTML = '拖拽元素开始被拖拽';
text2.innerHTML = '';
ev
.dataTransfer
.setData("Text", ev.target.id);
};
drag.ondragend = function (ev) {
text1.innerHTML = '拖拽完成';
};
function allowDrop(ev) {
ev.preventDefault();
}
function dragenter(ev) {
text2.innerHTML = '拖曳元素进入目标元素';
}
function drop(ev) {
ev.preventDefault();
var data = ev
.dataTransfer
.getData("Text");
ev
.target
.appendChild(document.getElementById(data));
text2.innerHTML = '被拖拽的元素在目标元素上同时鼠标放开';
}
</script>
</body>
</html>就讲这么多了，接下来你们可以自己发挥想象做出好多好玩的东西了。
相关推荐
拼命工作好好玩 2020-08-03
swiftwwj 2020-07-21
云中舞步 2020-11-12
杨德龙 2020-11-11
JohnYork 2020-10-16
wangzhaotongalex 2020-09-22
xiaoseyihe 2020-11-16
不要皱眉 2020-10-14
Crazyshark 2020-11-13
K先生 2020-11-10
momode 2020-09-11
思君夜未眠 2020-09-04
点滴技术生活 2020-08-21
MaggieRose 2020-08-19
kevinweijc 2020-08-18
wintershii 2020-08-17
vapaad 2020-08-17
wera00 2020-08-17
移动开发与培训 2020-08-16