<html>

<head>

<title>javascript鼠标拖拽的那些事情</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<script type="text/javascript"><!--

       var dragging = false;

       var test;

       var mouseY;

       var mouseX;

       //初始化

       window.onload = function(){

        test = document.getElementById("test");

        //绑定拖拽元素

        test.onmousedown = down;

        //鼠标在元素内按下触发down事件

        test.onmousemove = move;

        //鼠标在元素内移动触发move事件

        document.onmouseup = up;

        //鼠标松开触发up事件

        test.style.position = "relative";

        test.style.top = "0px";

        test.style.left = "0px";

        //定义css

       }

       function down(event)

       {

        event = event || window.event;

        dragging = true;

        mouseX = parseInt(event.clientX);

        mouseY = parseInt(event.clientY);

        objY = parseInt(test.style.top);

        objX = parseInt(test.style.left);

       }

       function move(event){

        event = event || window.event;

        if(dragging == true){

            var x,y;

            y = event.clientY - mouseY + objY;

            x = event.clientX - mouseX + objX;

            test.style.top = y + "px";

            test.style.left = x + "px";

        }

       }

       function up(){

        dragging = false;

       }

       // -->

       </script>

<div id="test" style="border:1px solid ccc; color:#fff; width:200px; background:#000; padding:10px;">

  <p>一点点白</p>

</div>

</body>

</html>

javascript鼠标拖拽的那些事情的更多相关文章

  1. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  2. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  3. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  4. 鼠标拖拽定位和DOM各种尺寸详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  6. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  7. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  8. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

  9. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

随机推荐

  1. Scrapyd+Gerapy部署Scrapy爬虫进行可视化管理

    Scrapy是一个流行的爬虫框架,利用Scrapyd,可以将其部署在远程服务端运行,并通过命令对爬虫进行管理,而Gerapy为我们提供了精美的UI,可以在web页面上直接点击操作,管理部署在scrap ...

  2. Jenkins Maven安装设置

    Jenkins Maven安装设置 如果没有学习过 Maven 的朋友,可以先了解 Maven教程,然后再进一步学习本教程文章. 第1步:下载和设置Maven Maven的官方网站就是Apache M ...

  3. Android Studio发布Release版本之坑--Unknown host 'd29vzk4ow07wi7.cloudfront.net'

    使用Android Studio发布Release版本时,出现Unknown host 'd29vzk4ow07wi7.cloudfront.net'...错误. 解决方法:修改本机的DNS为8.8. ...

  4. ace -- 语法高亮

    Creating a Syntax Highlighter for Ace 给ace创建一个语法高亮 Creating a new syntax highlighter for Ace is extr ...

  5. PAT甲题题解-1054. The Dominant Color (20)-排序/map

    原本用map,发现超时了,后来便先用数组存储排个序,最后for一遍统计每种颜色出现的次数(每种颜色的首位索引相减+1),找出最多的即可. #include <iostream> #incl ...

  6. “数学口袋精灵”App的第一个Sprint计划（总结）

    “数学口袋精灵”App的第一个Sprint计划 ——11.20  星期五(第十天)第一次Sprint计划结束   第一阶段Sprint的目标以及完成情况: 时间:11月11号~11月20号(10天) ...

  7. Windows 使用 StarWind 创建的 Oracle RAC环境 异常关机之后的处理过程

    创建好了 虚拟机之后发现 偶尔会出现 蓝屏重启的现象, 这个时候 需要进行 异常处理 确定虚拟机已经开机之后 1. 打开iscsi的连接设备, 确认 iscsi的正常连接到虚拟机的 存储设备 注意 r ...

  8. final 发布 领跑衫获奖感想

    时间 :2016年5月20日 13:30--14:00 final发布中,我们团队严一格演示了最终版本的四则运算项目, 修正了beta版本发布时弹幕部分无法消除的bug,总体效果达到预期. 遗憾的是没 ...

  9. C# 多线程初级汇总

    异步委托 创建线程的一种简单方式是定义一个委托,并异步调用它 委托是方法的类型安全的引用 Delegate类还支持异步地调用方法.在后台,Delegate类会创建一个执行任务的线程 投票,并检查委托是 ...

  10. AOP 貌似是拦截器 对方法进行拦截

    AOP 貌似是拦截器 对方法进行拦截