jQuery实现的简单拖动层示例


Posted in Javascript onFebruary 22, 2017

本文实例讲述了jQuery实现的简单拖动层。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现的简单拖动层示例

完整代码如下:

<!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=utf-8" />
<script src="jquery-1.4.2.min.js" language="javascript"></script>
<title>无标题文档</title>
</head>
<body>
  <div id="a" style="width:300px; height:300px; background-color:#069; position:absolute;">按下鼠标即可拖动</div>
  <div id="b"></div>
</body>
<script language="javascript">
  $(function(){
    //alert('aaaaaaa');
    var x;
    var y;
    var top;
    var left;
    var clix;
    var cliy;
    var pd;
    var fx;
    var fy;
    $("#a").mousedown(function(f){
      pd=true;
        if(!f){
            f=window.event;
          }
        fx=f.clientX;
        fy=f.clientY;
        top=$(this).offset().top;
        left=$(this).offset().left;
    });
    $("#a").mousemove(function(e){
        if(!e){
            e=window.event;
          }
            clix=e.clientX;
            cliy=e.clientY;
        if(pd==true){
            $(this).css({'top':top+(cliy-fy),'left':left+(clix-fx)});
          }
        $("#b").text(e.clientX+'  '+e.clientY);
      });
     $("#a").mouseup(function(){
         pd=false;
       });
    })
</script>
</html>

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

Javascript 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
微信小程序实现录音Record功能
May 09 Javascript
Bootstrap 3 进度条的实现
Feb 22 #Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 #Javascript
canvas 绘制圆形时钟
Feb 22 #Javascript
jquery实现数字输入框
Feb 22 #Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 #Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 #Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
php的4种常用运行方式详解
2016/12/22 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现简单中文词频统计示例
2017/11/08 Python
python文本数据相似度的度量
2018/03/12 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
武侯祠导游词
2015/02/04 职场文书
培训督导岗位职责
2015/04/10 职场文书
校运会通讯稿
2015/07/18 职场文书
python字典的元素访问实例详解
2021/07/21 Python