元素事件：滑鼠按下事件/滑鼠移動事件/滑鼠鬆開事件
元素樣式：讓元素脫離文件流，採用絕對定位的方式。
當滑鼠在元素上面按下時，儲存元素的初始偏移量和滑鼠按下時的座標，然後在狀態變數裡面標記當前狀態為按下狀態。
當滑鼠拖動元素移動時，我們通過計算滑鼠從起始位到移動位之間的偏移量來求元素應該移動的距離。
元素移動距離= 初始座標 + (滑鼠拖動座標 - 滑鼠按下座標 )
當滑鼠鬆開後，我們把狀態變數重置為假，表示當前拖動結束。
html**：
doctype html
>
<
head
>
<
meta
charset
="utf8"
>
<
title
>js拖動效果
title
>
<
link
rel="stylesheet"
type
="text/css"
href
="style.css"
>
<
script
src="node.js"
>
script
>
head
>
<
body
>
<
div
id="drag"
>拖動我！
div>
<
script
>
let o
=document.queryselector(
"#drag");
let e
=new
nodeelement(o);
e.draggable();
script
>
body
>
html
>
css**：
#drag
js指令碼**：
'use strict';/** 私有屬性
*/const _nodexy = symbol('_nodexy'); //
節點座標
const _startxy = symbol('_startxy'); //
起始座標
const _mousedown = symbol('_mousedown'); //
判斷滑鼠是否按下/**
* 節點元素類 */
class nodeelement element
*/constructor(element)
/*** 拖動
*/draggable() );
//移動
document.addeventlistener("mousemove", (event) =>
});//鬆開
this.element.addeventlistener("mouseup", (event) =>);
}}
js ES6解構賦值
交換變數的值 let x 1 let y 2 x,y y,x console.log x,y 1用乙個中間變數 let z x x y y z console.log x,y 2異或 x x y y x y x x y console.log x,y 3.算術運算子 x x y y x y x x ...
js ES6學習筆記 Proxy
1 proxy 用於修改某些操作的預設行為，等同於在語言層面做出修改，所以屬於一種 元程式設計 meta programming 即對程式語言進行程式設計。2 proxy 可以理解成，在目標物件之前架設一層 攔截 外界對該物件的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾...
js ES6學習筆記 Reflect
1 reflect物件與proxy物件一樣，也是 es6 為了操作物件而提供的新 api。reflect物件的設計目的有這樣幾個。2 reflect.get方法查詢並返回target物件的name屬性，如果沒有該屬性，則返回undefined。3 reflect.set方法設定target物件的na...