HTML5 拖拽事件
图片自带拖拽功能
其他元素也通过设置 draggable=true属性 实现拖拽功能
<div id="right" draggable="true">垃圾（拖拽的元素）</div>
拖拽元素事件分为两类
- 被拖拽元素触发的事件
- 拖放目标元素触发的事件
被拖拽元素事件：
- ondragstart: 开始拖拽事件 - 开始点击鼠标事件
- ondrag：拖拽过程；拖拽前、拖拽结束之间，连续触发
- ondragend: 结束拖拽事件 - 释放鼠标事件
拖放目标元素事件：
- ondragenter: 进入目标元素触发，鼠标光标进入
-
ondragover：进入目标。离开目标之间，连续触发
【默认情况下，一个元素不能放另一个元素的上面，需要在ondragover事件里阻止默认事件】 - ondragleave: 离开目标元素触发
-
ondrop：在目标元素上释放鼠标触发
【默认情况下，一个元素不能放另一个元素的上面，需要在drop事件里阻止默认事件】
案例：模仿拖动文件至回收站的情景
开始：
image.png
结果：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#left{
float: left;
width: 200px;
height: 200px;
background: red;
position: absolute;
text-align: center;
line-height: 200px;
color: #fff;
cursor: move;
}
#right {
float: right;
width: 100px;
height: 100px;
background: green;
text-align: center;
line-height: 100px;
color: #fff;
cursor: move;
}
</style>
<body>
<div id="left">垃圾桶(目标元素)</div>
<div id="right" draggable="true">垃圾（拖拽的元素）</div>
<script>
window.onload = function () {
var left = document.getElementById('left');
var right = document.getElementById('right');
// 拖拽元素事件
right.ondragstart = function () { // ondragstart 开始拖拽事件 - 开始点击鼠标事件
this.innerHTML = '拖拽中...'
}
right.ondrag = function () { // ondrag 拖拽过程
console.log('nnn')
}
right.ondragend = function () { // ondragend 结束拖拽事件 - 释放鼠标事件
this.innerHTML = '垃圾（拖拽的元素）'
}
//目标元素事件
left.ondragenter = function () { // 进入目标元素触发，鼠标光标进入
this.innerHTML = '进入目标元素触发'
}
left.ondragover = function (e) { // 进入目标。离开目标之间，连续触发 【默认情况下，一个元素不能放另一个元素的上面，需要在ondragover事件里阻止默认事件】
var e = event || window.event
e.preventDefault();
console.log('进入目标。离开目标之间')
}
left.ondragleave = function () { // 离开目标元素触发
this.innerHTML = '离开目标元素触发';
}
left.ondrop = function (e) { // 在目标元素上释放鼠标触发 【默认情况下，一个元素不能放另一个元素的上面，需要在drop事件里阻止默认事件】
var e = event || window.event
document.body.removeChild(right)
e.preventDefault();
}
}
</script>
</body>
</html>
兼容火狐浏览器
数据交换：e.dataTransfer 属性setData、getData
案例：
image.png
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#left{
float: left;
width: 200px;
height: 200px;
background: red;
position: absolute;
text-align: center;
line-height: 200px;
color: #fff;
cursor: move;
}
#right {
float: right;
width: 100px;
height: 232px;
background: green;
text-align: center;
line-height: 100px;
color: #fff;
cursor: move;
}
#right p{
line-height: 30px;
border-bottom: 1px solid pink;
}
</style>
<body>
<div id="left">垃圾桶(目标元素)</div>
<div id="right">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<script>
window.onload = function () {
var left = document.getElementById('left');
var right = document.getElementById('right');
var ap = document.querySelectorAll('p');
for (var i=0; i < ap.length; i++) {
ap[i].draggable = true;
ap[i].index = i;
ap[i].ondragstart = function (event) { // 兼容火狐写法
var e = event || event.target;
console.log('e.dataTransfer', e.dataTransfer)
e.dataTransfer.setData('key',this.index)
}
}
left.ondragover = function (event) {
var e = event || event.target;
e.preventDefault();
}
left.ondrop = function (event) {
var e = event || event.target;
right.removeChild(ap[ e.dataTransfer.getData('key')])
}
}
</script>
</body>
</html>
模仿百度拖拽图片
image.png
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box {
width: 400px;
height: 200px;
background: pink;
line-height: 200px;
text-align: center;
margin: 100px auto;
}
li{
float: left;
border: 1px solid pink;
list-style: none;
}
</style>
<body>
<div id="box">把图片拖拽至此区域</div>
<ul id="list"></ul>
<script>
window.onload = function () {
var box = document.getElementById('box');
var list = document.getElementById('list');
box.ondragenter = function () {
this.innerHTML = '请释放你的鼠标';
}
box.ondragover = function (event) {
var e = event || event.target;
e.preventDefault();
}
box.ondragleave = function () {
this.innerHTML = '把图片拖拽至此区域';
}
box.ondrop = function (event) {
var e = event || event.target;
var file = e.dataTransfer.files;
var str = '';
for (var i=0; i< file.length; i++) {
// window.URL.createObjectURL在浏览器上预览本地图片或者视频
var url = window.URL.createObjectURL(file[i]);
str +='<li><img width="150" src="'+url+'" /></li>'
}
list.innerHTML +=str;
console.log(e.dataTransfer)
console.log(file)
e.preventDefault();
e.stopPropagation();
}
}
</script>
</body>
</html>
