day23—JavaScript实现DIV盒子拖拽（原生方式）
转行学开发，代码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>
这样完成代码后，发现并不能出现预期的拖动效果，检查鼠标事件的坐标值也都输出正常，奇怪？！
注：需要移动的元素必须绝地定位！！！
#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盒子拖拽（原生方式）的更多相关文章
- Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）
本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...
- 第一百三十五节，JavaScript，封装库--拖拽
JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...
- JS实现多Div模块拖拽功能
空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...
- 简单的div元素拖拽到div
drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- JavaScript小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- javascript小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
随机推荐
- [Python3 填坑] 017 实例方法、静态方法、类方法的区别
目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 先上例子 2.2 分析 1. print( 坑的信息 ) 挖坑时间:2019/04/07 明细 坑的编码 内容 Py024-1 实例方法 ...
- Makefile project
1 Makefile里出现IDF_PATH,所以要在工程属性里的environment环境变量添加IDF_PATH,对其解释,指出路径. 2 项目中用了shell文本,如果用Python 语言,要确 ...
- Java 类在 Tomcat 中是如何加载的？
作者 :xingoo https://www.cnblogs.com/xing901022/p/4574961.html 说到本篇的Tomcat类加载机制,不得不说翻译学习Tomcat的初衷. 之前实 ...
- [BZOJ2588]Count on a tree(LCA+主席树)
题面 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个询问 ...
- Appium+Python之元素定位和操作
一.常用识别元素的工具 uiautomatorviewer:Android SDK自带的一个工具,在tools目录下 二.元素定位 1.格式:find_element_by_定位方式(va ...
- POJ-2528 Mayor's posters (离散化， 线段树)
题目传送门: POJ-2528 题意就是在一个高度固定的墙面上贴高度相同宽度不同的海报,问贴到最后还能看到几张?本质上是线段树区间更新问题,但是要注意的是题中所给数据范围庞大,直接搞肯定会搞出问题,所 ...
- SCAU 2015 GDCPC team_training0
A.题目:http://acm.timus.ru/problem.aspx?space=1&num=2024 题意:求一个包含K个不同字符的集合的最大长度,还有组成这个长度的集合的个数 做法: ...
- Knight Moves （双向bfs）
# 10028. 「一本通 1.4 例 3」Knight Moves [题目描述] 编写一个程序,计算一个骑士从棋盘上的一个格子到另一个格子所需的最小步数.骑士一步可以移动到的位置由下图给出. [算法 ...
- python学习第四十四天斐波那契数列和yield关键词使用
斐波那契数列是数学中的常见的算法,第一个第二个不算,从第三个开始,每个数的都是前面两个数的和,使用yield关键词把生成的数列保存起来,调用的时候再调用,下面举例说明一下 def fab(max): ...
- Form表单组件验证
第一版:最基本版本 views源码 #——————————————————————form验证—————————————— from django import forms from django.f ...