原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
height:1200px;
background-color: azure;
}
#drag{
background-color: cornflowerblue;
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="drag"> </div>
<script>
//加入文字之后拖拽容易出现选中字后跳动bug
var drag = document.getElementById("drag"),
text = document.createTextNode("0"),
flag ,
time =0;
drag.appendChild(text);
drag.addEventListener("mousedown",dragDiv,false);
function dragDiv(e){
flag = true;
if(flag){
var handler = setInterval(function(){
time+=0.02;
drag.innerHTML =time.toFixed(2); if(!flag){
clearInterval(handler);
}
},20)
} var x=e.layerX||e.offsetX;
var y=e.layerY||e.offsetY;
document.addEventListener("mousemove",docMove,false);
document.addEventListener("mouseup",function(){
flag = false;
},false);
function docMove(e){
if(flag){
e.preventDefault;
var l =parseInt(drag.style.left);
var t =parseInt(drag.style.top);
drag.style.left = -x+e.pageX+"px";
drag.style.top = -y+e.pageY +"px"; }
}
}
</script>
</body>
</html>
原生js实现div拖拽+按下鼠标计时的更多相关文章
- 原生js实现div拖拽
十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- 好玩的原生js的简单拖拽
这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...
- 原生JS实现图片拖拽移动与缩放
看一下最终效果,图片可以拖动,可以缩放 把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去left和top值,移动的时候获取位置减去初始的值就得到移动的时候的lef ...
- 实现Div拖拽
直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...
- 运用DIV拖拽实现resize和碰撞检测
运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...
- 案例：简易的Div拖拽
案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...
- html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
随机推荐
- 第四篇：Spark SQL Catalyst源码分析之TreeNode Library
/** Spark SQL源码分析系列文章*/ 前几篇文章介绍了Spark SQL的Catalyst的核心运行流程.SqlParser,和Analyzer,本来打算直接写Optimizer的,但是发现 ...
- 2017 ACM/ICPC Asia 南宁区 L The Heaviest Non-decreasing Subsequence Problem
2017-09-24 20:15:22 writer:pprp 题目链接:https://nanti.jisuanke.com/t/17319 题意:给你一串数,给你一个处理方法,确定出这串数的权值, ...
- close与shutdown系统调用
使用多线程时,pthread_create的参数flag有CLONE_FILES, 最终调用do_fork(),并且会根据CLONE_FILES标志来调用copy_files()来共享父进程中的文件描 ...
- 检签 sub sup应用
<html> <body> <b>This text is bold</b> <br /> <strong>This text ...
- photoshop cc下载与安装
地址:https://jingyan.baidu.com/article/c275f6bacdd927e33d756729.html
- R-模式（mode）和类(class)
数据模式:mode函数显示任何对象的模式.常见的单个的对象模式是逻辑型(Logical).数值型(Numeric).字符型(Character). 常用到的数据模式是列表(list). 逻辑型:TRU ...
- DSP基础学习-ADC采样
DSP基础学习-ADC采样 彭会锋 2015-04-27 22:30:03 在查看ADC采样例程的时候我发现了下面的代码挺有意思的 EALLOW; GpioCtrlRegs.GPAMUX2.bit.G ...
- linux-Centos7安装nginx
首先配置linux环境,我这里是刚刚装好linux,所以一次性安装了一系列我需要到的环境: yum install pcre pcre-devel zlib zlib-devel openssl op ...
- 11g手动打补丁
在两个节点上,分别以oracle用户执行,停止资源 节点一: srvctl stop home -o /app/oracle/11g -s /home/oracle/s1 -n 11grac75 节 ...
- How to create Oracle ASM devices using device-mapper multipath devices in Red Hat Enterprise Linux 6
How to create Oracle ASM devices using device-mapper multipath devices in Red Hat Enterprise Linux 6 ...