拖拽中怎麼修復bug

原創 小小樟鱼 2020-02-20 13:02

簡易拖拽

 1.拖拽 ==   鼠標按下    接着移動鼠標。

   bar.onmousedown =function(){

           document.onmousemove = function(){

            }

}

2. 當我們按下鼠標的時候，就要記錄當前 鼠標的位置 - 大盒子的位置
 算出  bar  當前在 大盒子內的距離 。

3.   防止選擇拖動（防止複製文字）

我們知道按下鼠標然後拖拽可以選擇文字 的。

清除選中的內容

window.getSelection? window.getSelection().removeAllRanges() : document.selection.empty();

 l拖拽原理  
l距離不變
l三個事件：onmousedown鼠標按下、onmousemove鼠標撫摸、onmouseup鼠標彈起
l靠譜拖拽
l原有拖拽的問題
l直接給document加事件
lFF下，空Div拖拽Bug
l阻止默認事件
l防止拖出頁面
l修正位置
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>無標題文檔</title>
  6. <style>
  7. #div1 {width:200px; height:200px; background:red; position:absolute;}
  8. </style>
  9. <script>
  10. window.onload=function ()
  11. {
  12.  var oDiv=document.getElementById('div1');
  13.  
  14.  var disX=0;
  15.  var disY=0;
  16.  
  17.  oDiv.onmousedown=function (ev)
  18.  {
  19.  var oEvent=ev||event;
  20.  
  21.  disX=oEvent.clientX-oDiv.offsetLeft;
  22.  disY=oEvent.clientY-oDiv.offsetTop;
  23.  
  24.  document.onmousemove=function (ev)
  25.  {
  26.  var oEvent=ev||event;
  27.  
  28.  oDiv.style.left=oEvent.clientX-disX+'px';
  29.  oDiv.style.top=oEvent.clientY-disY+'px';
  30.  };
  31.  
  32.  document.onmouseup=function ()
  33.  {
  34.  document.onmousemove=null;
  35.  document.onmouseup=null;
  36.  };
  37.  };
  38. };
  39. </script>
  40. </head>
  42. <body>
  43. <div id="div1"></div>
  44. </body>
  45. </html>




上面的這個拖拽有個bug，移動速度快和移動到瀏覽器頭部的時候，大家觀察一下，會出現問題。原因是盒子的作用域比較小，很容易移出本來盒子的區域導致代碼不起作用，我們改進一下：






  1. <script>

  2. window.onload=function ()
  3. {
  4.  var oDiv=document.getElementById('div1');
  5.  
  6.  var disX=0;
  7.  var disY=0;
  8.  
  9.  oDiv.onmousedown=function (ev)
  10.  {
  11.  var oEvent=ev||event;
  12.  
  13.  disX=oEvent.clientX-oDiv.offsetLeft;
  14.  disY=oEvent.clientY-oDiv.offsetTop;
  15.  
  16.  document.onmousemove=function (ev)
  17.  {
  18.  var oEvent=ev||event;
  19.  
  20.  oDiv.style.left=oEvent.clientX-disX+'px';
  21.  oDiv.style.top=oEvent.clientY-disY+'px';
  22.  };
  23.  
  24.  document.onmouseup=function ()
  25.  {
  26.  document.onmousemove=null;
  27.  document.onmouseup=null;
  28.  };
  29.  };
  30. };
  31. </script>
  32. 






上面這個代碼，在火狐裏面，有問題：出現鬼影，第二次拖拽的時候，出現問題：






  1. <script>
  2. window.onload=function ()
  3. {
  4.  var oDiv=document.getElementById('div1');
  5.  
  6.  var disX=0;
  7.  var disY=0;
  8.  
  9.  oDiv.onmousedown=function (ev)
  10.  {
  11.  var oEvent=ev||event;
  12.  
  13.  disX=oEvent.clientX-oDiv.offsetLeft;
  14.  disY=oEvent.clientY-oDiv.offsetTop;
  15.  
  16.  document.onmousemove=function (ev)
  17.  {
  18.  var oEvent=ev||event;
  19.  
  20.  oDiv.style.left=oEvent.clientX-disX+'px';
  21.  oDiv.style.top=oEvent.clientY-disY+'px';
  22.  };
  23.  
  24.  document.onmouseup=function ()
  25.  {
  26.  document.onmousemove=null;
  27.  document.onmouseup=null;
  28.  };
  29.  
  30.  return false;
  31.  };
  32. };
  33. </script>




這個拖拽可以扔到不可視區域，放開鼠標就找不到了。再繼續修復bug：








  1. <script>
  2. window.onload=function ()
  3. {
  4.  var oDiv=document.getElementById('div1');
  5.  
  6.  var disX=0;
  7.  var disY=0;
  8.  
  9.  oDiv.onmousedown=function (ev)
  10.  {
  11.  var oEvent=ev||event;
  12.  
  13.  disX=oEvent.clientX-oDiv.offsetLeft;
  14.  disY=oEvent.clientY-oDiv.offsetTop;
  15.  
  16.  document.onmousemove=function (ev)
  17.  {
  18.  var oEvent=ev||event;
  19.  var l=oEvent.clientX-disX;
  20.  var t=oEvent.clientY-disY;
  21.  
  22.  if(l<0)
  23.  {
  24.  l=0;
  25.  }
  26.  else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
  27.  {
  28.  l=document.documentElement.clientWidth-oDiv.offsetWidth;
  29.  }
  30.  
  31.  if(t<0)
  32.  {
  33.  t=0;
  34.  }
  35.  else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
  36.  {
  37.  t=document.documentElement.clientHeight-oDiv.offsetHeight;
  38.  }
  39.  
  40.  oDiv.style.left=l+'px';
  41.  oDiv.style.top=t+'px';
  42.  };
  43.  
  44.  document.onmouseup=function ()
  45.  {
  46.  document.onmousemove=null;
  47.  document.onmouseup=null;
  48.  };
  49.  
  50.  return false;
  51.  };
  52. };
  53. </script>



























小小樟魚



發佈了30 篇原創文章 · 獲贊 31 · 訪問量 9萬+





私信

關注

















發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








「Java開發指南」如何用MyEclipse搭建GWT 2.1和Spring？（二）






本教程將指導您如何生成一個可運行的Google Web Toolkit (GWT) 2.1和Spring應用程序，該應用程序爲域模型實現了CRUD應用程序模式。在本教程中，您將學習如何：
安裝Google Eclipse插件
爲GWT配置






原創

2024-05-17 12:21:26









前端面試題 - Node JS與V8是什麼關係？






前端面試題 - Node JS與V8是什麼關係？
V8 引擎是 Node.js 的核心組成部分，負責執行 JavaScript 代碼， 而 Node.js 爲 V8 提供了一個運行環境和API，使其能夠在服務器端運行。
通俗易懂的前端面試題






原創

2024-05-16 12:41:41









前端面試題 - V8是什麼？






前端面試題 - V8是什麼？
V8 是一個JavaScript引擎，能將JavaScript代碼直接編譯成本地平臺的機器碼並執行。
通俗易懂的前端面試題網站： https://www.front-interview.com






原創

2024-05-16 12:41:40









Visual C++界面開發組件Xtreme Toolkit Pro v24測試版發佈——完全支持SVG






Codejock軟件公司的Xtreme Toolkit Pro是屢獲殊榮的VC界面庫，是MFC開發中最全面界面控件套包，它提供了Windows開發所需要的11種主流的Visual C++ MFC控件，包括Command Bars、Contr






原創

2024-05-16 12:19:55









SharePoint Online 客製化開發：如何使用CSS更改網站主題背景顏色？






一般情況下公司爲了某個團隊或者公司內部共享數據等用途來更改網站的樣式，打造獨特的品牌樣式，很多研發工程師給定的解決方案是爲他們的站點構建自定義主頁，雖然SharePoint Designer是一個強大的工具，但這裏我不推薦使用ShareP






osc_w6noy934

2024-05-14 02:00:35









Python爬蟲進階必備 | MD5 hash 案例解析彙總（一）






上次鹹魚對關於 MD5 hash 的JS加密方法做了總結，這次把鹹魚遇到的 MD5 hash 的案例做了彙總，這個彙總系列會持續更新，攢到一定數量的網站就發一次。
關於 MD5 HASH 的處理可以參考下面這篇文章：
Python爬蟲進






osc_hzf6peqc

2024-05-14 01:40:15









Html 的生命週期






零、序言
　　vue 用多了，自然離不開生命週期。最近突發奇想，加上之前看過的文章中關於 script 標籤中的 async 和 defer 的搗糨糊，決定整理一下，攻克這個模糊點。
　　當然，最多的還是與 script 標籤相關的前兩個






osc_27sxxx5r

2024-05-13 23:34:32









[js] 寫一個格式化時間的方法






[js] 寫一個格式化時間的方法
function dateToString(date, format = 'yyyy-MM-dd') {
const d = new Date(date);
let result = format






osc_6mbnx553

2024-05-13 22:07:18









cheerp 編譯器之通用計算模塊ccm1






cheerp 通用計算模塊(ccm1) 是基於cheerp 編譯器發射出平臺格式無關的wasm中間代碼，在不同宿主之內運行的一種模塊化方式。
0x1. 不同宿主的相同代碼實現
ccm1 的一般宿主是c++實現，不同平臺編譯引用就可以，目






原創

2024-05-12 21:53:46









通義靈碼企業版正式發佈，滿足企業私域知識檢索、數據合規、統一管理等需求






5 月 9 日阿里雲 AI 峯會，阿里雲智能集團首席技術官周靖人宣佈，通義靈碼企業版正式發佈，滿足企業用戶的定製化需求，幫助企業提升研發效率。
通義靈碼是國內用戶規模第一的智能編碼助手，基於 SOTA 水準的通義千問代碼模型 Code-Qw






原創

2024-05-11 21:15:01









Python 爬蟲：Spring Boot 反爬蟲的成功案例






前言
在當今數字化時代，網絡數據成爲了信息獲取和分析的重要來源之一。然而，隨着網絡數據的廣泛應用，爬蟲技術也逐漸成爲了互聯網行業的熱門話題。爬蟲技術的應用不僅可以幫助企業獲取有價值的信息，還可以用於數據分析、市場研究等領域。然而，隨着爬






原創

2024-05-07 23:26:04









我們團隊來了一位新同事，主動要求幫忙敲代碼！歡迎 AI 001號






通義靈碼｜7X24的AI智能編程助手
工號：AI001
他叫通義靈碼，一個硅基生命。出生在0101星球，沒有性別，但有人格類型。
他是INTJ，建築師型人格，艾薩克·牛頓和甘道夫同款。
他會寫一點代碼，但不如我們會得多。我看了下他的簡歷，






原創

2024-05-07 21:12:06









界面控件DevExtreme v23.1、v23.2盤點 - 增強的TypeScript(Angular、React、Vue)






DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang






原創

2024-05-07 11:34:56









界面組件DevExpress中文教程 - 如何在Node.js應用中創建報表？






DevExpress Reporting是.NET Framework下功能完善的報表平臺，它附帶了易於使用的Visual Studio報表設計器和豐富的報表控件集，包括數據透視表、圖表，因此您可以構建無與倫比、信息清晰的報表。
獲取Dev






原創

2024-04-30 11:36:22









ArkTS開發原生鴻蒙HarmonyOS短視頻應用






HarmonyOS實戰課程“2024鴻蒙零基礎快速實戰-仿抖音App開發（ArkTS版）”已經於今日上線至慕課網（https://coding.imooc.com/class/843.html），有致力於鴻蒙生態開發的同學們可以關注一下。






原創

2024-04-29 23:07:45