<!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. UVA-10827(前缀和降维)

    题意: 给一个n*n的正方形,第一行和最后一行粘在一块,第一列和最后一列粘在一块,求这个环面上的最大的子矩形; 思路: 直接暴力是O(n^6)的复杂度,可以把前缀和求出来,这样就可以只用枚举四条边界就 ...

  2. 每次rand出来都是41？说好的随机数呢？！

    rand()函数是C++标准函数库提供的随机数生成器,生成0-RAND_MAX之间的一个"伪随机"整数,理论上可以产生的最大数值为2^16-1,即32767. rand()函数不接 ...

  3. BZOJ3355

    3355: [Usaco2004 Jan]有序奶牛 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 37  Solved: 19[Submit][Sta ...

  4. 【HDU 4722】 Good Numbers

    [题目链接] 点击打开链接 [算法] f[i][j]表示第i位,数位和对10取模余j的数的个数 状态转移,计算答案都比较简单,笔者不再赘述 [代码] #include<bits/stdc++.h ...

  5. 【POJ 3468】 A Simple Problem with Integers

    [题目链接] 点击打开链接 [算法] 本题用线段树很容易写,但是,笔者为了练习树状数组,就用树状数组的方法做了一遍 我们不妨引入差分数组c, 则sum(n) = c[1] + (c[1] + c[2] ...

  6. P2946 [USACO09MAR]牛飞盘队Cow Frisbee Team

    题目描述 After Farmer Don took up Frisbee, Farmer John wanted to join in the fun. He wants to form a Fri ...

  7. Ubuntu 16.04 如何使用Samba服务器

    对于Windows与Ubuntu之间的数据传输,我们习惯于使用FTP工具,不过还是有学员问到samba服务器搭建和使用的问题,这便是本文的来由. Ubuntu版本:ARM裸机1期加强版配套的Ubunt ...

  8. iOS---UICollectionView Class Reference---UICollectionView 类参考文档

    UICollectionView 类: Inherits from UIScrollView : UIView : UIResponder : NSObject Conforms to NSCodin ...

  9. EasyUI 扩展自定义EasyUI校验规则 验证规则（常用的）

    $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (value, param) { return /^[\u ...

  10. 简析hotjar录屏功能实现原理

    简析hotjar录屏功能实现原理 众所周知,hotjar中录屏功能是其重要的一个卖点,看着很牛X酷炫的样子,今天就简单的分析一下其可能实现(这里只根据其请求加上个人理解分析,并不代表hotjar中真实 ...