拖拽系列一、JavaScript实现简单的拖拽效果

前端拖拽相关应用汇总

在现实生活中就像男孩子牵着（拖着）女朋友的手穿过马路；从马路的一端走到另一端这种场景很常见；

而在前端开发中拖拽效果也算是前端开发中应用最常见、最普遍的特效；其拖拽涉及知识点也是非常广泛；

具体体现在如一个轻量级web弹窗层layerui拖拽实现;

登录百度帐号页面https://www.baidu.com/拖拽实现 ;

拖拽式表单设计器http://formbuild.leipi.org/拖拽实现;

Ace – Responsive Admin拖拽排序等这些效果的实现都离不开拖拽；

因此在前端项目的开发中前端开发人员掌握拖拽知识点是必不可少的一个环节；这里楼主列举目前知道的拖拽相关应用；难免挂一漏万；欢迎您的补充；

下面将从实现一个最简单拖拽效果说起

拖拽实现原理流程操作

理解拖拽的核心就是掌握鼠标相关的事件及鼠标操作事件的相关流程操作

①mousedown 鼠标按下时操作流程；

　　* 设置鼠标按下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样式

 function getStyleValue(elem, property){

     return window.getComputedStyle(elem,null) ? window.getComputedStyle(elem,null)[property] : elem.currentStyle[property];

 }

2.事件绑定兼容处理

　　*addEventListener(type, listener, userCapture)是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；

其中userCapture为false时；事件为事件冒泡；userCapture为true时；事件为事件捕获；

*IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。

 //事件处理程序

 function eventHandler(elem, eventName, eventType){

        // elem.attachEvent 兼容IE8及以下版本浏览器事件

        // addEventListener 支持Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数

        elem.addEventListener ? elem.addEventListener(eventType, eventName, false) : elem.attachEvent('on'+eventType, eventName);

 };

3.被拖动目标元素移动距离计算

目标元素移动距离可以理解成物体的平移（结合图2-1）从目标元素A到移动后的目标元素A；目标元素坐标点连线就是目标元素移动距离

* 获取鼠标位置 event.clientX、event.clientY

* 目标元素水平方向移动距离 = 当前鼠标移动时位置 - 鼠标按下时鼠标初始化位置 + 鼠标按下时目标元素水平方向初始化位置

* 目标元素垂直方向移动距离 = 当前鼠标移动时位置 - 鼠标按下时鼠标初始化位置 + 鼠标按下时目标元素垂直方向初始化位置

 var moveX = event.clientX - initMouseX + initObjX;

 var moveY = event.clientY - initMouseY + initObjY;

简单的拖拽效果实现源码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>simpleDrag 实现一个简单拖拽特效</title>

         <style>

             body {

                 margin: 0;

                 padding: 0;

                 position: relative;

             }

             .box {

                 width: 100px;

                 height: 100px;

                 background: deeppink;

                 position: absolute;

                 left: 25px;

                 top: 25px;

                 cursor: move;

             }

         </style>

     </head>

     <body>

         <div class="box" id="box" style="position: absolute;left: 25px;top: 25px;"></div>

         <script type="text/javascript">

             window.onload = function(){

                 //鼠标初始化位置

                 var initMouseX = 0;

                 var initMouseY = 0;

                 //元素的初始化位置

                 var initObjX = 0;

                 var initObjY = 0;

                 //鼠标按下标识

                 var isDraging = false;

                 //DOM-Object

                 function g(id){

                     return document.getElementById(id);

                 }

                 //事件处理程序

                 function eventHandler(elem, eventName, eventType){

                     // elem.attachEvent 兼容IE8及以下版本浏览器事件

                     // addEventListener 支持Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数

                     elem.addEventListener ? elem.addEventListener(eventType, eventName, false) : elem.attachEvent('on'+eventType, eventName);

                 };

                 //获取style属性值

                 function getStyleValue(elem, property){

                     //getComputedStyle、currentStyle 返回CSS样式声明对象([object CSSStyleDeclaration]) 只读

                     //getComputedStyle 支持IE9+以上及正常浏览器

                     //currentStyle 兼容IE8及IE8以下获取目标元素style样式

                     return window.getComputedStyle(elem,null) ? window.getComputedStyle(elem,null)[property] : elem.currentStyle[property];

                 }

                 //设置目标元素的位置

                 function setObjPos(elem, pos){

                     elem.style.left = pos.x +'px';

                     elem.style.top = pos.y +'px';

                 }

                 //mousedown

                 eventHandler(g('box'), function(event){

                     //鼠标初始化位置

                     initMouseX = event.clientX;

                     initMouseY = event.clientY;

                     //元素的初始化位置

                     initObjX = parseInt(getStyleValue(g('box'), 'left'));

                     initObjY = parseInt(getStyleValue(g('box'), 'top'));

                     //鼠标按下标识

                     isDraging = true;

                 },'mousedown');

                 //mousemove

                 eventHandler(g('box'), function(event){

                     if(isDraging){

                         //鼠标初始化位置

                         var moveX = event.clientX - initMouseX + initObjX;

                         var moveY = event.clientY - initMouseY + initObjY;

                         //设置元素位置

                         setObjPos(g('box'), {x:moveX, y:moveY});

                    }

                 },'mousemove');

                 //mouseup  document.documentElement 防止鼠标拖出元素外

                 eventHandler(document.documentElement, function(event){

                     //鼠标离开停止动画

                     isDraging = false;

                 },'mouseup');

             }

         </script>

     </body>

 </html>

在线编辑代码请点击 http://jsrun.net/2RkKp/edit

作者：Avenstar

出处：http://www.cnblogs.com/zjf-1992/p/6832941.html

关于作者：专注于前端开发、喜欢阅读

本文版权归作者所有,转载请标明原文链接