JS拖拽元素原理及实现代码

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友!

一、拖拽的流程动作
①鼠标按下
②鼠标移动
③鼠标松开

二、拖拽流程中对应的JS事件
①鼠标按下会触发onmousedown事件

[javascript] view plain copy

  1. obj.onmousedown = function(e) {
  2. //..........
  3. }

②鼠标移动会触发onmousemove事件

[javascript] view plain copy

  1. obj.onmousemove = function(e) {
  2. //......
  3. }

③鼠标松开会触发onmouseup事件

[javascript] view plain copy

  1. obj.onmouseup = function() {
  2. //......
  3. }

三、实现的原理讲解
拖拽其实是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。
当鼠标按下或鼠标移动时,都可以获取到当前鼠标的位置,即移动前的位置与移动中的位置。
那么上面①与②的代码就应该变成这样

[javascript] view plain copy

  1. var mouseDownX,mouseDownY  // 因在移动中需计算鼠标的偏移需要用到鼠标按下时的坐标,固声明称全局变量
  2. obj.onmousedown = function(e) {
  3. mouseDownX = e.pageX;
  4. mouseDownY = e.pageY;
  5. }
  6. obj.onmousemove = function(e) {
  7. var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
  8. }

移动前与移动后坐标有了,那么计算偏移,先看下图

很明显移动后元素的X坐标为  鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标
Y坐标为  鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标
把新的 X,Y 替换元素的 X,Y 就搞定了。
那么代码就应该更换为:

[javascript] view plain copy

  1. var mouseDownX,mouseDownY,initX,initY,flag = false;
  2. obj.onmousedown = function(e) {
  3. //鼠标按下时的鼠标所在的X,Y坐标
  4. mouseDownX = e.pageX;
  5. mouseDownY = e.pageY;
  6. //初始位置的X,Y 坐标
  7. initX = obj.offsetLeft;
  8. initY = obj.offsetTop;
  9. //表示鼠标已按下
  10. flag = true;
  11. }
  12. obj.onmousemove = function(e) {
  13. // 确保鼠标已按下
  14. if(flag) {
  15. var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
  16. this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";
  17. this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";
  18. }
  19. }
  20. obj.onmouseup = function() {
  21. //标识已松开鼠标
  22. flag = false;
  23. }

需要注意的事,如果用jquery库来写的话三个事件为mousedown、mousemove、mouseup,名称稍微有点差别。

还有一点,被拖拽的元素的样式要设置成绝对或相对位置才有效果。

至此,最简单的元素拖拽功能就讲完了~~~~

如有不正确之处欢迎大家指正!

原文地址:https://www.cnblogs.com/firstdream/p/8331567.html

时间: 2024-10-09 18:28:40

JS拖拽元素原理及实现代码的相关文章

鼠标拖拽元素以及继承原生代码

实现页面上两个DOM元素的操作,通过继承的方式 class Drag{ constructor(ele){ this.ele = ele; this.m = this.move.bind(this); this.u = this.up.bind(this); this.addEvent(); } addEvent(){ this.ele.addEventListener("mousedown",this.down.bind(this)) } down(eve){ var e = eve

Javascript 拖拽雏形——逐行分析代码,让你轻松了拖拽的原理

拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标.拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位置-物体位置的差值就是那个距离 是吧.那这个斜线就是横线和竖线组成的. 我们距离看下程序怎么做. /*实际上他改的就是某个div 的left top ,那他就动起来了. 那样式中肯定要有绝对定位是吧.*/ <style type="text/css"> #div1 { width

js拖拽原理和碰撞原理

拖拽的原理onmousedown 选择元素onmousemove 移动元素onmouseup 释放元素 1:如果拖拽的时候有文字:被选中,会产生问题原因:当鼠标按下的时如果页面中有文字或者图片被选中的时候,则会发生文字默认可以被拖动,因此标准 :e.preventDefalut(); 阻止他的默认行为 非标准的阻止默认行为 非标准:window.event.returnValue=false; 2:给某元素设置全局捕获,当我们给一个元素设置全局捕获,那么这个元素会监听后续发生的所有事件,当有事件

js拖拽效果的原理和实现

让我们了解一下最简单的拖拽效果: 1.首先我们先设置一个div,然后简单设置一下样式: div{ width:50px; height: 50px; background-color: red; position: absolute; } 2.然后我们编写js部分,我们要清楚,元素的拖拽分三个部分:鼠标左键按下.拖动鼠标元素跟着移动.以及鼠标左键抬起停止拖拽元素停止移动 var div = document.querySelector("div");                 

一步一步实现JS拖拽插件

js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:onmousedown,onmousemove,onmouseup.所以拖拽的基本思路就是: 1.用鼠标点击被拖拽的元素触发onmousedown (1)设置当前元素的可拖拽为true,表示可以拖拽 (2)记录当前鼠标的坐标x,y

js拖拽效果实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta

React.js实现原生js拖拽效果及思考

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的.且每次元素都是对齐到网格的. 先根据demo说明一下思路和细节,后面会给出demo代码. 1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px.铺上一层网格背景是为了帮助我们更好的看到效果