<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. MYSQL数据库封装类

    <?phpclass DBDA{    public $host="localhost";    public $uid="root";    publi ...

  2. LeetCode 551. Student Attendance Record I (C++)

    题目: You are given a string representing an attendance record for a student. The record only contains ...

  3. 冲刺Two之站立会议2

    今天我们进行了主界面部分的设置,因为它包含的部分有很多,所以就只能它拆分进行一一突破.今天主要完成了主界面的框架搭建,以及添加了需要的按钮,包括好友管理,退出登录,开启聊天通信界面的内容等.

  4. A brief introduction of myself

    来到博客园的第二天.晚上天色墨蓝,余热未退,北京这里的秋风干松爽利,和小组的伙伴们吃了一顿饱饱的香锅,按照咱们国人的传统,所有的事情在饭桌上都解决了,包括队员之间相互的认识和短期任务的分配以及后期的团 ...

  5. Mybatis：Eclipse引入dtd约束文件使得xml文件有提示

    https://blog.csdn.net/lsx2017/article/details/82558135

  6. 这个C#程序真了不起

    (1)在2~31中,这个数不能且仅不能被两个相邻数整除 (2)2 123 581 660 200 (2,3,4,5,6,7,8,9,10,11,12,13,14,15,18,19,20,21,22,2 ...

  7. Spring之IOC实现原理

  8. .net mvc ajax 上传文件

    1.前端 <div> <input type="file" id="upfile" /> <button type="b ...

  9. http——解读梳理

    (1)在客户端与服务器建立准确连接传输之前,先讲一讲三次握手 第一次握手:建立连接时,客户端发送syn包[同步序列编号(Synchronize Sequence Numbers).是TCP/IP建立连 ...

  10. Luogu4783 【模板】矩阵求逆（高斯消元）

    对矩阵进行高斯消元直至消为单位矩阵,并在另一个单位矩阵上对其做同样的操作即可. 模意义下的高斯消元可以直接计算系数来避免整行的辗转相除. 还不知道有什么用. #include<iostream& ...