<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

    <style>

       #div1 {

           height:100px;

           width:100px;

           background-color:#0094ff;

           position:absolute;

        }

    </style>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

    <script>

       var  div1 = document.getElementById("div1");

       var  div2 = document.getElementById("div2");

       div1.onmousedown=function(e) {

            var er=e||event;

            var disx=er.offsetX;

            var disy = er.offsetY;

           div1.onmousemove=function(e1) {

                var er1 = e1 || event;

                var x = er1.clientX - disx;

                var y = er1.clientY - disy;

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

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

           }

       }

       div1.onmouseup = function () {

           div1.onmousemove = null;

       }

    </script>

</body>

</html>

跟随鼠标指针跑的div拖拽效果的更多相关文章

  1. div拖拽效果 JQuery

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  2. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  3. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  4. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  5. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  6. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  7. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  8. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

  9. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 一步一步学Silverlight 2系列（32）：图形图像综合实例—“功夫之王”剧照播放

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  2. CentOS 7中ip命令将逐渐取代 ifconfig

    首先看下图: 要安装ip,请点击这里下载iproute2套装工具 .不过,大多数Linux发行版已经预装了iproute2工具. 你也可以使用git命令来下载最新源代码来编译: $ git clone ...

  3. 安装程序工具 (Installutil.exe)22

    网址:https://msdn.microsoft.com/zh-cn/library/50614e95(VS.80).aspx  安装程序工具 (Installutil.exe) .NET Fram ...

  4. Linux 命令行命令及参数辨异

    1. 软链接与硬链接 ln -s 源文件 目标文件 当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我们只要在某个固定的目录,放上该文件,然后在其它的目 ...

  5. OpenCV——PS滤镜算法之 Ellipsoid (凹陷)

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  6. 线段树之成段更新（ 需要用到延迟标记,简单来说就是每次更新的时候不要更新到底,用延迟标记使得更新延迟到下次需要更新or询问到的时候）

    HDU  1698 链接:  http://acm.hdu.edu.cn/showproblem.php?pid=1698 线段树功能:update:成段替换 (由于只query一次总区间,所以可以直 ...

  7. ES6 模板编译

    顾名思义,就是用反引号编写一个模板字符串, 用echo将模板转为javascrip表达式字符串, 用正则将基础字符串转为想要字符串 将代码封装在函数中返回: 注: 用到es6属性${} var tem ...

  8. 基于active状态类名的web交互开发

    demo: 默认是这样的: 当我们点击更多按钮后,会以CSS3动画的方式展开剩余所有文字信息,如下动图: 下面我们看下关键的CSS代码,这个.active是如何自身无样式的: .box { max-h ...

  9. NOI前总结：点分治

    点分治: 点分治的题目基本一样,都是路径计数. 其复杂度的保证是依靠 $O(n)$ 找重心的,每一次至少将问题规模减小为原先的$1/2$. 找重心我喜欢$BFS$防止爆栈. int Root(int ...

  10. CF 8D two friends

    独立想的好开心呀(然而是一道水题). 可以看出这道题的答案是满足单调性的,然后可以考虑二分. 对于当前二分出的mid值,我们考虑这个过程. 假设他们能共同走到shop然后共同会home $$Ans = ...