image
如上圖所示，我們可以拖拽博客園網(wǎng)站里的圖片和超鏈接展懈。
在HTML5的規(guī)范中，我們可以通過(guò)為元素增加 draggable="true" 來(lái)設(shè)置此元素是否可以進(jìn)行拖拽操作供璧，其中圖片存崖、鏈接默認(rèn)是開(kāi)啟拖拽的。
1睡毒、拖拽元素
頁(yè)面中設(shè)置了 draggable="true" 屬性的元素来惧。
舉例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.box1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<!--給 box1 增加拖拽的屬性-->
<div class="box1" draggable="true"></div>
</body>
</html>
效果如下：
image
上圖中，我們給 box1 增加了draggable="true" 屬性之后演顾，發(fā)現(xiàn) box1 是可以拖拽的供搀。但是拖拽之后要做什么事情呢？這就涉及到事件監(jiān)聽(tīng)钠至。
拖拽元素的事件監(jiān)聽(tīng)：（應(yīng)用于拖拽元素）
-
ondragstart當(dāng)拖拽開(kāi)始時(shí)調(diào)用 -
ondragleave當(dāng)鼠標(biāo)離開(kāi)拖拽元素時(shí)調(diào)用 -
ondragend當(dāng)拖拽結(jié)束時(shí)調(diào)用 -
ondrag整個(gè)拖拽過(guò)程都會(huì)調(diào)用
代碼演示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<script>
var box = document.querySelector('.box');
// 綁定拖拽事件
// 拖拽開(kāi)始
box.ondragstart = function () {
console.log('拖拽開(kāi)始.');
}
// 拖拽離開(kāi)：鼠標(biāo)拖拽時(shí)離開(kāi)被拖拽的元素時(shí)觸發(fā)
box.ondragleave = function () {
console.log('拖拽離開(kāi)..');
}
// 拖拽結(jié)束
box.ondragend = function () {
console.log('拖拽結(jié)束...');
console.log("---------------");
}
box.ondrag = function () {
console.log('拖拽');
}
</script>
</body>
</html>
效果如下：
image
打印結(jié)果：
image.png
2葛虐、目標(biāo)元素
比如說(shuō)，你想把元素A拖拽到元素B里棉钧，那么元素B就是目標(biāo)元素屿脐。
頁(yè)面中任何一個(gè)元素都可以成為目標(biāo)元素。
目標(biāo)元素的事件監(jiān)聽(tīng)：（應(yīng)用于目標(biāo)元素）
-
ondragenter當(dāng)拖拽元素進(jìn)入時(shí)調(diào)用 -
ondragover當(dāng)拖拽元素停留在目標(biāo)元素上時(shí)，就會(huì)連續(xù)一直觸發(fā)（不管拖拽元素此時(shí)是移動(dòng)還是不動(dòng)的狀態(tài)） -
ondrop當(dāng)在目標(biāo)元素上松開(kāi)鼠標(biāo)時(shí)調(diào)用 -
ondragleave當(dāng)鼠標(biāo)離開(kāi)目標(biāo)元素時(shí)調(diào)用
代碼演示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: green;
}
.two {
position: relative;
width: 200px;
height: 200px;
left: 300px;
top: 100px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div class="one" draggable="true"></div>
<div class="two"></div>
<script>
var two = document.querySelector('.two');
//目標(biāo)元素的拖拽事件
// 當(dāng)被拖拽元素進(jìn)入時(shí)觸發(fā)
two.ondragenter = function () {
console.log("來(lái)了.");
}
// 當(dāng)被拖拽元素離開(kāi)時(shí)觸發(fā)
two.ondragleave = function () {
console.log("走了..");
}
// 當(dāng)拖拽元素在 目標(biāo)元素上時(shí)的诵，連續(xù)觸發(fā)
two.ondragover = function (e) {
//阻止拖拽事件的默認(rèn)行為
e.preventDefault(); //【重要】一定要加這一行代碼万栅，否則，后面的方法 ondrop() 無(wú)法觸發(fā)西疤。
console.log("over...");
}
// 當(dāng)在目標(biāo)元素上松開(kāi)鼠標(biāo)是觸發(fā)
two.ondrop = function () {
console.log("松開(kāi)鼠標(biāo)了....");
}
</script>
</body>
</html>
效果演示：
image
注意烦粒，上方代碼中，我們加了event.preventDefault()這個(gè)方法代赁。如果沒(méi)有這個(gè)方法扰她，后面ondrop()方法無(wú)法觸發(fā)。如下圖所示：
image
如上圖所示管跺，連光標(biāo)的形狀都提示我們义黎，無(wú)法在目標(biāo)元素里繼續(xù)操作了。
總結(jié)：如果想讓拖拽元素在目標(biāo)元素里做點(diǎn)事情豁跑，就必須要在 ondragover() 里加event.preventDefault()這一行代碼廉涕。
案例：拖拽練習(xí)
完整版代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.one > div, .two > div {
width: 98px;
height: 98px;
border: 1px solid #000;
border-radius: 50%;
background-color: red;
float: left;
text-align: center;
line-height: 98px;
}
.two {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
left: 600px;
top: 200px;
}
</style>
</head>
<body>
<div class="one">
<div draggable="true">1</div>
<div draggable="true">2</div>
<div draggable="true">3</div>
<div draggable="true">4</div>
<div draggable="true">5</div>
<div draggable="true">6</div>
<div draggable="true">7</div>
<div draggable="true">8</div>
</div>
<div class="two"></div>
<script>
var boxs = document.querySelectorAll('.one div');
// 臨時(shí)的盒子 用于存放當(dāng)前拖拽的元素
var two = document.querySelector('.two');
var temp = null;
// 給8個(gè)小盒子分別綁定拖拽事件
for (var i = 0; i < boxs.length; i++) {
boxs[i].ondragstart = function () {
// 保持當(dāng)前拖拽的元素
temp = this;
console.log(temp);
}
boxs[i].ondragend = function () {
// 當(dāng)拖拽結(jié)束 ，清空temp
temp = null;
console.log(temp);
}
}
// 目標(biāo)元素的拖拽事件
two.ondragover = function (e) {
// 阻止拖拽的默認(rèn)行為
e.preventDefault();
}
// 當(dāng)在目標(biāo)元素上松開(kāi)鼠標(biāo)是觸發(fā)
two.ondrop = function () {
// 將拖拽的元素追加到 two里面來(lái)
this.appendChild(temp);
}
</script>
</body>
</html>
效果如下：
image
