前端拖拽相关应用汇总

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

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

具体体现在如一个轻量级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

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

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

拖拽系列一、JavaScript实现简单的拖拽效果的更多相关文章

  1. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  2. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  3. JS拖拽系列--多元素拖拽,面向对象,es6拖拽

    最近不太忙,终于有时间,研究了一下早就想搞定的拖拽系列,先是写了面向过程式的,再做一个面向对象的,再顺便弄弄继承,最后玩一下ES6的class  不觉用了一天多,收获很大.拖拽弄完,想再弄一个拖放. ...

  4. day23—JavaScript实现DIV盒子拖拽(原生方式)

    转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf- ...

  5. 第一百三十五节,JavaScript,封装库--拖拽

    JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...

  6. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  7. javaScript系列 [06]-javaScript和this

    在javaScript系列 [01]-javaScript函数基础这篇文章中我已经简单介绍了JavaScript语言在函数使用中this的指向问题,虽然篇幅不长,但其实最重要的部分已经讲清楚了,这篇文 ...

  8. javaScript系列 [03]-javaScript原型对象

    [03]-javaScript原型对象 引用: javaScript是一门基于原型的语言,它允许对象通过原型链引用另一个对象来构建对象中的复杂性,JavaScript使用原型链这种机制来实现动态代理. ...

  9. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

随机推荐

  1. SQL Server数据库读取数据的DateReader类及其相关类

    之前学了几天的SQL Server,现在用C#代码连接数据库了. 需要使用C#代码连接数据库,读取数据. 涉及的类有: ConfigurationManage SqlConnection SqlCom ...

  2. 基于Intranet的零件库管理信息系统设计--part01

    好吧,临近毕业的我,毕业设计还没开始做呢.时间不等人,再过两个月就要答辩了,我得开始做我的毕设了,虽然我现在还没能力完全把毕设做出来,但总得先迈出第一步吧.今天先做一小部分. 话不多说,先来看我得毕业 ...

  3. Yahoo前端优化十四条军规

    相信互联网已经越来越成为人们生活中不可或缺的一部分.Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能. 比如Google机会已经把最基本的office应 ...

  4. CentOS7 更换yum源

    yum源调整为163wget http://mirrors.163.com/.help/CentOS7-Base-163.repo[root@admin yum.repos.d]# mv CentOS ...

  5. pyqt4实现tab界面切换

    (转:https://segmentfault.com/q/1010000005143428)

  6. Struts2之Validator

    Struts2中提供了数据校验验证数据例如验证邮件.数字等.验证方式有3种:一是通过validate()方法,二是通过Xml,三是使用注解方式. 一.初始化 首先定义一个User类 package c ...

  7. CentOS 7 安装Broadcom无线网卡驱动

    重新坑了小伙伴一台电脑,用来装centOS练习和做服务器用,哈哈哈 装了了CentOS 7后发现无线网卡读不出来,没有装驱动,网卡是Broadcom ╮(╯_╰)╭ 1.首先确定网卡是否为坑爹类型Br ...

  8. 分布式统一配置平台-Disconf.Net

    源码地址:https://github.com/qkbao/Disconf.Net 作者:青客宝  联系qq:后续奉上 为了更好的解决分布式环境下多台服务实例的配置统一管理问题,本文提出了一套完整的分 ...

  9. 网站防止SQL注入方法

    方法:所有获取GET.POST变量都先进行过滤: 字符串-- htmlspecialchars(addslashes($string))  addslashes() 函数返回在预定义字符之前添加反斜杠 ...

  10. 老李分享:robotium常用API 2

    断言: 具体请查看官网 断言方法assert(robotium特有的断言方式,实际项目中和Junit的assert方法配合使用) void assertCurrentActivity (String ...