前端拖拽相关应用汇总
在现实生活中就像男孩子牵着（拖着）女朋友的手穿过马路；从马路的一端走到另一端这种场景很常见；
而在前端开发中拖拽效果也算是前端开发中应用最常见、最普遍的特效；其拖拽涉及知识点也是非常广泛；
具体体现在如一个轻量级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
拖拽系列一、JavaScript实现简单的拖拽效果的更多相关文章
-
拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
-
JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
-
JS拖拽系列--多元素拖拽，面向对象，es6拖拽
最近不太忙,终于有时间,研究了一下早就想搞定的拖拽系列,先是写了面向过程式的,再做一个面向对象的,再顺便弄弄继承,最后玩一下ES6的class 不觉用了一天多,收获很大.拖拽弄完,想再弄一个拖放. ...
-
day23—JavaScript实现DIV盒子拖拽（原生方式）
转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf- ...
-
第一百三十五节，JavaScript，封装库--拖拽
JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...
-
jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
-
javaScript系列 [06]-javaScript和this
在javaScript系列 [01]-javaScript函数基础这篇文章中我已经简单介绍了JavaScript语言在函数使用中this的指向问题,虽然篇幅不长,但其实最重要的部分已经讲清楚了,这篇文 ...
-
javaScript系列 [03]-javaScript原型对象
[03]-javaScript原型对象 引用: javaScript是一门基于原型的语言,它允许对象通过原型链引用另一个对象来构建对象中的复杂性,JavaScript使用原型链这种机制来实现动态代理. ...
-
js拖拽上传 文件上传之拖拽上传
由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...
随机推荐
-
Ceph RGW 创建默认的pool
使用Ceph-deploy完成RGW服务部署后(最好是在部署RGW服务前建立如下这些pool),使用sudo ceph osd lspools 命令,会发现RGW自动以默认参数创建了N个rgw相关的p ...
-
centos 使用 locate
centos 第一次使用locate时报错: locate: can not stat () `/var/lib/mlocate/mlocate.db': 没有那个文件或目录 因为locate相关的索 ...
-
PHP-PHP-FPM的max_children一些误区
现在nginx + fpm 基本成为主流的配置,其中我们比较关注的是pm.max_chindren的配置 首先,我们关注一个前提设置: pm = static/dynamic, 这个选项是标识fpm子 ...
-
15.RDD 创建内幕解析
第15课:RDD创建内幕 RDD的创建方式 Spark应用程序运行过程中,第一个RDD代表了Spark应用程序输入数据的来源,之后通过Trasformation来对RDD进行各种算子的转换,来实现具体 ...
-
面向对象S.O.L.I.D原则
面向对象的五大原则,又称S.O.L.I.D原则: S(SRP, Single Reponsibility Principle): 单一职责原则,一个类应有且只有一个职责(或只有一个引起其变化的原因) ...
-
在没有DOM操作的日子里，我是怎么熬过来的（终结篇）
前言 在我写终结篇的日子里,Vue版本稳定在2.9.1.当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿. 接下来,正文从这开始~ 好多童鞋学习Vue都有灯 ...
-
兼容IE8，滚动加载下一页
// 滚动加载下一页 var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrol ...
-
Data Governance
https://erwin.com/blog/data-preparation-mapping/
-
写一个带文本菜单的程序,菜单项如下 (1) 取五个数的和 (2) 取五个数的平均值 (X) 退出。
问题: 写一个带文本菜单的程序,菜单项如下(1) 取五个数的和 (2) 取五个数的平均值(X) 退出. 由用户做一个选择, 然后执行相应的功能.当用户选择退出时程序结束. 实现: ...
-
【MAC】Mac下部分常用的小工具
Homebrew: 官方介绍:The missing package manager for OS X(OS X 不可或缺的套件管理器) /usr/bin/ruby -e "$(curl - ...