| Latest revision |
Your text |
| Line 263: |
Line 263: |
| | *1. The '''geodetic''' way to describe position refers directly to '''latitude''' and '''longitude.''' | | *1. The '''geodetic''' way to describe position refers directly to '''latitude''' and '''longitude.''' |
| | *2. The '''civic''' representation of location data is presented in a format that is more easily read and understood(usual address). | | *2. The '''civic''' representation of location data is presented in a format that is more easily read and understood(usual address). |
| | + | |
| | + | Example: |
| | + | <table border="1"> |
| | + | <tr> |
| | + | <td><b>Atribute</b></td> |
| | + | <td><b>Geodetic</b></td> |
| | + | <td><b>Civic</b></td> |
| | + | </tr> |
| | + | |
| | + | <tr> |
| | + | <td>Position</td> |
| | + | <td>57.4,16.3</td> |
| | + | <td>London</td> |
| | + | </tr> |
| | | | |
| | The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned. | | The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned. |
| − |
| |
| − | ==Drag&Drop API==
| |
| − | ===Making Elements Draggable===
| |
| − | The drag and drop feature lets you "grab" an object and drag it to a different location.
| |
| − | To make an element draggable, just set the draggable attribute to true: <code><img draggable="true" /></code>
| |
| − |
| |
| − | Example:
| |
| − |
| |
| − | <pre>
| |
| − | <!DOCTYPE HTML>
| |
| − | <html>
| |
| − | <head>
| |
| − | <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>
| |
| − |
| |
| − | <div id="box" ondrop="drop(event)"
| |
| − | ondragover="allowDrop(event)"
| |
| − | style="border:1px solid black;
| |
| − | width:200px; height:200px"></div>
| |
| − |
| |
| − | <img id="image" src="sample.jpg" draggable="true"
| |
| − | ondragstart="drag(event)" width="150" height="50" alt="" />
| |
| − |
| |
| − | </body>
| |
| − | </html></pre>
| |
| − |
| |
| − | '''What to Drag'''
| |
| − |
| |
| − | When the element is dragged, the ondragstart attribute calls a function, '''drag(event)''', which specifies what data is to be dragged.
| |
| − | The '''dataTransfer.setData()''' method sets the data type and the value of the dragged data:
| |
| − |
| |
| − | <pre>function drag(ev) {
| |
| − | ev.dataTransfer.setData("text", ev.target.id);
| |
| − | }
| |
| − | </pre>
| |
| − |
| |
| − | In our example, the data type is "text" and the value is the ID of the draggable element ("image").
| |
| − |
| |
| − | '''Where to Drop'''
| |
| − |
| |
| − | The '''ondragover''' event specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
| |
| − | This is done by calling the '''event.preventDefault()''' method for the '''ondragover''' event.
| |
| − |
| |
| − | ''Do the Drop'''
| |
| − |
| |
| − | When the dragged data is dropped, a drop event occurs.
| |
| − | In the example above, the ondrop attribute calls a function, '''drop(event)''':
| |
| − |
| |
| − | <pre>function drop(ev) {
| |
| − | ev.preventDefault();
| |
| − | var data = ev.dataTransfer.getData("text");
| |
| − | ev.target.appendChild(document.getElementById(data));
| |
| − | }
| |
| − | </pre>
| |
| − |
| |
| − | The '''preventDefault()''' method prevents the browser's default handling of the data (default is open as a link on the drop).
| |
| − | The dragged data can be accessed with the '''dataTransfer.getData()''' method. This method will return any data that was set to the same type in the setData() method.
| |
| − | The dragged data is the ID of the dragged element ("image").
| |
| − |
| |
| − | In the end, the dragged element is appended into the drop element, using the '''appendChild()''' function.
| |
| − |
| |
| − | Basic knowledge of JavaScript is required to understand and use the API.
| |
| | | | |
| | ==See also== | | ==See also== |
| | *[[HTML]] | | *[[HTML]] |
