1, Drag
1) Set the element to drag and drop:
First, to make the element draggable, set the draggable attribute to true: <img draggable= "true" >
2) What to drag - ondragstart and setData():
Then, specify what happens when the element is dragged.
In the above example, the ondragstart attribute calls a function, drag(ev), which specifies the dragged data.
The dataTransfershtDatal method sets the data type and value of the dragged data:
function drag(ev){
ev. dataTransfer . setData("Text" , ev. target. id);
}Text is a DOMString indicating the type of drag data to be added to the drag object. The value is the ID of the draggable element ("drag1").
3) . element function:
ondragstart: this event indicates the start of drag and drop
ondragover: this event indicates the end of drag and drop
ondrag: this event indicates the drag and drop process
draggable: when the value is true, it means that the element can be dragged, and the default is false, which means that it cannot be dragged
4) . cases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 200px;
border: 1px solid red;
height: 250px;
}
#result1 {
width: 200px;
border: 1px solid red;
height: 250px;
}
</style>
</head>
<body>
<p> please drag the following picture into the box</p>
<!--
ondragstart: this event indicates the start of drag and drop
ondragover: this event indicates the end of drag and drop
ondrag: this event indicates the drag and drop process
-->
<div id="result1" οndragοver="allowDrag(event)" οndrοp="drop(event)"></div>
<div id="result" οndragοver="allowDrag(event)" οndrοp="drop(event)"></div>
<!-- Draggable: when the value is true, it means that the element can be dragged, and the default is false, which means that it cannot be dragged -- >
<img src="img/flower.jpg" alt="" id="img" draggable="true" οndragstart="drag(event)">
<script type="text/javascript">
/ / function drag for rescue has started
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
/ / drag process
function drop(ev) {
/ / allow other elements to be dragged and dropped here
ev.preventDefault();
/ / get the element id to drag and drop
var id = ev.dataTransfer.getData("Text");
/ / to add a tag to another tag, you can use appendChild();
ev.target.appendChild(document.getElementById(id));
}
/ / drag ends
function allowDrag(ev) {
/ / allow other elements to be dragged and dropped here
ev.preventDefault();
}
</script>
</body>
</html
2, Web storage
1) Introduction:
With the rapid development of the Internet, web-based applications are becoming more and more common, but also become more and more complex. In order to meet the increasingly updated needs, data will be stored on local devices frequently, such as recording historical activity information. The traditional way is to use document Cookies are stored, but because the storage space is only about 4KB and complex operations are required to parse, it brings a lot of inconvenience to the sender. Therefore, HTML5 specification proposes a local storage solution.
Two important APIs are defined in the local storage solution of HTML 5: Web Storage and local database Web SQL Database This chapter will focus on the basic usage of Web Storage.
window.localStorage object local storage
Web Storage API
Two key objects
window. sessionStorage object area storage
● localStorage - used to save the data of the whole website for a long time. The saved data has no expiration time until it is manually removed.
● sessionStorage - used to temporarily save the data of the same window (or tab), which will be deleted after closing the window or tab.
2) Features of Web Storage:
● it is convenient to set and read data
● you can only store strings. If you want to store JSON objects, you can use window JSON's stringify() method and parse() method to sequence
● you can only store strings. If you want to store JSON objects, you can use window JSON's stringify() method and parse() method are used for serialization and deserialization.
3) Case 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=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
if (typeof(Storage) != "undefined") {
document.write("Your browser supports webStoragr");
} else {
document.write("Your browser does not support webstorage")
}
</script>
</body>
</html>Effect 1:
4) Case 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="result"></div>
<script type="text/javascript">
if (typeof(Storage) != "undefined") {
// document.write("your browser supports webStorage");
// Save a key value pair to the browser
// The first way:
localStorage.setItem("stuname", "Shaowenxiao");
// The second way:
localStorage.stuid = "220701";
// Get locally stored values from the browser
document.getElementById("result").innerHTML = localStorage.getItem("stuname") + "Student number:" + localStorage.stuid;
} else {
// document.write("your browser does not support webstorage");
document.getElementById("result").innerHTML = "Your browser does not support webstorage";
}
</script>
</body>
</html>Effect 2:
3, Master the use of localStorage
The data stored by the localStorage object has no time limit. After the second day, the second week or the next year, the data is still available.
Both localStorage and sessionStorage can use the same API. Some methods and properties are provided in the Storage interface,
| Methods & Properties | describe |
| setltem(key,value) | This method takes one by one key name and value as parameters, and will add the key value pair to the storage. If the key name exists, its corresponding value will be updated |
| getltem(key) | This method receives a key name as a parameter and returns the value corresponding to the key name |
| romoveltem(key) | This method receives a key name as a parameter and deletes the key name from the storage |
| length | Similar to the length attribute of an array, it is used to access the number of item s in the Storage object. |
| key(n) | Name used to access the n th key |
| clear() | Clear all localSotrage contents under the current domain |
Case elimination
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="click+1" onclick="clickCout()">
<input type="button" value="click-1" onclick="clickCout2()">
<div id="result"></div>
<script type="text/javascript">
function clickCout() {
if (localStorage.click_num) {
localStorage.click_num = parseInt(localStorage.click_num) + 1
} else {
localStorage.click_num = 1;
}
document.getElementById("result").innerHTML = localStorage.click_num;
}
function clickCout2() {
if (localStorage.click_num) {
localStorage.click_num = parseInt(localStorage.click_num) - 1
} else {
localStorage.click_num = 1;
}
document.getElementById("result").innerHTML = localStorage.click_num;
}
</script>
</body>
</html>Examples of all localSotrage content under the current domain
4, Website Lister
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#siteName {
margin-top: 10px;
margin-bottom: 5px;
}
.add {
background-color: green;
width: 100px;
height: 30px;
border-radius: 10px;
color: white;
font-weight: 600;
border: none;
margin-top: 10px;
}
#tab table {
border: 1px solid black;
border-collapse: collapse;
}
#tab table tr th {
background-color: green;
}
#tab table tr td {
border: 1px solid black;
}
.search {
width: 100px;
height: 30px;
background-color: red;
color: white;
font-weight: 600;
border: none;
margin-top: 10px;
}
#result {
width: 300px;
height: 100px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="div1">
<p>
<span>Website name(key):</span>
<input type="text" id="siteName" placeholder="Please enter the website name"><br>
<span>website(value):</span>
<input type="text" id="siteValue" placeholder="Please enter the corresponding web address"><br>
<input type="button" class="add" value="add to" onclick="add()">
</p>
<div id="tab"></div>
<hr>
<p>
<span>Website name(key): </span>
<input type="text" id="key" placeholder="Please enter the website name"><br>
<input type="button" class="search" value="query" onclick="search()">
<div id="result">Search results display</div>
</p>
</div>
<script type="text/javascript">
window.onload = loadAll();
// add to
function add() {
//Get the website name and URL entered in the form
var wm = document.getElementById("siteName").value;
var wz = document.getElementById("siteValue").value;
localStorage.setItem(wm, wz);
alert("Successfully added!");
}
// query
function search() {
var wm = document.getElementById("key").value;
document.getElementById("result").innerHTML = "Website name" + wm + "<br>website:" + localStorage.getItem(wm);
}
// Load out table
function loadAll() {
var result = "<table>";
result += "<tr><th>Website name(key)</th><th>website(value)</th></tr>";
// Use the loop to get each item
for (var i = 0; i < localStorage.length; i++) {
var s = localStorage.key(i) + " " + localStorage.getItem(localStorage.key(i));
// alert(s);
var key = localStorage.key(i);
var value = localStorage.getItem(key);
result += "<tr><td style='text-align:center;'>" + key + " </td><td>" + value + "</td></tr>"
}
result += "</table>";
document.getElementById("tab").innerHTML = result;
}
</script>
</body>
</html>design sketch:
