拖拽系列1、JavaScript實現簡單的拖拽效果

時間 2019-11-07

標籤系列 javascript 實現簡單效果欄目 JavaScript 简体版

原文原文鏈接

前端拖拽相關應用匯總

在現實生活中就像男孩子牽着（拖着）女友的手穿過馬路；從馬路的一端走到另外一端這種場景很常見；javascript

而在前端開發中拖拽效果也算是前端開發中應用最多見、最廣泛的特效；其拖拽涉及知識點也是很是普遍；html

具體體如今如一個輕量級web彈窗層layerui拖拽實現;前端

登陸百度賬號頁面https://www.baidu.com/拖拽實現;java

拖拽式表單設計器http://formbuild.leipi.org/拖拽實現;web

Ace – Responsive Admin拖拽排序等這些效果的實現都離不開拖拽；瀏覽器

所以在前端項目的開發中前端開發人員掌握拖拽知識點是必不可少的一個環節；這裏樓主列舉目前知道的拖拽相關應用；不免掛一漏萬；歡迎您的補充；函數

下面將從實現一個最簡單拖拽效果提及動畫

拖拽實現原理流程操做

理解拖拽的核心就是掌握鼠標相關的事件及鼠標操做事件的相關流程操做ui

①mousedown 鼠標按下時操做流程；spa

　　* 設置鼠標按下mousedown標識 isDraging
　　* 獲取目標元素初始化的位置 initObjX initObjY
　　* 獲取鼠標初始化的位置 initMouseX initMouseY
　　* 經過目標元素初始化的位置與鼠標按下時的位置計算元素偏移距離objX/objY
　　* 設置元素的位置（objX/objY）

②mousemove 鼠標移動時操做流程（動態改變目標元素left/top值；請參考圖2-1）；

* 目標元素移動以前確保鼠標按下標識isDraging爲true

　　* 目標元素水平方向移動距離（moveX） = 當前鼠標移動時位置 - 鼠標按下時鼠標初始化位置 + 鼠標按下時目標元素水平方向初始化位置initObjX

　　* 目標元素垂直方向移動距離（moveY） = 當前鼠標移動時位置 - 鼠標按下時鼠標初始化位置 + 鼠標按下時目標元素垂直方向初始化位置initObjX

* 設置目標元素水平方向（moveX/moveY）移動距離

③mouseup鼠標離開時操做流程

　　* 中止動畫 mouseup鼠標離開事件綁定在document上，緣由是鼠標拖動過快離開時有可能不在目標元素上

拖拽實現原理代碼細節說明

1.獲取CSS樣式聲明對象 [object CSSStyleDeclaration]

* getComputedStyle、currentStyle 返回CSS樣式聲明對象([object CSSStyleDeclaration]) 只讀
* getComputedStyle 支持IE9+以上及正常瀏覽器
* currentStyle 兼容IE8及IE8如下獲取目標元素style樣式

1 function getStyleValue(elem, property){
2     return window.getComputedStyle(elem,null) ? window.getComputedStyle(elem,null)[property] : elem.currentStyle[property];
3 }

2.事件綁定兼容處理

　　*addEventListener(type, listener, userCapture)是標準的綁定事件監聽函數的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數；

其中userCapture爲false時；事件爲事件冒泡；userCapture爲true時；事件爲事件捕獲；

*IE8.0及其如下版本不支持該方法，它使用attachEvent()來綁定事件監聽函數。

1 //事件處理程序
2 function eventHandler(elem, eventName, eventType){
3        // elem.attachEvent 兼容IE8及如下版本瀏覽器事件
4        // addEventListener 支持Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數
5        elem.addEventListener ? elem.addEventListener(eventType, eventName, false) : elem.attachEvent('on'+eventType, eventName);
6 };

3.被拖動目標元素移動距離計算

目標元素移動距離能夠理解成物體的平移（結合圖2-1）從目標元素A到移動後的目標元素A；目標元素座標點連線就是目標元素移動距離

* 獲取鼠標位置 event.clientX、event.clientY

* 目標元素水平方向移動距離 = 當前鼠標移動時位置 - 鼠標按下時鼠標初始化位置 + 鼠標按下時目標元素水平方向初始化位置

* 目標元素垂直方向移動距離 = 當前鼠標移動時位置 - 鼠標按下時鼠標初始化位置 + 鼠標按下時目標元素垂直方向初始化位置

1 var moveX = event.clientX - initMouseX + initObjX;
2 var moveY = event.clientY - initMouseY + initObjY;

簡單的拖拽效果實現源碼

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>simpleDrag 實現一個簡單拖拽特效</title>
 6         <style>
 7             body {
 8                 margin: 0;
 9                 padding: 0;
10                 position: relative;
11             }
12             .box {
13                 width: 100px;
14                 height: 100px;
15                 background: deeppink;
16                 position: absolute;
17                 left: 25px;
18                 top: 25px;
19                 cursor: move;
20             }
21         </style>
22     </head>
23     <body>
24         <div class="box" id="box" style="position: absolute;left: 25px;top: 25px;"></div>
25         <script type="text/javascript">
26             window.onload = function(){
27                 //鼠標初始化位置
28                 var initMouseX = 0;
29                 var initMouseY = 0;
30                 //元素的初始化位置
31                 var initObjX = 0;
32                 var initObjY = 0;
33                 
34                 //鼠標按下標識
35                 var isDraging = false;
36                 
37                 //DOM-Object
38                 function g(id){
39                     return document.getElementById(id);
40                 }
41                 //事件處理程序
42                 function eventHandler(elem, eventName, eventType){
43                     // elem.attachEvent 兼容IE8及如下版本瀏覽器事件
44                     // addEventListener 支持Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數
45                     elem.addEventListener ? elem.addEventListener(eventType, eventName, false) : elem.attachEvent('on'+eventType, eventName);
46                 };
47                 
48                 //獲取style屬性值
49                 function getStyleValue(elem, property){
50                     //getComputedStyle、currentStyle 返回CSS樣式聲明對象([object CSSStyleDeclaration]) 只讀
51                     //getComputedStyle 支持IE9+以上及正常瀏覽器
52                     //currentStyle 兼容IE8及IE8如下獲取目標元素style樣式
53                     return window.getComputedStyle(elem,null) ? window.getComputedStyle(elem,null)[property] : elem.currentStyle[property];
54                 }
55                 //設置目標元素的位置
56                 function setObjPos(elem, pos){
57                     elem.style.left = pos.x +'px';
58                     elem.style.top = pos.y +'px';
59                 }
60                 //mousedown
61                 eventHandler(g('box'), function(event){
62                     //鼠標初始化位置
63                     initMouseX = event.clientX;
64                     initMouseY = event.clientY;
65                     //元素的初始化位置
66                     initObjX = parseInt(getStyleValue(g('box'), 'left'));
67                     initObjY = parseInt(getStyleValue(g('box'), 'top'));
68                     
69                     //鼠標按下標識
70                     isDraging = true;
71                 },'mousedown');
72                 //mousemove
73                 eventHandler(g('box'), function(event){
74                     if(isDraging){
75                         //鼠標初始化位置
76                         var moveX = event.clientX - initMouseX + initObjX;
77                         var moveY = event.clientY - initMouseY + initObjY;
78                         
79                         //設置元素位置
80                         setObjPos(g('box'), {x:moveX, y:moveY});
81                    }
82                 },'mousemove');
83                 //mouseup  document.documentElement 防止鼠標拖出元素外
84                 eventHandler(document.documentElement, function(event){
85                     //鼠標離開中止動畫
86                     isDraging = false;
87                 },'mouseup');
88             }
89         </script>
90     </body>
91 </html>