<!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. codeforces 690C1 C1. Brain Network (easy)(水题)

    题目链接: C1. Brain Network (easy) time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  2. 并不对劲的bzoj4650:loj2083:uoj219:p1117:[NOI2016]优秀的拆分

    题目大意 "优秀的拆分"指将一个字符串拆分成AABB的形式 十次询问,每次给出一个字符串S(\(|S|\leq3*10^4\)),求它的所有子串的优秀的拆分的方案数之和 题解 此题 ...

  3. [Java] public, private, protected

      同包不同类的成员 不同包中子类的成员 不同包非子类的成员 public √ √ √ protected √ √ × 默认 √ × × private × × ×

  4. 喵哈哈村的魔法考试 Round #1 (Div.2)

    比赛地址:http://qscoj.cn/contest/2/ 都是中文题,这里不在详述题意 A.喵哈哈村的魔法石 分析:暴力求解 #include<iostream> #include& ...

  5. 哈希表的C实现（一）

    哈希表(Hash table,也叫散列表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.具体的介绍网上有很详 ...

  6. Android应用开发完全退出程序的通用方法

    在开发一个android应用时,有可能有N个Activity,而在每个Activity里的菜单里有个"退出程序"菜单,这里就要完全退出程序了,所以今天给大家分享的是Android应 ...

  7. .NETFramework：HttpRuntime

    ylbtech-.NETFramework:HttpRuntime 1.返回顶部 1. #region 程序集 System.Web, Version=4.0.0.0, Culture=neutral ...

  8. Spring Boot与Spring Session集成

    1. 参考资料 https://docs.spring.io/spring-session/docs/current/reference/html5/guides/boot-redis.html ht ...

  9. c++中.c_str和.c_data

    1 关于.c_str的用法: const char *c_str(); 这个数组的数据是临时的,当有一个改变这些数据的成员函数被调用后,其中的数据就会失效.因此要么现用先转换,要么把它的数据复制到用户 ...

  10. Linux 命令 -- tar

    tar 命令 tar命令可以为linux的文件和目录创建档案.利用tar,可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向档案中加入新的文件.tar最初被用来在磁带上创建档案,现 ...