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 相关文章推荐
JQuery对checkbox操作 (循环获取)
May 20 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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
通过Email发送PHP错误的方法
2015/07/20 PHP
javascript 解析url的search方法
2010/02/09 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
js登录弹出层特效
2014/03/07 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
js实现自定义路由
2017/02/04 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python代码调试的几种方法总结
2015/04/15 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
简述Python2与Python3的不同点
2018/01/21 Python
python实现贪吃蛇双人大战
2020/04/18 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
网页美工求职信
2014/02/15 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
教师听课学习心得体会
2016/01/15 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
如何利用python实现Simhash算法
2022/06/28 Python