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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 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
一次编写,随处运行
2006/10/09 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP正则验证Email的方法
2015/06/15 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Python yield 小结和实例
2014/04/25 Python
python生成日历实例解析
2014/08/21 Python
跟老齐学Python之再深点,更懂list
2014/09/20 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
高中生自我鉴定范文
2013/10/30 职场文书
劳资人员岗位职责
2013/12/19 职场文书
初中生操行评语大全
2014/04/24 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书