<!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. 老毛桃U盘启动盘，通过ghost创建xp系统蓝屏问题

    新买的东芝笔记本只预安装了dos,找来一个老毛桃U盘启动盘,进入winpe用ghost恢复成xp系统:重启后,系统蓝屏,提示的主要报错代码 0x0000007B 与 要求“chkdsk /f”处理. ...

  2. HTTPS站点搭建教程：Win7/Windows Server 2008R2

    本文将由笔者为各位读者介绍在win7/windows server 2008R2环境下使用SSL加密协议建立WWW站点的全过程:https SSL证书安装的搭建以及本地测试环境. 要想成功架设SSL安 ...

  3. 并不对劲的p4449于神之怒加强版

    题目大意 给定\(t,k(t\leq2000,k\leq5*10^6)\) \(t\)组询问,每组给出\(n,m(n,m\leq5*10^6)\)求$\sum_{i=1}^n \sum_{j=1}^m ...

  4. Java throw与throws

    以前虽然知道一些异常的处理,也用过一些,但是对throw和throws区别还是有不太清楚.今天用实例测试一下. 异常处理机制 异常处理是对可能出现的异常进行处理,以防止程序遇到异常时被卡死,处于一直等 ...

  5. margin-----总结----解析逻辑

    margin的解析逻辑 在 margin 中 top.right.bottom.left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和botto ...

  6. NYOJ1——A+B Problem NYOJ2——括号配对问题

    A+B Problem 时间限制:3000 ms  |  内存限制:65535 KB 难度:0   描述:此题为练手用题,请大家计算一下a+b的值  输入:输入两个数,a,b 输出:输出a+b的值 样 ...

  7. AndroidStudio中添加依赖的三种方式以及如何引入so文件和arr文件

    AndroidStudio中添加依赖的三个选项,如图:    分别为:库依赖(Library dependency).文件依赖(File dependency)和module依赖(Module dep ...

  8. 51nod 1095【映射】

    思路: 利用一个map记录初始的,利用一个map记录排序后的. #include <bits/stdc++.h> using namespace std; map<string,in ...

  9. 51nod 1433【数学】

    思路: 不晓得阿,n%9==0即n数值各个位加起来要%9==0: 如果知道这个,那么%90==0就是末尾多个0就好了,那么后面就是随便搞吧: #include <stdio.h> #inc ...

  10. 二分图最大匹配初探 By cellur925

    一.什么是二分图 首先它需要是一张无向图. 之后它需要同时满足两个条件:①它的N个点被分为两个集合,且这两个集合交集为空:②同一集合内的点之间没有边相连. 二.无向图是否为二分图的判定 引理:无向图是 ...