元素事件：滑鼠按下事件/滑鼠移動事件/滑鼠鬆開事件 元素樣式：讓元素脫離文檔流，採用絕對定位的方式。 一、滑鼠按下事件 當滑鼠在元素上面按下時，保存元素的初始偏移量和滑鼠按下時的坐標，然後在狀態變數裡面標記當前狀態為按下狀態。 二、滑鼠移動事件 當滑鼠拖動元素移動時，我們通過計算滑鼠從起始位到移動位 ...
元素事件：滑鼠按下事件/滑鼠移動事件/滑鼠鬆開事件
元素樣式：讓元素脫離文檔流，採用絕對定位的方式。
一、滑鼠按下事件
當滑鼠在元素上面按下時，保存元素的初始偏移量和滑鼠按下時的坐標，然後在狀態變數裡面標記當前狀態為按下狀態。
二、滑鼠移動事件
當滑鼠拖動元素移動時，我們通過計算滑鼠從起始位到移動位之間的偏移量來求元素應該移動的距離。
元素移動距離= 初始坐標 + (滑鼠拖動坐標 - 滑鼠按下坐標 )
三、滑鼠鬆開事件
當滑鼠鬆開後，我們把狀態變數重置為假，表示當前拖動結束。
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{ width: 100px; height: 100px; background: red; position:absolute; cursor: move; line-height: 100px; text-align: center; }
JS腳本代碼：
'use strict'; /** 私有屬性 */ const _nodexy = Symbol('_nodexy'); // 節點坐標 const _startxy = Symbol('_startxy'); // 起始坐標 const _mousedown = Symbol('_mousedown'); // 判斷滑鼠是否按下 /** * 節點元素類 */ class NodeElement { /** * 構造函數 * @param {HTMLElement} element */ constructor(element) { this.element = element; this[_nodexy] = [0, 0]; // 節點坐標 this[_mousedown] = false; // 判斷滑鼠是否按下 this[_startxy] = [0, 0]; // 起始坐標 } /** * 拖動 */ draggable() { // 按下事件 this.element.addEventListener("mousedown", (event) => { this[_mousedown] = true; this[_startxy] = [event.clientX, event.clientY]; this[_nodexy] = [this.element.offsetLeft, this.element.offsetTop]; }); // 移動 document.addEventListener("mousemove", (event) => { // 計算元素移動距離 // 元素移動距離= 初始坐標 + (滑鼠拖動坐標 - 滑鼠按下坐標 ) // 事件： 按下事件（開始） / 滑鼠移動事件（進行中） / 滑鼠鬆開事件（結束） if (this[_mousedown]) { this.element.style.left = this[_nodexy][0] + (event.clientX - this[_startxy][0]) + 'px'; this.element.style.top = this[_nodexy][1] + (event.clientY - this[_startxy][1]) + 'px'; } }); // 鬆開 this.element.addEventListener("mouseup", (event) => { this[_mousedown] = false; }); } }
我的百度經驗：https://jingyan.baidu.com/article/546ae185f7c0711149f28c34.html
源碼地址：https://pan.baidu.com/s/19t_QUqw_UhceqWT1nwgBxw
樣本地址：http://js.zhuamimi.cn/%E5%85%83%E7%B4%A0%E6%8B%96%E5%8A%A8/index.htm
