JS实现的自定义网页拖动类


Posted in Javascript onNovember 06, 2015

本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考,具体如下:

先来看运行效果截图如下:

JS实现的自定义网页拖动类

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自写的拖动类……</title>
<script type="text/javascript">
var d=document;//给document对象一个通用的事件侦听方法
d.addListener=function(e,f,b){
 this.attachEvent?this.attachEvent('on'+e,f):this.addEventListener(e,f,b);
}
d.removeListener=function(e,f,b){
 this.detachEvent?this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);
}
function $(){//接收一个id参数,返回带有startDrag方法的对象
 var o=document.getElementById(arguments[0]);
 o.addListener=function(e,f,b){
  this.attachEvent?this.attachEvent('on'+e,f):this.addEventListener(e,f,b);
 }
 o.removeListener=function(e,f,b){
  this.detachEvent?this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);
 }
 o.startDrag=function(obj){//参数obj默认为o本身,可以传其它参数以确定要移动的对象
  var obj=obj?obj:o;
  var sx,sy;
  o.style.cursor="move";
  o.addListener("mousedown",function(e){
   e||event;
   if(e.button==1||e.button==0){
    sx=e.clientX-obj.offsetLeft;sy=e.clientY-obj.offsetTop;
    d.addListener("mousemove",move,false);
    d.addListener("mouseup",stopDrag,false);
   }
  },false);
  var stopDrag=function(){
   d.removeListener("mousemove",move,false);
   d.removeListener("mouseup",stopDrag,false);
  }
  var move=function(e){
   e||event;
   window.getSelection ? window.getSelection().removeAllRanges() :
    document.selection.empty();
   if(e.preventDefault)e.preventDefault();//这两句便是解决firefox拖动问题的.
   with (obj.style){
    position="absolute"
    left=e.clientX-sx+"px";
    top=e.clientY-sy+"px";
   }
  }
 }
 return o; 
}
window.onload=function(){$("ok").startDrag($("os"))}//本例中拖动ok元素,移动其父元素
</script>
<style type="text/css">
*{margin:0;padding:0}
#ok{width:215px;height:170px;background:url(images/sample1.gif)}
#os{width:400px;height:300px;background:#09f;left:300px}
#os2{width:400px;height:300px;background:#f90;}
</style>
</head>
<body>
<div id="os"><p id="ok"></p></div>
<div id="os2"></div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 #Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 #Javascript
javascript中的altKey 和 Event属性大全
Nov 06 #Javascript
JS日期加减,日期运算代码
Nov 05 #Javascript
程序员必知35个jQuery 代码片段
Nov 05 #Javascript
js如何实现淡入淡出效果
Nov 18 #Javascript
JavaScript数组去重的五种方法
Nov 05 #Javascript
You might like
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
webpack4实现不同的导出类型
2019/04/09 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python 序列的方法总结
2016/10/18 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python如何生成网页验证码
2018/07/28 Python
Python 判断奇数偶数的方法
2018/12/20 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
一套.net面试题及答案
2016/11/02 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
房产转让协议书
2014/04/11 职场文书
医院合作协议书
2014/08/19 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2015年教学管理工作总结
2015/05/20 职场文书