<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. opencv core组件进阶

    1.图像在内存中存储方式,图像矩阵的大小取决于颜色模型,取决于所有的通道数:还有重要的颜色空间缩减的概念:因为如果是RGB的话,使用uchar的话,就有256^3的结合方法.所以要用到颜色缩减的方法, ...

  2. WebStorm安装

    用到的链接: WebStorm官网:https://www.jetbrains.com/webstorm 破解补丁与注册码网址:http://idea.lanyus.com/ 有条件的朋友请购买正版. ...

  3. 金蝶盘点机PDA仓库条码管理家电类序列号扫描操作方法-采购入库单

    1.1.  采购入库单 传统的进销存管理软件需要人工识别商品品种,清点商品数量,然后再去人工手工在电脑上一行行的录入采购入库单.录单效率低,误差大. 如果使用汉码盘点机PDA,入库时,仓管员只需要手持 ...

  4. sqlserver批量删除字段 msrepl_tran_version

    屁话不多说. 原因: msrepl_tran_version由于有非空约束.所以不能直接删除. --###############################################--1 ...

  5. 12.19daily_scrum

    本阶段已经过去一半,在周末短暂的休息后,我们将继续完成后续的任务,今日工作情况如下: 小组成员 今日任务 工作时间 李睿琦 网络数据传输应用设计 2 左少辉 主界面功能测试 3 程刚 界面优化学习 4 ...

  6. 软件工程 BUAAMOOC项目Postmortem结果

    设想和目标 1.我们的软件要解决什么问题?是否定义的很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件是基于北航MOOC网站做的Android手机客户端,用于便捷的在学校里通过手机做到随时随地 ...

  7. 第二阶段站立会议alpha版总结

    一.会议过程 在完成第二次冲刺后,Alpha版本最终发布,我们对校园二手交易平台开发过程及产品存在的问题进行了激烈讨论.进行了我们的团队总结会议,会议中每个人先发表了个人对Alpha版开发过程中存在的 ...

  8. hibernate 创建工厂类

    package cn.hibernate; import org.hibernate.SessionFactory; import org.hibernate.cfg.Configuration; / ...

  9. DeepID人脸识别算法之三代

    DeepID人脸识别算法之三代 转载请注明:http://blog.csdn.net/stdcoutzyx/article/details/42091205 DeepID,眼下最强人脸识别算法.已经三 ...

  10. Beta版本冲刺（四）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员:恺琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示组 ...