精华内容
下载资源
问答
  • 鼠标拖动事件

    2019-04-15 17:34:39
    首先明白一件事情,鼠标拖动事件中,鼠标点击图片,鼠标移动,鼠标松开,三件事,所以用到三个属性,分别是onmousedown,onmousemove,onmouseup,三个鼠标事件。 在鼠标点击图片时,鼠标在图片的位置已经固定了,即使...
    	首先明白一件事情,鼠标拖动事件中,鼠标点击图片,鼠标移动,鼠标松开,三件事,所以用到三个属性,分别是onmousedown,onmousemove,onmouseup,三个鼠标事件。
    	在鼠标点击图片时,鼠标在图片的位置已经固定了,即使是在移动过程中,鼠标也是在图片点击时的位置,所以我们首先要在鼠标点击的时候获取鼠标的位置,然后鼠标点击,图片到浏览器的距离,鼠标到浏览器的距离减去图片到浏览器的距离就获得了鼠标到图片的距离(固定),然后获取触发鼠标的移动事件,鼠标移动的时候,图片会跟随鼠标的位置移动。所以我们在body里面写内容的时候要给图片设置一个定位,鼠标移动的时候获取鼠标到浏览器的距离减去鼠标到图片的距离(即上面算出来的距离),即图片到浏览器的距离,就算出了图片到浏览器的距离。也就是图片随鼠标移动之后,图片的位置。
    	要注意的是图片移动只能在你的浏览器内,不能跑到浏览器的外面。所以移动以后你的图片到浏览器的距离不能<0(包括你的左距离和上距离);而且只能在你的可视区域里所以你图片的移动范围也必须是小于或者等于你的浏览器的可视宽度减去图片的可视宽高。
    	<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>拖拽</title>
        <style type="text/css">
            #box{width:100px;
                height:100px;
                background:red;
                cursor: move;
                position:relative;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    </html>
    <script type="text/javascript">
            box.function(e){
            var e=e||event;
            X=e.clientX-box.offsetLeft;//获取图片到鼠标之间的左距离。
            Y=e.clientY-box.offsetTop;//获取图片到鼠标之间的上距离。
            document.function(e){
                 var e=e||event;
                 var moveX=e.clientX-X;//移动以后图片到浏览器的水平 距离。
                 var moveY=e.clientY-Y;//移动以后图片到浏览器的垂直距离。
                 var winx=document.documentElement.clientWidth;//获取固定语法浏览器的可视宽
                 var winy=document.documentElement.clientHeight;//获取固定语法浏览器的可视高
                 var maxw=winx-box.offsetWidth;//获取在浏览器水平移动的最大距离。
                 var maxh=winy-box.offsetHeight;//获取在浏览器垂直移动的最大距离。
                if(moveX<0){
                    moveX=0;
                }//移动后到浏览器的水平距离=0;
                if(moveY<0){
                    moveY=0;
                }//移动后到浏览器的垂直距离=0;
                if(moveX>maxw){
                    moveX=maxw;
                } //不能超过图片到浏览器的最大水平距离。
                if(moveY>maxh){
                    moveY=maxh;
                }//不能超过图片到浏览器的最大垂直距离。
                box.style.left=moveX+"px";
                box.style.top=moveY+"px";
            }//鼠标每移动一次图片的位置
        }
            document.function(){
                document.null;
            
        }//鼠标松开以后点击事件清零。
    </script>```
    
    
    
    展开全文
  • js 前端鼠标拖动事件实例
  • 主要介绍了Python wxpython模块响应鼠标拖动事件操作,结合实例形式分析了Python使用wxpython模块创建窗口、绑定事件及相应鼠标事件相关操作技巧,需要的朋友可以参考下
  • PC的鼠标拖动事件 移动端的手指事件 能拿到被移动元素的高宽,距离可移动范围内的距离 拖动事件与手指事件 顾名思义,就是通过不同的触发条件来达到你想实现的拖动效果,至于第三条的可移动范围,可以是 父级dom 的...

    写了好几次的PC端和移动端的拖拽效果了,每次都要重新查阅资料,现在做个总结记录,方便以后随时查阅

    要想写拖拽事件,首先得了解三块知识点:

    • PC的鼠标拖动事件
    • 移动端的手指事件
    • 能拿到被移动元素的高宽,距离可移动范围内的距离

    拖动事件与手指事件 顾名思义,就是通过不同的触发条件来达到你想实现的拖动效果,至于第三条的可移动范围,可以是 父级dom 的宽高,也可以是 可见的视口宽高,具体根据自己的需求定制,下面会提供对应获取方法

    PC端的拖拽事件

    直说几个常用的,有兴趣可以去查阅所有 mouse 事件
    如果是在框架内,比如 vue 中,可以直接使用 @+方法 即可调用(手指事件同理)
    比如 @mousedown=“xxx”

    mousedown:按下鼠标后触发
    mouseup:	松开鼠标后触发
    mousemove:移动鼠标时触发
    mouseout:当鼠标离开当前对象时触发
    

    移动端的手指事件

    直说几个常用的,有兴趣可以去查阅所有 touch事件

    vue 可以使用 @touchmove.prevent.top 触发手指事件

    touchstart:触摸开始(手指放在触摸屏上)
    touchmove:拖动(手指在触摸屏上移动)
    touchend:触摸结束(手指从触摸屏上移开)
    touchenter :移动的手指进入一个dom元素
    touchleave :移动的手指离开一个dom元素
    

    拿到被移动元素的高宽,距离可移动范围内的距离

    视口高宽

    先说说常用的视口高宽,因为每个浏览器都有自己的内核,所以需要考虑一定的兼容

    **在IE中:**
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    document.documentElement.scrollTop =>窗口滚动条滚动高度
    **在FireFox中:**
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    document.documentElement.scrollTop =>窗口滚动条滚动高度
    **在chrome中:**
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    document.body.scrollTop =>窗口滚动条滚动高度
    **在Opera中:**
    document.body.clientWidth ==> 可见区域宽度
    document.body.clientHeight ==> 可见区域高度
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高
    

    提供一段常用代码(获取视口高 宽)

    let windowHeight =
        document.documentElement.clientHeight ||
        document.documentElement.clientHeight ||
        document.documentElement.clientHeight ||
        document.documentElement.clientHeight;
    let windowWidth =
        document.documentElement.clientWidth ||
        document.documentElement.clientWidth ||
        document.documentElement.clientWidth ||
        document.documentElement.clientWidth;
    

    获取鼠标/手指移动的距离

    可以通过 listener 获取到 event 来获取鼠标/手指移动距离

    document.addEventListener(
      "touchmove",
       (event) => {
            event.;
    		event.touches[0].clientY;
       },
       false
    );
    

    获取 dom 的宽高

    如果移动范围是针对父级元素的而不是视口的,同样可以通过获取父级元素的宽高来限制移动范围

    let movePj = document.querySelector("xxx");
    movePj.offsetHeight;
    movePj.offsetWidth;
    

    获取 dom 距离上下左右的距离

    该方法获取的是距离视口的相对距离,如果要获取父级的相对距离就要自己计算了

    let movePj = document.querySelector("xxx");
    movePj .getBoundingClientRect().top;
    movePj .getBoundingClientRect().bottom;
    movePj .getBoundingClientRect().left;
    movePj .getBoundingClientRect().right;
    

    移动 dom

    最后就是我们的移动 dom 了,可以通过 transform 来实现
    例如:

    xxxxxxx
    xxx
    在计算结束以后我们需要移动我们的 dom元素 menu 需要横向移动 moveDistance(计算结果)那么可以这样写
    menu.style.transform = `translateX(${moveDistance}px)`;
    
    展开全文
  • 此段代码,实现了左键点击id元素内区域后,拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动,松开鼠标后取消事件 业务需要记录一下 $(function () { var div=document.getElementById("元素id"); div...

     此段代码,实现了左键点击id元素内区域后,拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动,松开鼠标后取消事件

    业务需要记录一下

    $(function () {
            var div=document.getElementById("元素id");
            div.onmousedown=function(e){
                   document.onmousemove=function(e){
                       var xx=e.clientX || e.clientx ||0;
                    var yy=e.clientY || e.clienty ||0;
                    //首先获得鼠标位置坐标
                    var T1=yy;
                    var L1=xx;
                    //然后设置该两个差值的筏值 T1max T1min L1max L1min;
                    //.content为元素id下的子元素,实际想监听这个class,由于js监听id比较方便,改为了监听带id的父元素
                    var T1max= $(".content").height()*0.95;
                    var T1min= $(".content").height()*0.5;
                    var L1max= $(".content").width()*0.95;
                    var L1min= $(".content").width()*0.3;
                    //当T1 大于 T1max 或者小于 T1min 时,触发滚动条动作,变化速度为 T1 与 筏值的差值(每秒) [滑动效果另议]
                    if(T1>T1max) $(".content").scrollTop( $(".content").scrollTop()+T1-T1max);
                    if(T1<T1min) $(".content").scrollTop( $(".content").scrollTop()+T1-T1min);
                    //同上,处理L1
                    if(L1>L1max) $(".content").scrollLeft( $(".content").scrollLeft()+L1-L1max);
                    if(L1<L1min) $(".content").scrollLeft( $(".content").scrollLeft()+L1-L1min);
                    
                   };
                   document.onmouseup=function(){
                       document.onmouseup=null;
                       document.onmousemove=null;
                   };
             };
        });

    展开全文
  • js鼠标拖动事件

    千次阅读 2018-04-23 20:15:07
    第一步,定义被拖放的元素为绝对定位或者相对定位第二部,清楚几个坐标的概念:按下鼠标时指针坐标(event.pageX和event.pageY),松开鼠标时指针坐标,拖放元素的原始坐标,拖放后元素的坐标&lt;!doctype ...

    第一步,定义被拖放的元素为绝对定位或者相对定位

    第二部,清楚几个坐标的概念:按下鼠标时指针坐标(event.pageX和event.pageY),松开鼠标时指针坐标,拖放元素的原始坐标,拖放后元素的坐标

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #box{
        position:absolute;
        width:200px;
        height:200px;
        overflow:hidden;
        padding:4px;
        border:solid 4px #59F182;}
    #box img {width:100%;}
    </style>
    <script></script>
    </head>
    <body>
    <div id="box" ><img src="images/bg.jpg" /></div>
    <script>
    // 初始化拖放对象
    var box = document.getElementById("box");
    	// 获取页面中被拖放元素的引用指针
    box.style.position = "absolute";			// 绝对定位
    // 初始化变量,标准化事件对象
    var mx, my, ox, oy; 						// 定义备用变量
    function e(event){ 							// 定义事件对象标准化函数
       if( ! event){ 							// 兼容IE浏览器
          event = window.event;
          event.target = event.srcElement;
          event.layerX = event.offsetX;
          event.layerY = event.offsetY;
       }
       event.mx = event.pageX || event.clientX + document.body.scrollLeft; 
    	// 计算鼠标指针的x轴距离
       event.my = event.pageY || event.clientY + document.body.scrollTop; 
    	// 计算鼠标指针的y轴距离
       return event; 							// 返回标准化的事件对象
    }
    // 定义鼠标事件处理函数
    document.onmousedown = function(event){ 	// 按下鼠标时,初始化处理
       event = e(event); 						// 获取标准事件对象
       o = event.target; 						// 获取当前拖放的元素
       ox = parseInt(o.offsetLeft); 			// 拖放元素的x轴坐标
       oy = parseInt(o.offsetTop); 				// 拖放元素的y轴坐标
       mx = event.mx; 							// 按下鼠标指针的x轴坐标
       my = event.my; 							// 按下鼠标指针的y轴坐标
       document.onmousemove = move; 			// 注册鼠标移动事件处理函数
       document.onmouseup = stop; 				// 注册松开鼠标事件处理函数
    }
    function move(event){ 						// 鼠标移动处理函数
       event = e(event);
       o.style.left = ox + event.mx - mx  + "px";	// 定义拖动元素的x轴距离
       o.style.top = oy + event.my - my + "px";	// 定义拖动元素的y轴距离
    }
    function stop(event){ 							// 松开鼠标处理函数
       event = e(event);
       ox = parseInt(o.offsetLeft); 				// 记录拖放元素的x轴坐标
       oy = parseInt(o.offsetTop); 					// 记录拖放元素的y轴坐标
       mx = event.mx ; 								// 记录鼠标指针的x轴坐标
       my = event.my ; 								// 记录鼠标指针的y轴坐标
       o = document.onmousemove = document.onmouseup = null; 
    	// 释放所有操作对象
    }
    </script>
    </body>
    </html>
    

    展开全文
  • jquery 鼠标拖动事件 广东宏远买票拖动事件
  • 【UE4】鼠标拖动事件蓝图

    千次阅读 2020-03-17 15:38:02
  • 原生js实现table列宽的鼠标拖动事件

    千次阅读 2018-08-30 10:39:28
    //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var table = document.getElementById("tableId"); //table的id名称 for (j = 0; j &lt; table.rows[0].cells.length; j++) { table....
  • import tkinterwin = tkinter.Tk()win.title("鼠标拖动事件")win.geometry("800x600+600+100")#<B1-Motion> 拖动左键触发事件#<B2-Motion> 拖动中键触发事件#<B3-Motion> 拖动右键触发事件label=...
  • 鼠标拖动事件应用

    2012-06-08 14:08:11
    此代码是js的鼠标拖动拖动事件的应用,模拟winform中的拖动事件
  • JS区分鼠标拖动事件与鼠标双击事件,用于SVG或者GIS中,模拟地图操作
  • 鼠标拖动事件_js效果(深入分析)

    千次阅读 2015-07-30 22:28:57
    鼠标拖动是很常见的js效果,例如我们装扮自己的博客、空间时常用到拖动某一个版块到任意位置;淘宝网上对要购买的衣服有放大镜效果(鼠标拖动效果是其中的一部分)拖动放大镜时需要用到鼠标拖动效果;有时候我们打开...
  • 原生JS实现元素跟随鼠标拖动事件

    千次阅读 2016-11-26 14:06:23
    原生JS实现元素跟随鼠标拖动事件
  • java Jframe 我再NetBeans中创建两个窗口,一个登录一个主窗口。都设置undecorated为True。同事都对窗口进行鼠标拖动的设置,但是为什么只有登录可以,主窗口不行呢?求大神指点迷津
  • qt5 鼠标拖拽事件 —— 编程 教学 游戏 demo, 详细看文档https://mp.csdn.net/postedit/81049635; 里面有源代码,ui设计和文档
  • 需求描述:如图,由于用户使用手写板,需关闭图中浏览器自带的a标签的拖动效果。 $("body").on("mousedown", "a", function (e) { e.preventDefault(); }); 补充: <a href="#"></a> 会跳转...
  • 主要介绍了python模拟鼠标拖动操作的方法,实例分析了Python鼠标操作及键位操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • int x = 100; int y = 100; int sz = 100; color bgcolor; void setup() { size(400, 300); colorMode(HSB); noStroke(); smooth(); fill(random(255), 100, 200);... bgcolor = color(random(255), 1...
  • QT拖动界面的鼠标事件

    千次阅读 2019-06-01 13:11:47
    在我们设计自定义QT界面时,一般会取消界面最上面的拖动控件,为此我们需要新的界面添加鼠标拖动事件。 (1).在.h文件的类中声明函数 void mousePressEvent(QMouseEvent* event); void mouseMoveEvent...
  • 今天小编就为大家分享一篇PyQt5实现让QScrollArea支持鼠标拖动的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 这周接了一个分享到QQ后者微信的分享页任务,里面有一个拖动div左右滑动的功能,由于第一次做,弄了五六个小时,终于出来了1.csstransition-duration: 0ms; 规定完成过渡效果需要花费的时间 transform: translate3d(0px,...
  • 必须鼠标左键按着很慢很慢的速度拖动才能增加宽度和高度,但是减小宽度和高度则很方便,速度快也没问题,最后定位才发现,对话框在canvas上方,如果按着左键不放,速度太快,鼠标事件将给canvas,而不是我们期望的...
  • C++ Qt 实现鼠标拖动旋转功能,做了一个中国汉族古音律学习辅助软件,可以查找古琴音位,十二律、五音、简谱、西音、工尺对应。 主要还是技术代码,鼠标拖动旋转功能,可以借鉴到其他项目。
  • c++鼠标拖动

    2019-10-23 11:48:18
    inline void chilkDrag(int m_x, int m_pos_y,int drag_y) {//移动鼠标位置,拖动距离 ::SetCursorPos(m_x, m_pos_y);//移动鼠标位置 Sleep(50); mouse_event(MOUSEEVENTF_LEFTDOWN , 0, 0, 0, 0);//...
  • js鼠标拖拽事件

    千次阅读 2017-12-22 10:59:10
    只记录left,top同理。 clientX:返回鼠标相对于浏览器的水平坐标; offsetLeft:返回当前对象距离浏览器(父对象)的左侧距离; offsetWidth:对象的可见宽度...鼠标拖动事件是利用position:absolute绝对定位改变l
  • wxpython实现鼠标拖动事件

    千次阅读 2015-05-24 21:46:30
    wxpython鼠标拖动事件小案例: #coding:UTF-8 import wx app = wx.App() def dragEVT(event): if event.ButtonDown(): panel1.SetPosition(event.GetPosition()) elif event.Dragging(): panel1.Set
  • 功能: 鼠标按住窗口的自定义标题栏后,移动拖动整个窗口功能 实现方式: 方法一:其中CVideoPlayerApp是自定义标题栏的QWidget。 void CVideoPlayerApp::mousePressEvent(QMouseEvent *event) { if (event->...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,142
精华内容 17,656
关键字:

鼠标拖动事件