拖曳操作需要借助于鼠标来实现,如文件或图片的移动操作等。在开发中,我们经常使用原生的JavaScript来实现拖曳效果,实现起来比较复杂。因此,HTML5为我们提供了更好用的接口或者事件,在很大程度上简化了页面中拖曳交互的实现难度。
图片和链接默认是可以拖动的,它们不用添加draggable属性。
一个完整的拖曳效果由拖曳(Drag)和释放(Drop)组成的。
在拖曳操作中,被拖动的元素称之为源对象,它指的是页面中设置了draggable="true"属性的元素;
源对象进入的元素称之为目标元素,目标元素可以是页面中的任一元素
拖曳元素的事件
事件 | 事件描述 |
---|---|
ondragstart | 当拖曳开始时触发 |
ondrag | 作用于整个拖曳过程,ondrag事件表示在拖曳元素被拖动过程中会触发的事件。此时,鼠标可能在移动也可能未移动。 |
ondragend | 当拖曳结束时触发 |
目标元素相关的事件
事件 | 事件描述 |
---|---|
ondragenter | 当源对象进入目标元素时触发 |
ondragover | 当源对象悬停在目标元素上方时触发 |
ondragleave | 当源对象离开目标元素时触发 |
ondrop | 当源对象在目标元素上方释放鼠标时触发 |
只有当源对象上的鼠标点进入目标元素时,才会触发ondragenter事件。
默认情况下,浏览器会默认阻止ondrop事件,如果想要触发该事件,则需要在ondragover事件中使用“return false;”
(或者e.preventDefault())来阻止其默认行为
拽托实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
}
div:nth-child(2) {
border: 1px solid green;
}
div:nth-child(3) {
border: 1px solid blue;
}
p {
height: 25px;
background-color: pink;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1" draggable="true">拖曳内容1</p>
<p id="p2" draggable="true">拖曳内容2</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>
// 当拖曳开始时触发
document.ondragstart = function (event) {
console.log('源对象开始被拖动');
console.log(event.target.id);
event.dataTransfer.setData('text/html', event.target.id); // 传递id值
};
// 当拖曳结束时触发
document.ondragend = function (event) {
console.log('源对象被拖动结束');
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
}
div:nth-child(2) {
border: 1px solid green;
}
div:nth-child(3) {
border: 1px solid blue;
}
p {
height: 25px;
background-color: pink;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1" draggable="true">拖曳内容1</p>
<p id="p2" draggable="true">拖曳内容2</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>
// 当拖曳开始时触发
document.ondragstart = function (event) {
console.log('源对象开始被拖动');
console.log(event.target.id);
event.dataTransfer.setData('text/html', event.target.id); // 传递id值
};
// 当拖曳结束时触发
document.ondragend = function (event) {
console.log('源对象被拖动结束');
};
// 当源对象进入目标元素时
document.ondragenter = function (event) {
console.log('目标对象被源对象拖动着进入');
console.log(event.target);
};
// 当源对象悬停在目标元素上方时触发
document.ondragover = function (event) {
console.log('源对象悬停在目标元素上方');
return false;
};
// 当源对象在目标元素上方释放鼠标时
document.ondrop = function (event) {
console.log('上方释放/松手');
var id = event.dataTransfer.getData('text/html');
event.target.appendChild(document.getElementById(id));
};
</script>
</body>
</html>