前端沙滩

Appearance

本页内容

JavaScript ​

获取元素的大小及其相对于视口的位置。 ​

javascript
Element.getBoundingClientRect()
img

拖放操作 ​

拖动的源对象(被拖动的对象)可以触发的事件

  • dragstart：拖动开始事件
  • drag：拖动中
  • dragend：拖动结束事件

整个拖动过程的组成：dragstart * 1 + drag + dragend * 1

拖动的目标对象(固定不动的对象)可以触发的事件：

  • dragenter：拖动着源对象进入(主要看光标位置)
  • dragover：拖动着源对象在目标对象上方悬停
  • dragleave：拖动着离开
  • drop：源对象在目标对象上方释放

dragover事件的默认行为是 "必须触发dragleave"；只有阻止了此默认行为drop才可能触发

js
elem.ondragover=function(e){
    e.preventDefault();
}

如何在拖动的源对象和目标对象之间传递数据

  • 使用全局变量

    简单；但会污染全局对象

  • 使用H5拖放API的数据运输对象——dataTransfer

    H5的拖放API为每个拖放事件都提供了一个e.dataTransfer(拖拉机)属性，专用于在一次拖放过程中的7个事件间传递数据

    源对象的事件——保存数据

    js
    e.dataTransfer.setData( key, value );

    目标对象的事件——获取数据

    js
    var value = e.dataTransfer.getData( key )

读取拖放的文件

js
elem.ondrop = function(e){
    var file = e.dataTransfer.files[0]; // 获取被拖动的文件
    var reader = new FileReader( ); // 创建文件读取器
    reader.onload = function() { // 文件内容读取完成
        console.log(reader.result); // 读取到的文件数据
    }
    reader.readAsDataURL(file); // 从文件中读取内容
}

当前在DOM或者shadow DOM树中处于聚焦状态的Element ​

javascript
document.activeElement

控制整个文档是否可编辑 ​

使文档可编辑

javascript
document.designMode = "on";

使一个 iframe 文档可编辑

js
iframe.contentDocument.designMode = "on";

地理定位 ​

获取当前位置 ​

javascript
navigator.geolocation.getCurrentPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});

监视定位 ​

javascript
const watchID = navigator.geolocation.watchPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});

watchPosition() 函数会返回一个 ID，唯一地标记该位置监视器。你可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。

js
navigator.geolocation.clearWatch(watchID);

调整返回结果 ​

getCurrentPosition() 和 watchPosition() 都接受一个成功回调、一个可选的失败回调和一个可选的 options 对象。

该对象允许你指定是否启用高精度、返回位置数据的最长缓存时间（在达到最长缓存时间之前，结果会被缓存，且在请求时的位置相同时，会返回缓存的结果；在过期后，浏览器会请求刷新位置数据），以及超时时间（用于表示浏览器在超时前最大的尝试获取位置数据的时间）。

对 watchPosition 的调用类似于这样：

js
function success(position) {
  doSomething(position.coords.latitude, position.coords.longitude);
}

function error() {
  alert("Sorry, no position available.");
}

const options = {
  enableHighAccuracy: true,
  maximumAge: 30000,
  timeout: 27000,
};

const watchID = navigator.geolocation.watchPosition(success, error, options);

描述位置 ​

用户的位置由一个包含 GeolocationCoordinates 对象实例的 GeolocationPosition 对象实例描述。

GeolocationPosition 实例包含两个属性：coords 包含一个 GeolocationCoordinates 实例，timestamp 属性则包含一个 DOMTimeStamp 实例，用于表示检索位置数据花费的时间。

GeolocationCoordinates 实例包含多个属性，但主要使用的是其中的两个属性：latitude（纬度）和 longitude（经度），它们是你在地图上绘制位置所需的。因此，许多地理定位成功的回调看起来相当简单：

js
function success(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;

  // 使用 latitude 和 longitude 做些什么
}

你也可以从 GeolocationCoordinates 对象中获取许多其他的信息，包括高度、速度、设备面朝的方向，以及对高度、经纬度数据的精准测量值。

错误处理 ​

如果调用 getCurrentPosition() 或 watchPosition() 时提供了错误回调函数，回调函数的第一个参数将会是一个 GeolocationPositionError 对象实例。该对象包含两个属性：code 表示返回的错误类型，message 表示人类可读的、对错误码（code）的描述。

你可以像这样使用它：

js
function errorCallback(error) {
  alert(`ERROR(${error.code}): ${error.message}`);
}