原生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 相关文章推荐
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
jQuery操作之效果详解
May 19 jQuery
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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用正则表达式匹配中文实例详解
2013/11/06 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
javascript中this指向详解
2016/04/23 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
浅析Python中的多条件排序实现
2016/06/07 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
基于pip install django失败时的解决方法
2018/06/12 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python Django 创建应用过程图示详解
2019/07/29 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
品牌转让协议书
2014/08/20 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
获奖感言一句话
2015/07/31 职场文书