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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
vue 项目软键盘回车触发搜索事件
Sep 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中Date获取时间不正确怎么办
2008/06/05 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python实现杨氏矩阵查找
2019/03/02 Python
python多进程读图提取特征存npy
2019/05/21 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
用python批量移动文件
2021/01/14 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
SQL Server面试题
2016/10/17 面试题
家长给老师的道歉信
2014/01/13 职场文书
教学器材管理制度
2014/01/26 职场文书
探亲邀请信范文
2014/01/30 职场文书
村干部任职承诺书
2015/01/21 职场文书
检讨书怎么写?
2019/06/21 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python