拖放(Drag 和 Drop)
它指的是您抓取某物并拖入不同的位置。 拖放是 HTML5 标准的组成部分:任何元素都是可拖放的
1.将元素设置成可拖放 (img 和 a 元素默认即是可拖放的)
例如:<div draggable="true"></div>
2.下面就是拖放相关的事件的介绍
源元素:
(1)ondrag: 元素被拖动时执行的事件,会执行多次。
(2)ondragstart: 元素被开始拖动的时候执行的事件,只会执行一次。
(3)ondragend: 在拖动操作结束时执行的事件,只会执行一次。
目标元素:
(4)ondragenter 当元素被拖动到目标区域时执行的事件。
(5)ondragleave 当元素离开目标区域时执行的事件。
(6)ondragover 当元素在目标区域上停留时执行的事件。
(7)ondrop: 当元素在目标区域上被释放时执行的事件,默认情况下该事件是不会被触发的(在默认情况下,无法将元素放置到其他元素中,若需设置允许放置,就必须对元素的默认方式进行处理,即需要在ondragover事件中阻止默认事件even.preventDefault(), 才能使ondrop事件执行)
3.关于对拖动元素的存储,可以借助于
(1)setData(format, data)方法,该方法设置被拖动元素的数据类型和值,
(2)对应的获取时getData(format)方法(数据类型例如text,text/html, text/plain,url等)
(3)clearData(有一个可选的参数即拖动操作的数据类型)该方法用于删除给定类型的拖动操作的数据,如果给定的数据类型不存在,则不执行任何操作,若不给定数据类型,则删除所有。
elem.ondragstart = function (e) {
e.dataTransfer.setData(拖动元素的数据类型,e.target.id)
}
elem.ondragover = function () {
return false // 阻止默认行为
}
elem.ondrop = function (e) {
let id = e.dataTransfer.getData(拖动元素的类型)
e.target.appendChild(document.getElementById(id))
}
4.实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 30px;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
display: inline-block;
position: relative;
box-sizing: border-box;
overflow: auto;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="box box1">
<img src="./img/1.jpeg" id="img1" alt="">
<img src="./img/2.jpeg" id="img2" alt="">
<img src="./img/3.jpeg" id="img3" alt="">
<img src="./img/4.jpeg" id="img4" alt="">
<img src="./img/5.jpeg" id="img5" alt="">
<img src="./img/6.jpeg" id="img6" alt="">
<img src="./img/7.jpeg" id="img7" alt="">
</div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
<script>
/*
利用事件委托处理多个可拖动的元素
*/
function $(name) {
return document.querySelector(name)
}
let mainBox = $(".main")
// 1.将元素设置成可拖放的
mainBox.ondragstart = function (e) {
// 获取拖动元素的信息 利用setData方法
e.dataTransfer.setData("Text", e.target.id)
}
mainBox.ondragover = function (e) {
e.preventDefault()
}
// 想要触发ondrop事件,需要在ondragover里面阻止默认行为
mainBox.ondrop = function (e) {
let elem = e.dataTransfer.getData('Text')
e.target.appendChild(document.getElementById(elem))
}
</script>
</body>
</html>