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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
vue视频播放暂停代码
Nov 08 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
小程序实现录音上传功能
Nov 22 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
用JS实现的一个include函数
2007/07/21 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python中的time模块与datetime模块用法总结
2016/06/30 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python全栈知识点总结
2019/07/01 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
简单说下OSPF的操作过程
2014/08/13 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
买房委托公证书
2014/04/08 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
批评与自我批评范文
2014/10/15 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
OpenCV-Python实现轮廓拟合
2021/06/08 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技