html-Drag and drop

html-Drag (draggable= "true")
Drag and Drop 7 events:
> Drag block. ondragstart=function () {Console.log ("Drag to Start");}

> Drag block. ondrag=function () {Console.log ("dragging");}

> Drag block. ondragend=function () {Console.log ("drag End");}

> Delivery area. ondragenter=function () {Console.log ("Enter the Zone");

> Delivery area. ondragover=function () {console.log ("Drop zone movement");
Prevent default events from occurring
E.preventdefault ();
}
> Delivery area. ondragleave=function () {Console.log ("Leave the Zone");

> Delivery area. ondrop=function () {console.log ("delivery area");}

(The following 3 are prone to conflict, to block some of the default events.) To OnDrop function, need to ondragover also run up.
To set block event bubbling in order not to overlap events in 2 regions


Use JS to do drag and drop:
>1. To drag the need to constantly get coordinates, all need absolute positioning, with position:absolute;
2. CSS in front of the body. JS in the body after
3. Anonymous functions

> (function Fun () {
Console.log ("Perform anonymous functions, be sure to enclose the function in parentheses");
}())



# # #地理定位
> (navigator.geolocation.getCurrentPosition (showposition-> Pass in function, name own fetch);)
function Showposition (position-> passed in) {
Document.body.innerHTML + = "Longitude" +position.coords.longitude+ "\ n" + "latitude" +position.coords.latitude
｝


# # #web存储

-The HTTP protocol is unable to save the state.
-the browser request response model, regardless of what operation on the computer is to be submitted to the server, the server returns information to the computer.
-Stateless: After the request response will be disconnected, it is equivalent to never connected, next time will be considered a new connection, need to reconnect (so unable to save account what).
-In order to save the state, there is a cookie. is one way to maintain state between the browser and the server
-Cookie function: Used to save the information returned by the server, in order to maintain the login status + website
Data tracking for customers (consumption habits, browsing habits ...) ）。 The next time you access the server, the server will be able to read the login information inside, you will know the previous login.
-Cookie limit: The maximum size of each cookie file is 4KB (4000 English or 2000
Chinese), so can only save the user name and so on, the article can not be saved.

-Cookie Usage:
document.cookie;//through this to get cookie information
function Setcookie () {///event: Create Cookie,setcookie
var date = new Date ();
Date.setdate (Date.getdate () +30);
Document.cookie = "name=abc&age=12;expires=" +date.toutcstring (); The new cookie is named ABC, set the expiration time, and the default expiration time is after closing the browser
Document.cookie = "Sex=male";
}
function GetCookie () {///event: Get Cookie,getcookie
Console.log (Document.cookie);//display cookie information on the console
}

-Sessionstorage: There is only one session of the time (open browser--close browser)
Every time a user accesses a server, the server creates a session object for each user, generates a SessionID, and then sessionid the cookie.
There are times when there is no operation, the server will delete the SessionID
Use: Create Getsessionstorage.name= ""//Create (set) and get (get) all the same as cookies, just replace the name of the following type
function Setsessionstorage () {
Window.sessionstorage.name= "Zhang San";//Name created.
}
-Localstorage: There is no time limit and no size limit. Store the information unless it is deleted, otherwise the browser will be consistent.
Use: Create Getlocalstorage.name= ""//Create (set) and get (get) all the same as cookies, just replace the name of the following type
function Setlocalstorage () {
Window.localstorage.name= "Zhang San";//Name created.
}

-Cookies, Sessionstorage (Session, new tab not shared),
Localstorage (the entire browser share) is saved in the browser, not the browser.
-SQL

# #字符串和json对象互相转换
>json uses JavaScript syntax to describe data objects, but JSON is still independent of language and platform. The JSON parser and the JSON library support many different programming languages.


-Stringify:json to String


-Parse: String goto JSON


-function Getlocalstorage () {
var user = Json.parse (window.localStorage.user);
Console.log (User.Name);
}

With our editor, you can edit JavaScript code online, and then click a button to see the results:

> > <body>
> >
> <p>
> Name: <span id= "Jname" ></span><br/>
> Age: <span id= "Jage" ></span><br/>
> Address: <span id= "Jstreet" ></span><br/>
> Phone: <span id= "Jphone" ></span><br/>
> </p>
>
> <script type= "Text/javascript" >
> var jsonobject= {
> "name": "Bill Gates",
> "Street": "Fifth Avenue New York 666",
> "Age": 56,
> "Phone": "555 1234567"};
> document.getElementById ("Jname"). Innerhtml=jsonobject.name
> document.getElementById ("Jage"). Innerhtml=jsonobject.age
> document.getElementById ("Jstreet"). Innerhtml=jsonobject.street
> document.getElementById ("Jphone"). Innerhtml=jsonobject.phone
> </script>
>
> </body>
>
Shown as:
> Creating JSON objects in JavaScript
>
> Name:bill Gates
>
> age:56
>
> address:fifth Avenue New York 666
>
> phone:555 1234567



# # #2个div水平放
Directly is
CSS style:
div{
Float:left;
}
<body>
<div>1<\div>
<div>2<\div>
<\body>

Margin, padding, font, try to set up with one property
With the same calculation method can be encapsulated

html-Drag and drop