转行学开发,代码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. 第四周课程总结&试验报告

    实验二 Java简单类与对象 实验目的 掌握类的定义,熟悉属性.构造函数.方法的作用,掌握用类作为类型声明变量和方法返回值: 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实例的方法和属性 ...

  2. document.domain location.hostname location.host

    document.domain    location.hostname     location.host   :https://www.cnblogs.com/shd-study/p/103031 ...

  3. python 二维数组转一维数组

    三种方法 比如 a = [[1, 2], [3, 4], [5, 6]] 列表推导式 [i for j in a for i in j] 库函数 from itertools import chain ...

  4. Dubbo一文入门

    一.简介 系统的架构,已从最早的单体式架构(一个war包完事)逐渐发展到目前的微服务式架构.微服务,将一个大型的复杂的应用系统,拆分成若干独立的松耦合的小的服务工程,每个服务工程可独立部署,每个服务只 ...

  5. 从后台看python--为什么说python是慢的

    python越来越作为一种科学技术研究的语言越来越流行,可是我们经常听到一个问题,python是慢的.那么我们从后台分析一下,为什么python是慢的. python是一种动态类型,解释型语言,它的值 ...

  6. vue项目中使用高德地图(根据坐标定位点)

    前言 项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码 正文 <script> var map,marker; export default { data(){ retu ...

  7. centos7.4安装mysql

    yum -y install mysql mysql-server mysql-devel mysql-server报错:No package mysql-server available,另外两个没 ...

  8. atomic,nonatomic

    atomic和nonatomic用来决定编译器生成的getter和setter是否为原子操作.         atomic 设置成员变量的@property属性时,默认为atomic,提供多线程安全 ...

  9. 1-基于Xilinx XCKU115的半高PCIe x8 硬件加速卡

    基于Xilinx XCKU115的半高PCIe x8 硬件加速卡 一.概述 本板卡系我公司自主研发,采用Xilinx公司的XCKU115-3-FLVF1924-E芯片作为主处理器,主要用于FPGA硬件 ...

  10. 使用Varnish加速Web

    通过配置Varnish缓存服务器,实现如下目标: - 使用Varnish加速后端Web服务 - 代理服务器可以将远程的Web服务器页面缓存在本地 - 远程Web服务器对客户端用户是透明的 - 利用缓存 ...