jquery实现拖动效果(代码分享)


Posted in Javascript onJanuary 25, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <style type="text/css">
 .page{text-align:left;}
 .dragDiv{border:1px solid #ddd; padding:10px; width:300px; margin:0 auto; border-radius:4px; box-shadow:0 1px 2px #fefefe; position: fixed;}
 </style>
 <div class="dragDiv" id="drag">
 <div class="drag-head">自己动手试试</div>
 <div class="drag-body">
 点击鼠标拖拖看
 </div>
 </div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 var _drag = {};
 _drag.top = 0; //拖动过的位置距离上边
 _drag.left = 0; //拖动过的位置距离左边
 _drag.maxLeft; //距离左边最大的距离
 _drag.maxTop; //距离上边最大的距离
 _drag.dragging = false; //是否拖动标志
 //拖动函数
 function bindDrag(el){ 
 var winWidth = $(window).width(), winHeight =$(window).height(),objWidth = $(el).outerWidth(), objHeight = $(el).outerHeight();
 _drag.maxLeft = winWidth - objWidth, _drag.maxTop = winHeight - objHeight;
 var els = el.style,x=0,y=0;
 var objTop = $(el).offset().top, objLeft = $(el).offset().left;
 $(el).mousedown(function(e){ 
 _drag.dragging = true;
 _drag.isDragged = true;
 x = e.clientX - el.offsetLeft; 
 y = e.clientY - el.offsetTop; 
 el.setCapture && el.setCapture(); 
 $(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
 return false;
 }); 
 function mouseMove(e){ 
 e = e || window.event;
 if(_drag.dragging){
 _drag.top = e.clientY - y; 
 _drag.left = e.clientX - x;
 _drag.top = _drag.top > _drag.maxTop ? _drag.maxTop : _drag.top;
 _drag.left = _drag.left > _drag.maxLeft ? _drag.maxLeft : _drag.left;
 _drag.top = _drag.top < 0 ? 0 : _drag.top;
 _drag.left = _drag.left <0 ? 0 : _drag.left;
 els.top = _drag.top + 'px'; 
 els.left = _drag.left+ 'px';
 return false;
 }
 } 
 function mouseUp(e){ 
 _drag.dragging = false; 
 el.releaseCapture && el.releaseCapture(); 
 e.cancelBubble = true;
 $(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp); 
 }
 $(window).resize(function(){
 var winWidth = $(window).width(),
 winHeight = $(window).height(),
 el = $(el),
 elWidth = el.outerWidth(),
 elHeight = el.outerHeight(),
 elLeft = parseFloat(el.css('left')),
 elTop = parseFloat(el.css('top'));
 _drag.maxLeft = winWidth - elWidth;
 _drag.maxTop = winHeight - elHeight;
 _drag.top = _drag.maxTop < elTop ? _drag.maxTop : elTop;
 _drag.left = _drag.maxLeft < elLeft ? _drag.maxLeft : elLeft;
 el.css({
 top:_drag.top,
 left:_drag.left
 })
 })
 } 
 bindDrag(document.getElementById('drag'));
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
详解JS预解析原理
Jun 16 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
angular forEach方法遍历源码解读
Jan 25 #Javascript
three.js实现围绕某物体旋转
Jan 25 #Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 #Javascript
angular和BootStrap3实现购物车功能
Jan 25 #Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 #Javascript
谈谈JavaScript数组常用方法总结
Jan 24 #Javascript
js实现日历的简单算法
Jan 24 #Javascript
You might like
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
分页栏的web标准实现
2011/11/01 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
小程序实现密码输入框
2020/11/16 Javascript
十条建议帮你提高Python编程效率
2016/02/16 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
json跨域调用python的方法详解
2017/01/11 Python
Python正则表达式经典入门教程
2017/05/22 Python
django 外键model的互相读取方法
2018/12/15 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
jupyter 导入csv文件方式
2020/04/21 Python
为什么要有struct关键字
2012/05/08 面试题
承办会议欢迎词
2014/01/17 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书