原生js实现可拖拽效果


Posted in Javascript onFebruary 28, 2017

效果图:

原生js实现可拖拽效果

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>可拖拽特效</title>
 <style type="text/css">
 *{margin: 0;padding: 0;}
 .header{width:100%;height:30px;background:#036663;line-height:30px;color:#fff;text-indent:30px;}
 #demo{width:400px;height:300px;border:solid 5px #eee;box-shadow:0 0 5px #666;position:absolute;top:40%;left:40%;}
 #innerht{height:25px;background:#036663;border-bottom:solid 1px #369;color:#fff;text-indent:10px;cursor:move;}
 #close{float:right;cursor:pointer;}
 </style>
</head>
<body>
<div class="header">注册信息</div>
<div id="demo">
 <div id="innerht">注册信息(可拖拽)<span id="close">【关闭】</span></div>
 <div class="write"></div>
</div>
</body>
<script type="text/javascript">
 (function(window){
 function $(id){
  return document.getElementById(id);
 };
 // 获取对象
 var innerht = $("innerht"),demo = $("demo"),close = $("close");
 // 给innerht绑定鼠标事件
 innerht.onmousedown = function(event){
  // 解决event兼容问题
  var event = event || window.event; 
  // 获取鼠标在页面上坐标
  var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
  var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
  // 获取鼠标在innerht内部的坐标
  var innerX = pageX - demo.offsetLeft;
  var innerY = pageY - demo.offsetTop;
  // 给document绑定鼠标移动事件,防止鼠标快速滑动时滑出innerht
  document.onmousemove = function(event){
  var event = event || window.event;
  // 获取鼠标移动时的坐标
  var moveX = event.pageX || event.clientX + document.documentElement.scrollLeft;
  var moveY = event.pageY || event.clientY + document.documentElement.scrollTop;
  // 鼠标移动时demo的位置坐标
  var demoX = moveX - innerX ;
  var demoY = moveY - innerY ;
  // 鼠标移动时demo的位置坐标
  demo.style.left = demoX + "px";
  demo.style.top = demoY + "px";
  //清除选中文字
       window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  }
 };
 // 鼠标抬起清除拖拽效果
 document.onmouseup = function(){
  document.onmousemove = null ;
 };
   // 点击关闭按钮关闭跟随框
   close.onclick = function(){
   this.parentNode.parentNode.style.display = "none";
   };
 })(window)
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
javascript 面向对象function详解及实例代码
Feb 28 #Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 #Javascript
原生js实现鼠标跟随效果
Feb 28 #Javascript
canvas实现简易的圆环进度条效果
Feb 28 #Javascript
JS实现的tab切换选项卡效果示例
Feb 28 #Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 #Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 #Javascript
You might like
PHP中,文件上传
2006/12/06 PHP
关于php fread()使用技巧
2010/01/22 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JavaScript版代码高亮
2006/06/26 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
js中日期的加减法
2015/05/06 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
简单实现python爬虫功能
2015/12/31 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python文件操作基础流程解析
2020/03/19 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
python 如何对logging日志封装
2020/12/02 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
小学新教师个人总结
2015/02/05 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python