您的位置：首页 > 编程技术 > js  >  JS实现的自定义网页拖动类

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

 更新时间：2015年11月8日 20:27  点击：1760

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

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

在线演示地址如下：

http://demo.jb51.net/js/2015/js-zdy-web-drug-pic-style-codes/

具体代码如下：

<!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程序设计有所帮助。

[!--infotagslink--]

相关文章

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • C#创建自定义控件及添加自定义属性和事件使用实例详解

    这篇文章主要给大家介绍了关于C#创建自定义控件及添加自定义属性和事件使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用C#具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-06-25

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：这是一款自定义的简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学...2015-11-08

  • android自定义动态设置Button样式【很常用】

    为了增强android应用的用户体验，我们可以在一些Button按钮上自定义动态的设置一些样式，比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20

  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15

  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21

  • Android自定义WebView网络视频播放控件例子

    下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子，这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要，以下代码均以Youtube网站在线视...2016-10-02

  • Vue 组件复用多次自定义参数操作

    这篇文章主要介绍了Vue 组件复用多次自定义参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • 自定义jquery模态窗口插件无法在顶层窗口显示问题

    自定义一个jquery模态窗口插件，将它集成到现有平台框架中时，它只能在mainFrame窗口中显示，无法在顶层窗口显示. 解决这个问题的办法： 通过以下代码就可能实现在顶层窗口弹窗 复制代码 代码如下: $(window.top.documen...2014-05-31

  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25

  • 自定义feignClient的常见坑及解决

    这篇文章主要介绍了自定义feignClient的常见坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-10-20

  • pytorch 自定义卷积核进行卷积操作方式

    今天小编就为大家分享一篇pytorch 自定义卷积核进行卷积操作方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-06

  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04

  • PHP YII框架开发小技巧之模型(models)中rules自定义验证规则

    YII的models中的rules部分是一些表单的验证规则，对于表单验证十分有用，在相应的视图（views）里面添加了表单，在表单被提交之前程序都会自动先来这里面的规则里验证，只有通过对其有效的限制规则后才能被提交，可以很有效地保证...2015-11-24

  • jquery自定义插件开发之window的实现过程

    这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09

  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07

  • js实现div在页面拖动效果

    这篇文章主要介绍了js实现div在页面拖动效果,涉及JavaScript动态操作页面元素与数值计算的相关技巧,需要的朋友可以参考下...2016-05-05

  • C#自定义事件监听实现方法

    这篇文章主要介绍了C#自定义事件监听实现方法,涉及C#事件监听的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25