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的设计模式
Nov 22 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
javascript中的with语句学习笔记及用法
Feb 17 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数字游戏 计算24算法
2012/06/10 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
学习vue.js计算属性
2016/12/03 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
Python实现可自定义大小的截屏功能
2018/01/20 Python
详解python3中tkinter知识点
2018/06/21 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python实现三次样条插值
2018/12/17 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
学校司机岗位职责
2013/11/14 职场文书
高中生的自我评价
2014/03/04 职场文书
医德医风自我评价
2014/09/19 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
安全教育观后感
2015/06/17 职场文书