<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. Svn 提示错误：previous operation has not finished 解决方案

    svn提交遇到恶心的问题,可能是因为上次cleanup中断后,进入死循环了. 解决方案: 找到你项目的.svn文件,查看是否存在wc.db 网上下载SQLite Expert工具,手动打开wc.db, ...

  2. nodejs安装及npm模块插件安装路径配置

    在学习完js后,我们就要进入nodejs的学习,因此就必须配置nodejs和npm的属性了. 我相信,个别人在安装时会遇到这样那样的问题,看着同学都已装好,难免会焦虑起来.于是就开始上网查找解决方案, ...

  3. CocoStuff—基于Deeplab训练数据的标定工具【二、用已提供的标注数据跑通项目】

    一.说明 本文为系列博客第二篇,主要讲述笔者在使用该团队提供已经标注好的COCO数据集进行训练的过程. 由于在windows中编译Caffe和Deeplab特别的麻烦,笔者并没有去探索,后续可能会去尝 ...

  4. 升级framework4.0后form认证票据失效的问题

    好久没来了,密码都差点忘了,顺便记录下今天配置环境碰到的小问题 网站使用的form authentication做SSO登录,登录域名使用的framework20配置环境 一个栏目升级为4.0环境后, ...

  5. Linux内核分析-两种方式使用同一个系统调用

    实验部分 根据系统调用表,选取一个系统调用.我选得是mkdir这个系统调用,其系统调用号为39,即0x27 由于mkdir函数的原型为 int mkdir (const char *filename, ...

  6. Linux第一周学习总结——计算机是如何工作的

    第一周学习总结--计算机是如何工作的 作者:刘浩晨 一.存储程序计算机工作模型 冯诺依曼体系结构:核心思想为存储程序计算机.两个层面: (1)硬件的角度(计算机主板):一个CPU,一块内存,之间有总线 ...

  7. someday团队Postmortem（事后诸葛亮会议）

    一.会议相关介绍: 时间:2018年1月12日 地点:第九实验楼五楼机房 参会人员:someday团队全体成员 二.每个成员在beta阶段的实践和alpha阶段有何改进? (一)设想和目标: 我们的软 ...

  8. 小组成员的github地址

    袁颖https://github.com/joanyy/test 魏晓 https://github.com/weixiaohaobaobao/test 张晓磊 https://github.com/ ...

  9. java 面试 心得

    16. ArrayList list = new ArrayList(20);中的list扩充几次() A 0     B 1     C 2      D 3 答案:A 解析:这里有点迷惑人,大家都 ...

  10. 作业6--四则运算APP之Sprint计划

    1.现状 小组成员各就各位,理顺计划思路,制定工作计划. 2.部分需求索引卡 第一个阶段没有具体功能的实现. 3.任务认领 产品负责人:王宏财 Master:陈思明 项目开发成员:许佳豪.吴旭涛 4. ...