html 08-HTML5詳解（二）
阿新 • • 發佈：2020-12-15
08-HTML5詳解（二）
#本文主要內容
-
拖拽
-
歷史
-
地理位置
-
全屏
#拖拽
如上圖所示，我們可以拖拽部落格園網站裡的圖片和超連結。
在HTML5的規範中，我們可以通過為元素增加draggable="true"來設定此元素是否可以進行拖拽操作，其中圖片、連結預設是開啟拖拽的。
#1、拖拽元素
頁面中設定了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>
效果如下：
上圖中，我們給 box1 增加了draggable="true"屬性之後，發現 box1 是可以拖拽的。但是拖拽之後要做什麼事情呢？這就涉及到事件監聽。
拖拽元素的事件監聽：（應用於拖拽元素）
-
ondragstart當拖拽開始時呼叫 -
ondragleave當滑鼠離開拖拽元素時呼叫 -
ondragend當拖拽結束時呼叫 -
ondrag整個拖拽過程都會呼叫
程式碼演示：
<!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');
// 繫結拖拽事件
// 拖拽開始
box.ondragstart = function () {
console.log('拖拽開始.');
}
// 拖拽離開：滑鼠拖拽時離開被拖拽的元素時觸發
box.ondragleave = function () {
console.log('拖拽離開..');
}
// 拖拽結束
box.ondragend = function () {
console.log('拖拽結束...');
console.log("---------------");
}
box.ondrag = function () {
console.log('拖拽');
}
</script>
</body>
</html>
效果如下：
列印結果：
#2、目標元素
比如說，你想把元素A拖拽到元素B裡，那麼元素B就是目標元素。
頁面中任何一個元素都可以成為目標元素。
目標元素的事件監聽：（應用於目標元素）
-
ondragenter當拖拽元素進入時呼叫 -
ondragover當拖拽元素停留在目標元素上時，就會連續一直觸發（不管拖拽元素此時是移動還是不動的狀態） -
ondrop當在目標元素上鬆開滑鼠時呼叫 -
ondragleave當滑鼠離開目標元素時呼叫
程式碼演示：
<!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');
//目標元素的拖拽事件
// 當被拖拽元素進入時觸發
two.ondragenter = function () {
console.log("來了.");
}
// 當被拖拽元素離開時觸發
two.ondragleave = function () {
console.log("走了..");
}
// 當拖拽元素在 目標元素上時，連續觸發
two.ondragover = function (e) {
//阻止拖拽事件的預設行為
e.preventDefault(); //【重要】一定要加這一行程式碼，否則，後面的方法 ondrop() 無法觸發。
console.log("over...");
}
// 當在目標元素上鬆開滑鼠是觸發
two.ondrop = function () {
console.log("鬆開滑鼠了....");
}
</script>
</body>
</html>
效果演示：
注意，上方程式碼中，我們加了event.preventDefault()這個方法。如果沒有這個方法，後面ondrop()方法無法觸發。如下圖所示：
如上圖所示，連游標的形狀都提示我們，無法在目標元素裡繼續操作了。
總結：如果想讓拖拽元素在目標元素裡做點事情，就必須要在ondragover()里加event.preventDefault()這一行程式碼。
案例：拖拽練習
完整版程式碼：
<!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>