html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下
想要让整个元素移动需要三个事件:
鼠标按下 onmousedown
鼠标移动 onmousemove
鼠标抬起 onmouseup
html
关闭
用户名:
登录密码:
JS
var login = document.querySelector('.login');//获取整个弹框的内容
var title = document.querySelector('#title');
title.addEventListener('mousedown',function(e){
//当按下鼠标的时候,获取到鼠标在拖拽盒子内的坐标
//鼠标在页面的坐标 - 大盒子距离浏览器左侧的距离
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
//鼠标移动
document.addEventListener('mousemove',move);
function move(e){
//拖拽的盒子定位=鼠标在页面的坐标 - 鼠标在拖拽盒子的坐标
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
//当鼠标抬起的时候,将移动事件删除
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
})
})
CSS部分
*{
padding: 0px;
margin: 0px;
}
.login {
display: block;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持炫H5(xyhtml5.com)。
html5 原生拖拽,原生JS实现拖拽效果相关推荐
- html5 图片局部马赛克,javascript - JS实现马赛克图片效果完整示例
主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS实现马赛克图片效 ...
- html5+实现图片自动切换,js图片自动切换效果处理代码
var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; ar ...
- 原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
- 原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
- 原生JS实现拖拽垂直进度条
先看效果图 代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
- 原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
- html矢量图 对画布的拖拽,原生WebGL如何使用鼠标拖拽画布?
如图,我在实现鼠标拖拽画布这个功能时拖拽动作非常不平滑,请问有没有更好的方式用原生WebGL来实现鼠标拖拽画布功能? 拖拽部分代码:gl.canvas.onmousedown = function ( ...
- js实现拖拽+碰撞+重力
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 李炎恢 js教程 拖拽上 思路解析
李炎恢再讲js教程 拖拽上 讲到一个登录框,通过鼠标移动登录框到浏览器各个地方,我们现在对李炎恢的怎么想出进行分析: 问题期望是什么? 1.我们通过鼠标点击登录框,然后登录框被移动,松开鼠标,停止移动 ...
最新文章
- hung-yi lee_p22_无监督学习:词嵌入
- 分布式信息采集服务器,Plumber分布式数据采集系统(一)架构与监控心跳
- 开发日记-20190603 关键词 读书笔记《鸟哥的Linux私房菜-基础学习篇》
- 【计算理论】计算复杂性 ( 证明 非确定性图灵机 与 确定性图灵机 的时间复杂度 之间的指数关系 )
- WPF游戏,使用move游戏开发
- Java JUC工具类--ForkJoin
- php实战第二十五天
- c 怎么配置oracle,cjdbc入门配置oracle
- java 爬 维基百科_爬取维基百科词条
- 5.卷1(套接字联网API)---TCP客户/服务器程序示例
- 论文笔记_S2D.64_2021_MonoRec_动态环境下单目移动相机的半监督稠密重建
- 数字逻辑复习总结(超全!内含例题!)
- GAPS-银行综合前置系统
- python结课总结_Python课程学习总结
- 陈年再创业:B2C必须标准化 VANCL只做男装
- Java JDK8/JAVA8以及后版本收费后还能用吗
- 以stc15w408as为核心,基于gsm的红外报警技术报告
- 向大家推荐Ubuntu下九大最佳绘图程序
- 什么是迭代器(Iterator)
- python获取当日凌晨时间戳
热门文章
- 伸缩杆怎么缩回去图解_没有阳台怎么晾衣服?这10个神器,让家里衣物晾晒更轻松方便...
- 安卓逆向_15( 三 ) --- Android NDK 开发【 jni 静态注册、JNI_OnLoad 动态注册】
- Spring Data JPA 从入门到精通~Auditing及其事件详解
- 带暂停功能的音频播放代码参考
- Strut2中单元测试实例
- html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像
- oracle转换请求无法实施,Oracle服务正常,但不响应请求的问题
- 通讯接口应用笔记3:使用W5500实现Modbus TCP服务器
- 外设驱动库开发笔记1:AD56xx系列DAC驱动
- 砥志研思SVM(一) 最优间隔分类器问题(上):硬间隔SVM