HTML5 study notes DAY1

HTML5 new elements

4. HTML5 Drag and Drop (Drag and Drop)

Drag and drop is a common feature where an object is grabbed and then dragged to another location.

The learning of drag and drop (Drag and Drop) is through an example, and each part of the usage of Drag and Drop and its related properties is analyzed in detail. We can study different parts of the drag and drop event separately. Examples are as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>rookie tutorial(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<p>drag RUNOOB.COM picture into rectangle:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
 
</body>
</html>

1. Make the element draggable

To make the element draggable, set the draggable property to true :

<img draggable="true">

2. What to drag - ondragstart and setData()

The ondragstart property calls a function, drag(event), which specifies the data being dragged. dataTransfer.setData()
The method sets the data type and value of the dragged data: Text is a DOMString representing the type of drag data to add to the drag object.
The value is the id of the draggable element ("drag1").

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

3. Where to put it - ondragover

The ondragover event specifies where to place the dragged data.

By default, data/elements cannot be placed into other elements. If we need to set allow placement, we must prevent the default handling of elements.

This is done by calling the event.preventDefault() method of the ondragover event:

event.preventDefault()

4. Make a drop - ondrop

The drop event occurs when the dragged data is dropped. In the above example, the ondrop attribute calls a function, drop(event):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

code explanation

  1. Call preventDefault() to avoid the browser's default handling of the data (the default behavior of the drop event is to open as a link)
  2. Get the dragged data through the dataTransfer.getData("Text") method. The method will return in setData()
    Any data set to the same type in the method.
  3. The dragged data is the id of the dragged element ("drag1") appends the dragged element to the drop element (target element)

5. Geolocation

The HTML5 Geolocation API is used to get the user's geographic location.

Given that this feature may violate user privacy, user location information is not available unless the user agrees.

1. Get the user's location.

Get the user's position using the getCurrentPosition() method

The following example is a simple geolocation instance that returns the longitude and latitude of the user's location:

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="This browser does not support obtaining geographic location.";
    }
}
 
function showPosition(position)
{
    x.innerHTML="latitude: " + position.coords.latitude + 
    "<br>longitude: " + position.coords.longitude;    
}

Example analysis:

Check if geolocation is supported
If supported, run the getCurrentPosition() method. If not supported, display a message to the user.
If getCurrentPosition() runs successfully, returns a coordinates object to the function specified in the parameter showPosition
The showPosition() function gets and displays the longitude and latitude
The above example is a very basic geolocation script without error handling.

2. Handling errors and rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run when getting the user's location fails:

function showError(error)
{
    switch(error.code) 
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="The user denied the request to get the geographic location."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="Location information is not available."
            break;
        case error.TIMEOUT:
            x.innerHTML="Requesting user geolocation timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="unknown mistake."
            break;
    }
}

error code:

Permission denied - user is not allowed to geolocate
Position unavailable - Unable to get current position
Timeout - the operation timed out

3. Display the results in a map

Requires access to a map service that uses latitude and longitude

function showPosition(position)
{
    var latlon=position.coords.latitude+","+position.coords.longitude;
 
    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

4. Information for a given location

Geolocation information for a given location can be used to:
①Update local information
② Display the points of interest around the user
③Interactive car navigation system (GPS)

5.getCurrentPosition() method - return data

If successful, the getCurrentPosition() method returns the object. always returns latitude, longitude, and accuracy
Attributes. If available, the other properties below are returned.


6. Other

watchPosition() - Returns the user's current position and continues to return updated positions as the user moves.
clearWatch() - stops the watchPosition() method

Tags: html5

Posted by edawg on Thu, 19 May 2022 04:34:04 +0300