百度地图 api拖放

十二月二十二

1.地理位置
1.1 geolocation接口
获取设备地理位置可编程对象
使用 **getCurrentPosition()** 方法来获取设备当前位置。
| coords.latitude         | 以十进制度数表示纬度的双精度值。                             |
| coords.longitude        | 以十进制度数表示经度的双精度值。                             |
| coords.accuracy         | 表示纬度和经度属性精度的双精度值，单位为米。                 |
| coords.altitude         | 表示该位置相对于海平面的高度的双经度值。<br/>如果无法提供数据，则此值可以为空。 |
| coords.altitudeAccuracy | 表示高度属性精度的双精度值，单位为米。                       |
| coords.heading          | 表示设备运行方向的双精度值。<br>该值（以度为单位）表示设备离正北方向的距离。0° 表示正北方向，顺时针计算（即东为 90°，西为 270°）。<br>如果速度为 0，此值为 NaN；如果设备无法提供方向信息，则此值为空。 |
| coords.speed            | 表示设备运行速度的双精度值，单位为米/每秒。                  |
| timestamp               | 获取到位置的时间（时间戳）。                                 |
g
getCurrentPosition() 方法的第二个参数用于处理错误。它规定获取地理位置失败或用户拒绝定位时运行的函数。

二.
拖拽事件
| drag      | ondrag      | 当拖拽元素或选中的文本时触发。                               |
| drop      | ondrop      | 当元素或选中的文本在可释放目标上被释放时触发。               |
| dragenter | ondragenter | 当拖拽元素或选中的文本到一个可释放目标时触发。               |
| dragover  | ondragover  | 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。 |
| dragleave | ondragleave | 当拖拽元素或选中的文本离开一个可释放目标时触发。             |
| dragstart | ondragstart | 当用户开始拖拽一个元素或选中的文本时触发。                   |
| dragend   | ondragend   | 当拖拽操作结束时触发（比如松开鼠标按键或敲 “Esc” 键）。      |

### 3.1 设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

### 3.2 拖动什么 - ondragstart 和 setData()

在上面示例中，ondragstart 属性调用了一个函数 `drag(ev)`，它规定了被拖动的数据。

DataTransfer 对象专门用来存储拖放时要携带的数据，它可以被设置为拖放事件对象的 dataTransfer 属性。

`dataTransfer.setData()` 方法设置被拖数据的数据类型和值：

### 3.3 拖放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 `event.preventDefault()` 方法：

 ### 3.4 进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数 `drop(event)`：

  2.1 Web Storage 简介

.2 Web Storage 的特点
- 设置数据和读取数据比较方便。
- 容量较大，sessionStorage 约 5M，localStorage 约 20M。
- 只能存储字符串，如果要存储 JSON 对象，可以使用 `window.JSON` 对象的 `stringify()` 方法和 `parse()` 方法进行序列化和反序列化。

在使用 Web Storage 前，应检查浏览器是否支持 localStorage 和 sessionStorage：

3 localStorage 的使用

## sessionStorage 的使用

sessionStorage 方法针对一个 session（会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

## 5 简单的网站列表程序

功能需求：

- 可以输入网站名、网址，以网站名作为 key 存入 localStorage；
- 可以输入网站名，查找网址；
- 可以列出当前已保存的所有网站。