<!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. SPOJ：Lexicographically Smallest（并查集&排序）

    Taplu and Abhishar loved playing scrabble. One day they thought of inventing a new game using alphab ...

  2. table中tr或者td的点击事件

    直接把时间添加到table或者tbody上,只有下面的tr或者td才能促发事件,通过e.target可以获得当前点击tr或者td,这样就可以进行查询或者删除操作了 如果是删除,直接e.target.r ...

  3. 如何下载WDK

    随着Windows Vista和Windows Server 2008的相继发布,微软的驱动开发工具也进行了相应的更新换代.原来的驱动开发工具包叫做DDK(Driver Develpment Kit) ...

  4. CSS counter计数器(content目录序号自动递增)详解

    一.CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的.于是,就有了,“计数器↔伪元素↔content属 ...

  5. mfc实现对话框全屏置顶显示

    一.MFC让对话框窗口始终在最前 方法一:在对话框的属性中,把SystemModal设置为True. 二.全屏显示 在CDialog7::OnInitDialog()中加入: 先取得分辨率, int ...

  6. CodeForces - 504A && CodeForces - 624C && CodeForces - 2B

    Points 1. 关键要看到以度数为1的点作为突破口. 2. 关键是发现两者不同只能是a-c,而剩余的点必须为b 3. 注意0的情况.

  7. emacs配置文件的基础知识 （转载）

    转自:http://blog.csdn.net/schumyxp/article/details/2278268 emacs的配置文件,叫作.emacs,是个隐藏文件,存在于当前用户的根目录下面,也就 ...

  8. 51nod 1596 搬货物(二进制处理）

    传送门 题意 分析 只要从小到大二进制处理即可 我一直遍历了1->n,应该是0->1e6+1000 果然智障 trick 代码 #include<cstdio> #includ ...

  9. POJ1276【多重背包】

    题意: 给出一个价值sum,然后给出n,代表n个方案,接着n对代表个数与价值,要求最接近sum,但不超过sum的价值. 思路: 多重背包,利用二进制拆分达到保证对于0..n间的每一个整数,均可以用若干 ...

  10. python之yaml模块和ddt模块

    aml文件是专门用来写配置文件的语言,非常简洁和强大,远比json格式方便. 在PC中新建一个yml/yaml为为缩略名的文件,输入信息见下图 新建一个py文件处理yml文件,直接处理成字典格式 缩进 ...