JS拖拽元素原理及实现代码
2018-01-22 22:55
615 查看
拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友!
一、拖拽的流程动作
①鼠标按下
②鼠标移动
③鼠标松开
二、拖拽流程中对应的JS事件
①鼠标按下会触发onmousedown事件
[javascript] view plain copy
obj.onmousedown = function(e) {
//..........
}
②鼠标移动会触发onmousemove事件
[javascript] view plain copy
obj.onmousemove = function(e) {
//......
}
③鼠标松开会触发onmouseup事件
[javascript] view plain copy
obj.onmouseup = function() {
//......
}
三、实现的原理讲解
拖拽其实是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。
当鼠标按下或鼠标移动时,都可以获取到当前鼠标的位置,即移动前的位置与移动中的位置。
那么上面①与②的代码就应该变成这样
[javascript] view plain copy
var mouseDownX,mouseDownY // 因在移动中需计算鼠标的偏移需要用到鼠标按下时的坐标,固声明称全局变量
obj.onmousedown = function(e) {
mouseDownX = e.pageX;
mouseDownY = e.pageY;
}
obj.onmousemove = function(e) {
var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
}
移动前与移动后坐标有了,那么计算偏移,先看下图
很明显移动后元素的X坐标为 鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标
Y坐标为 鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标
把新的 X,Y 替换元素的 X,Y 就搞定了。
那么代码就应该更换为:
[javascript] view plain copy
var mouseDownX,mouseDownY,initX,initY,flag = false;
obj.onmousedown = function(e) {
//鼠标按下时的鼠标所在的X,Y坐标
mouseDownX = e.pageX;
mouseDownY = e.pageY;
//初始位置的X,Y 坐标
initX = obj.offsetLeft;
initY = obj.offsetTop;
//表示鼠标已按下
flag = true;
}
obj.onmousemove = function(e) {
// 确保鼠标已按下
if(flag) {
var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";
this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";
}
}
obj.onmouseup = function() {
//标识已松开鼠标
flag = false;
}
需要注意的事,如果用jquery库来写的话三个事件为mousedown、mousemove、mouseup,名称稍微有点差别。
还有一点,被拖拽的元素的样式要设置成绝对或相对位置才有效果。
至此,最简单的元素拖拽功能就讲完了~~~~
如有不正确之处欢迎大家指正!
一、拖拽的流程动作
①鼠标按下
②鼠标移动
③鼠标松开
二、拖拽流程中对应的JS事件
①鼠标按下会触发onmousedown事件
[javascript] view plain copy
obj.onmousedown = function(e) {
//..........
}
②鼠标移动会触发onmousemove事件
[javascript] view plain copy
obj.onmousemove = function(e) {
//......
}
③鼠标松开会触发onmouseup事件
[javascript] view plain copy
obj.onmouseup = function() {
//......
}
三、实现的原理讲解
拖拽其实是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。
当鼠标按下或鼠标移动时,都可以获取到当前鼠标的位置,即移动前的位置与移动中的位置。
那么上面①与②的代码就应该变成这样
[javascript] view plain copy
var mouseDownX,mouseDownY // 因在移动中需计算鼠标的偏移需要用到鼠标按下时的坐标,固声明称全局变量
obj.onmousedown = function(e) {
mouseDownX = e.pageX;
mouseDownY = e.pageY;
}
obj.onmousemove = function(e) {
var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
}
移动前与移动后坐标有了,那么计算偏移,先看下图
很明显移动后元素的X坐标为 鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标
Y坐标为 鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标
把新的 X,Y 替换元素的 X,Y 就搞定了。
那么代码就应该更换为:
[javascript] view plain copy
var mouseDownX,mouseDownY,initX,initY,flag = false;
obj.onmousedown = function(e) {
//鼠标按下时的鼠标所在的X,Y坐标
mouseDownX = e.pageX;
mouseDownY = e.pageY;
//初始位置的X,Y 坐标
initX = obj.offsetLeft;
initY = obj.offsetTop;
//表示鼠标已按下
flag = true;
}
obj.onmousemove = function(e) {
// 确保鼠标已按下
if(flag) {
var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";
this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";
}
}
obj.onmouseup = function() {
//标识已松开鼠标
flag = false;
}
需要注意的事,如果用jquery库来写的话三个事件为mousedown、mousemove、mouseup,名称稍微有点差别。
还有一点,被拖拽的元素的样式要设置成绝对或相对位置才有效果。
至此,最简单的元素拖拽功能就讲完了~~~~
如有不正确之处欢迎大家指正!
相关文章推荐
- JS拖拽元素原理及实现代码
- Vue通过操作Dom元素 实现 拖拽文件到网页进行文件上传【JS/JQ 原理也是一样的】
- MicroSoft Live 和GOOGLE个性主页 页面元素可拖拽放置的实现原理(2)
- JS拖拽的进一步练习,移动与拉伸实现代码
- 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- js实现网页图片延时加载的原理和代码【转】
- JQuery拖拽元素改变大小尺寸实现代码
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
- 通过JS自动隐藏手机浏览器的地址栏实现原理与代码
- js动态删除div元素基本思路及实现代码
- 网页中图片或者表格等元素用鼠标随意拖拽的JS代码[摘抄]
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- MicroSoft Live 和GOOGLE个性主页 页面元素可拖拽放置的实现原理
- js面向对象实现元素拖拽
- js从数组中删除指定值(不是指定位置)的元素实现代码
- vuejs2.0运用原生js实现简单的拖拽元素功能
- Java基础知识强化之集合框架笔记47:Set集合之TreeSet保证元素唯一性和比较器排序的原理及代码实现(比较器排序)
- JS实现简易的图片拖拽排序实例代码
- js实现div闪烁原理及实现代码