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 相关文章推荐
js鼠标左右键 键盘值小结
Jun 11 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
python实现各进制转换的总结大全
2017/06/18 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
基于python实现学生信息管理系统
2019/11/22 Python
如何使用python代码操作git代码
2020/02/29 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
高中自我鉴定
2013/12/20 职场文书
中学教师自我鉴定
2014/02/07 职场文书
合作协议书
2014/04/23 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
课外科技活动总结
2014/08/27 职场文书
婚前保证书范文
2015/02/28 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
Python基础详解之描述符
2021/04/28 Python
MySQL优化及索引解析
2022/03/17 MySQL