js 实现拖拽滚动
/*** @description 使用鼠標拖拽div，實現橫向、縱向滾動* @param el 被拖拽滾動的元素（產生滾動條的元素）*/function addDragable(el) {let startX = 0; // el的scroll橫向初始位置let gapX = 0; // 鼠標點擊時的橫向初始位置let startY = 0; // el的scroll縱向向初始位置let gapY = 0; // 鼠標點擊時的縱向初始位置el.addEventListener("mousedown", start);function start(event) {// 判斷是否點擊鼠標左鍵if (event.button == 0) {gapX = event.clientX;gapY = event.clientY;startX = el.scrollLeft;startY = el.scrollTop;el.addEventListener("mousemove", move); // documentel.addEventListener("mouseup", stop);}// event.preventDefault(); // 阻止默認事件或冒泡 如拖拽時選中文本return false;}function move(event) {// 移動時的坐標 - 鼠標左鍵點擊時的坐標 = 鼠標移動的相對距離var left = event.clientX - gapX;var top = event.clientY - gapY;// 滾動條初始坐標 - 移動的相對距離 = 應該滾動后的坐標el.scrollTo(startX - left, startY - top); // 橫向 縱向return false;}function stop() {// 鼠標松開，解除綁定el.removeEventListener("mousemove", move, false);el.removeEventListener("mouseup", stop, false);}}
示例：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>實現元素拖拽滾動</title> </head><body><div id="dragableWrapper" class="wrapper"><h2>實現元素拖拽滾動（不會因拖拽被選中的文字,按情形選一既可。）</h2><h2>js做法：event.preventDefault(); 阻止默認事件或冒泡；</h2><h2>css做法：user-select: none;</h2><div class="row"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div><div class="row"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"><copyright class="copyright">GeniusXYT：<a href="https://blog.csdn.net/GeniusXYT/article/details/124198758">https://blog.csdn.net/GeniusXYT/article/details/124198758</a>（轉發請注明出處）</copyright></div></div></div> </body><script>/*** @description 使用鼠標拖拽div，實現橫向、縱向滾動* @param el 被拖拽滾動的元素（產生滾動條的元素）*/function addDragable(el) {let startX = 0; // el的scroll橫向初始位置let gapX = 0; // 鼠標點擊時的橫向初始位置let startY = 0; // el的scroll縱向向初始位置let gapY = 0; // 鼠標點擊時的縱向初始位置el.addEventListener("mousedown", start);function start(event) {// 判斷是否點擊鼠標左鍵if (event.button == 0) {gapX = event.clientX;gapY = event.clientY;startX = el.scrollLeft;startY = el.scrollTop;el.addEventListener("mousemove", move); // documentel.addEventListener("mouseup", stop);}// event.preventDefault(); // 阻止默認事件或冒泡 如拖拽時選中文本return false;}function move(event) {// 移動時的坐標 - 鼠標左鍵點擊時的坐標 = 鼠標移動的相對距離var left = event.clientX - gapX;var top = event.clientY - gapY;// 滾動條初始坐標 - 移動的相對距離 = 應該滾動后的坐標el.scrollTo(startX - left, startY - top); // 橫向 縱向return false;}function stop() {// 鼠標松開，解除綁定el.removeEventListener("mousemove", move, false);el.removeEventListener("mouseup", stop, false);}}addEventListener("onload", addDragable(document.getElementById("dragableWrapper")))</script><style>.wrapper {width: 1000px;height: 500px;padding: 200px;overflow: auto;border: 2px ridge rgb(65, 194, 227);}h2 {user-select: none;}.row {user-select: none;white-space: nowrap;}.box {display: inline-block;width: 300px;height: 300px;background-color: rgb(43, 229, 235);}.row:last-child .box:last-child {position: relative;}.row:last-child .box:last-child .copyright {position: absolute;right: 0;bottom: 0;font-size: 12px;opacity: .2;} </style></html>總結
- 上一篇： Object definePropert
- 下一篇： 原生js打印指定节点元素