<!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. Vim Vundle YouCompleteMe

    /************************************************************************************** * Vim Vundle ...

  2. Educational Codeforces Round 23

    A题 分析:注意两个点之间的倍数差,若为偶数则为YES,否则为NO #include "iostream" #include "cstdio" #include ...

  3. fastText入门

    简介fastText是Facebook AI Research在2016年提出的文本分类和词训练的工具.它最大的特点:模型非常简单,训练速度快,并且能够达到与深度学习旗鼓相当的精度. 最近在做一个给微 ...

  4. 使用strtok_s函数从一个字符串中分离出单词

    下面的代码从含有多个结束符的字符串中分离出单词来,需要对strtok_s有清楚的认识.这段代码是我在写一个处理文件中单词个数时用来分离读取到的字符串中的单词时写的,亲测可用~ 1 2 3 4 5 6 ...

  5. 数据库备份脚本.sh

    #!/bin/bash #auto bakcup mysql db BAK_DIR=/data/backup/mysql/`date +%Y-%m-%d` MYSQL_DB=数据库名 MYSQL_PW ...

  6. 我的Android笔记（十）—— ProgressDialog的简单应用，等待提示 （转载）

    转自:http://blog.csdn.net/barryhappy/article/details/7376231 在应用中经常会用到一些费时的操作,需要用户进行等待,比如加载网页内容…… 这时候就 ...

  7. lightoj1200 【完全背包】

    题意: 有一个能放W重的袋子,然后妻子给了老公一列清单,每个item会有价格,数量,重量. 首先得满足老婆的要求,然后在可装的地方输出最大还能拿多少使得拿的东西的钱最多. 注意标题是thief,我想大 ...

  8. 第十四篇 .NET高级技术之反射

    两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的生理情况.这是如何做到的呢?B超是B型超声波,它可以透过肚皮通过向你体内发射B型超声波,当超声波遇到内脏壁的时 ...

  9. 阿里云服务器及部署mysql

    可通过百度获取内容不再赘述. 远程连接: 远程连接阿里云服务器需在服务器上开放443端口,方法自行百度 win10通过系统自带远程连接服务连接时需安装凭据:   http://blog.csdn.ne ...

  10. AForge.net简介和认识

    AForge.NET是一个专门为开发者和研究者基于C#框架设计的,他包括计算机视觉与人工智能,图像处理,神经网络,遗传算法,机器学习,模糊系统,机器人控制等领域.这个框架由一系列的类库组成.主要包括有 ...