JavaScript实现拖拽盒子效果


Posted in Javascript onFebruary 06, 2020

本文实例为大家分享了JavaScript实现拖拽盒子效果的具体代码,供大家参考,具体内容如下

实现效果:

1.单击关闭,关闭盒子
2.点击左上方‘点击注册',打开盒子
3.鼠标放在盒子上方蓝色区域显示十字
4.点击鼠标不松开就可移动盒子
5.松开鼠标图片暂停

JavaScript实现拖拽盒子效果

实现步骤:

1.在页面最上方设置一个盒子,里面有一个超链接,超链接里面设置href="javascript:void(0);",再点击时不打开网页。

2.再设置一个可以拖拽的盒子,盒子嵌套一个蓝色盒子为的最上方的蓝色区域,蓝色盒子里面两个span标签,里面写‘关闭'和‘可拖拽'。

3.给‘关闭'的盒子注册点击事件,点击后,拖拽盒子样式为none,(不显示)
给最上方的超链接设置点击事件,点击后,拖拽盒子样式为block,(显示)  

4.给上方蓝色盒子设置onmousedown(鼠标点击事件),同时获取鼠标点击位置
离拖拽盒子的距离,为mouseLeft和mouseTop

5.给页面(document)设置onmousemove事件让鼠标的位置分别减去mouseLeft和mouseTop,得到盒子左上角随鼠标移动的坐标,再将坐标赋值给拖拽盒子

6.最后设置onmouseup事件,鼠标松开时页面不移动。即document.onmousemove = null

实现细节:

1.让拖拽盒子居中显示:top:50%;  left: 50%; 
       margin-left :-155px;  margin-top:-155px;
      ( margin-left: -(盒子宽度的一半); 这里盒子宽度300px边框为5px,总宽度310px,
      所以设置-155px, margin-top:-(盒子高度的一半),和宽度同理)

2.var evt = event || window.event;兼容性写法。

代码:

<!DOCTYPE html>
<html>
<head>
 <title>拖拽盒子</title>
 <style type="text/css">
 *{
 margin:0px;
 padding:0px;
 }
 .dropBox{
 width:300px;
 height:300px;
  top:50%;
  left:50%;
  margin-left: -155px;
  margin-top: -155px;
  display: block;
 border: 5px solid #aaa;
 position: absolute;
 }

 .nav{
 width: 100%;
 height:30px;
 background-color: blue;
 opacity: 0.6;
 }
 .nav a{
 font-size:15px;
 color:white;
 }
 .dropBox .box{
 width:300px;
 height:30px;
 position: absolute;
 left:0px;
 top:0px;
 background-color: darkblue;
 opacity: 0.8;
 cursor:move;
 }
 .close{
 float: right;
 color:white;
 font-size: 15px;
 cursor: pointer;
 }
 .move{
 color:white;
 font-size: 15px;
 }
 </style>
 <script type="text/javascript">
 function $(id){
 return document.getElementById(id);
 }
 window.onload = function(){
 var register = $('register');
 var dropBox = $('dropDiv');
 var box = $('box');
 var box2 = $('box2');
 box2.onclick = function(){
  dropBox.style.display = 'none';
 }
 register.onclick = function(){
  dropBox.style.display = 'block';
 }
  box.onmousedown = function(event){
  var evt = event || window.event;
  var mouseLeft = evt.clientX - dropBox.offsetLeft;
  var mouseTop = evt.clientY - dropBox.offsetTop;
  document.onmousemove = function(event){
  var evt = event || window.event;
  var x = evt.clientX - mouseLeft;
  var y = evt.clientY - mouseTop;
  dropBox.style.left = x + 155 + 'px';
  dropBox.style.top = y + 155 + 'px';
  }
  document.onmouseup = function (){
 document.onmousemove = null;
  }
  }

 }



 </script>
</head>
<body>
 <div class="nav">
 <a href="javascript:void(0);" id="register">点击注册</a>
 </div>
 <div class="dropBox" id="dropDiv">
 <div class="box" id="box">
 <span class="move">注册信息(可以拖拽)</span>
 <span class="close" id="box2">【关闭】</span>
 </div>
 
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript StringBuilder类实现
Dec 22 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
详解webpack 多入口配置
Jun 16 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 #Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 #Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 #Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 #Javascript
js get和post请求实现代码解析
Feb 06 #Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 #Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
PHP云打印类完整示例
2016/10/15 PHP
php事件驱动化设计详解
2016/11/10 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
js显示文本框提示文字的方法
2015/05/07 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
交通事故死亡赔偿协议书
2014/12/03 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js