• javascript 实现拖动效果


    在写这篇文章之前我一直在纠结一个问题,那就是以前实现的拖动拖快了总会有一些卡顿,脱节,不流畅,只能轻轻的小心翼翼的慢慢的拖拽,这样就失去了web页面中窗口拖动的意义,所以在这儿我分享出来和大家一起共同进步。

    首先说一下javascript+div拖动的原理:

    1.要拖动必然要触发3个事件,鼠标左键按下去(onmousedown), 移动鼠标(onmousemove), 释放鼠标左键(onmouseup).

    2.拖动之前必须要对目标对象(也就是需要拖动的div)进行初始化事件绑定,下面代码里面会详细介绍

    3.下面就是拖动的详细步骤了,首先也拖动对象绑定一个onmousedown事件函数,这个事件函数里面控制一个状态,是否准备好拖动,获取拖动对象的坐标位置(这个坐标位置是相当于浏览器的)。然后在给document对象绑定onmousemove, 在onmousemove事件里面做捕获鼠标的坐标,让拖动对象的位置跟随鼠标的位置,重儿就实现了拖动。但拖到一定的位置总得停下来吧, 好,这个onmouseup事件处理函数就用上了,在这个事件函数里面只做一个事,那就是把拖动状态改为拖动停止。最后一点说说为什么要把onmousemove事件函数绑定在document上面而不是拖动对象上,如果是绑定在拖动对象上面就会出现本文开头说的卡顿, 脱节,不流畅,反正就是有各种不和谐因素。原因我也不是很明白,我想可能跟浏览器内部实现机制有关嘛, 如果有哪位大神知道请不吝赐教。

    下面是源码,都很简单,我不是用javascript对象的方式去封装的,只要有一些简单的javascript,dom, css知识的都能看懂, 还有本人是第一次写博客,还请各位看官多提意见多多拍砖。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3     <head>
     4         
     5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     6         <title>drag</title>
     7 
     8         <script type="text/javascript" language="javascript">
     9             window.onload = function() {
    10                 var drag = document.getElementById("box");
    11                 var x = 0, //初始化拖放对象的x坐标
    12                     y = 0, //初始化拖放对象的y坐标
    13                     isMove = false; //初始化拖放对象的状态, false停止移动,true开始移动
    14                 //开始移动
    15                 drag.onmousedown = function(e) {
    16                     isMove = true;
    17                     var evt = e || window.event;
    18                     //获取鼠标的位置,兼容多浏览器
    19                     x = evt.pageX ? evt.pageX : evt.clientX;
    20                     y = evt.pageY ? evt.pageY : evt.clientY;
    21                     x -= this.getBoundingClientRect().left; //获取拖动对象的x坐标
    22                     y -= this.getBoundingClientRect().top;  //获取拖动对象的y坐标
    23                 };
    24                 //移动中..
    25                 document.onmousemove = function(e) {
    26                     if(isMove) {
    27                         var evt = e || window.event;
    28                         var ox = evt.pageX ? evt.pageX : evt.clientX;
    29                         var    oy = evt.pageY ? evt.pageY : evt.clientY;
    30                         drag.style.left = (ox - x)+'px';
    31                         drag.style.top = (oy - y)+'px';
    32                     }
    33                 };
    34                 //结束移动
    35                 document.onmouseup = function() {
    36                     isMove = false;
    37                 };
    38             };
    39         </script>
    40             
    41         <style type="text/css">
    42         </style>
    43                 
    44     </head>
    45 
    46     <body>
    47         <div id="box" style="border:1px solid  orange;50px;height:50px;cursor:move;position:absolute;left:100px;top:100px;background-color:white;"></div>
    48     </body>
    49 
    50 </html>





    drag

     
  • 相关阅读:
    Unity中的欧拉旋转
    Unity-Rigidbody碰撞穿透
    C#实现单例模式的几种方法
    C#OO初级思想
    C#虚方法virtual
    数据库查询
    DNS 域名服务器搭建
    iptables 基本操作
    通过adb 操作手机
    linux 调整逻辑卷空间大小
  • 原文地址:https://www.cnblogs.com/ghostgift/p/2918576.html
Copyright © 2020-2023  润新知