转行学开发，代码100天——2018-04-08

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>修改代码，右边会自动显示结果</title>

<!--适应移动端-->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--css样式-->

<style>

    body{background-color: #EBEBEB}

    #aaa{

        background-color: #CB4F51;

        padding: 10px;

        display: block;

        width:100px;

        height:100px;

        font-size:12px;

        text-align:center;

        line-height:100px;

        overflow:hidden;

        cursor:move;

    }

</style>

<!--引用jquery库-->

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

<h3>这是一个简单的拖拽效果</h3>

<div id="aaa">

    时光，拖着我走!

</div>

<script type="text/javascript">

    $(document).ready(function(){

         var box= document.getElementById("aaa");

         dragMove(box);

         function dragMove(obj){

             obj.onmousedown = function(e){ //鼠标按下事件

                 e = e||window.event;

                 var x_down = e.clientX; //鼠标按下x坐标

                 var y_down = e.clientY; //鼠标按下y坐标

                 var left = this.offsetLeft; //盒子当前的left位置

                 var top = this.offsetTop;   //盒子当前的top位置

               //  alert(x_down+":"+y_down+":"+left+":"+top);

               document.onmousemove = function(e){

                   e = e||window.event;

                   //鼠标移动坐标

                   var x_move = e.clientX;

                   var y_move = e.clientY;

                  //移动距离计算：移动距离=移动的坐标-按下的坐标

                   var x_now = x_move-x_down;

                   var y_now = y_move-y_down;

                   //赋值给box对象

                   obj.style.left = left+x_now+"px";

                   obj.style.top = top+y_now+"px";

               }

               document.onmouseup = function(e){

                   //清除移动和抬起事件

                   this.onmousemove = this.onmouseup = null;

               }

               return false;//阻止默认事件

             }

         }

    });

</script>

</body>

</html>

这样完成代码后，发现并不能出现预期的拖动效果，检查鼠标事件的坐标值也都输出正常，奇怪？！

注：需要移动的元素必须绝地定位！！！

最后查了资料，发现div盒子的css中未设置绝对定位，即position:absolute;
增加该项后，拖动效果出现了。。

    #aaa{

        background-color: #CB4F51;

        padding: 10px;

        display: block;

        width:100px;

        height:100px;

        font-size:12px;

        text-align:center;

        line-height:100px;

        overflow:hidden;

        cursor:move;

        position:absolute;

    }

 
注：需要移动的元素必须绝地定位！！！
注：需要移动的元素必须绝地定位！！！
注：需要移动的元素必须绝地定位！！！

day23—JavaScript实现DIV盒子拖拽（原生方式）的更多相关文章

  1. Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

  2. 第一百三十五节，JavaScript，封装库--拖拽

    JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...

  3. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

  4. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  5. 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  6. 简单的div元素拖拽到div

    drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...

  7. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  8. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  9. javascript小实例，拖拽应用（一）

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

随机推荐

  1. Struts2异常：HTTP Status 404 - There is no Action mapped for action name addBook.

    HTTP Status 404 - There is no Action mapped for action name addBook. 在地址栏进行访问的时候,出现了这个错误信息,导致出现此异常的原 ...

  2. tomcat 端口8080占用问题

    启动tomcat时,有时会出现8080端口占用的问题. 解决方法: 终端:ps -e | grep tomcat 会看到下边的结果 途中标记的是进程号,kill掉即可. kill -9 9734(97 ...

  3. ### Error building SqlSession. ### The error may exist in SQL Mapper Configuration ### Cause: org.apache.ibatis.builder.BuilderException: Error parsing SQL Mapper Configuration. Cause: org.apache.ibat

    这是一个由粗心导致的错误,具体报错如下: org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSessio ...

  4. Lost Cows POJ 2182 思维+巧法

    Lost Cows POJ 2182 思维 题意 是说有n头牛,它们身高不一但是排成了一队,从左到右编号为1到n,现在告诉你从第二号开始前面的那些牛中身高小于它的个数,一共有n-1个数.然后求出它们按 ...

  5. AcWing 802. 区间和

    (https://www.acwing.com/problem/content/804/) 假定有一个无限长的数轴,数轴上每个坐标上的数都是0. 现在,我们首先进行 n 次操作,每次操作将某一位置x上 ...

  6. 7、 正则化(Regularization)

    7.1 过拟合的问题 到现在为止,我们已经学习了几种不同的学习算法,包括线性回归和逻辑回归,它们能够有效地解决许多问题,但是当将它们应用到某些特定的机器学习应用时,会遇到过拟合(over-fittin ...

  7. vi编辑器没有颜色的解决办法

    Centos里的VI只默认安装了vim-minimal-7.x.所以无论是输入vi或者vim查看文件,syntax功能都无法正常启用.因此需要用yum安装另外两个组件:vim-common-7.x和v ...

  8. HTTPS证书转换成PEM格式

    PEM 格式的证书文件(*.pem)一般为以下格式: 注意:PEM 格式证书文件可用 notepad++ 等文本编辑器打开. CER / CRT 格式证书转换为 PEM 格式 对于 CER / CRT ...

  9. MVC项目集成swagger

    1.创建WebAPI项目解决方案 2.使用nuget引入Swashbuckle包 引入Swashbuckle包后App_Start文件夹下会多出一个SwaggerConfig文件 3.添加接口注释 项 ...

  10. 【记录】解决windows中nginx明明退出了，为什么还能反向代理？CMD强制杀死进程命令

    博主今天遇到一个很奇怪的问题,nginx在windows中明明已经退出了,而且在任务管理器中也没发现nginx进程, 为什么还能反向代理呢? 找了半天资料终于解决,现记录如下,希望能帮助到你. 步骤一 ...