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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
JavaScript 指导方针
Apr 05 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
jquery 插件学习(一)
Aug 06 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php静态文件生成类实例分析
2015/01/03 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
浅析javascript 定时器
2014/12/23 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
Python中使用动态变量名的方法
2014/05/06 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python 如何调用 dubbo 接口
2020/09/24 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
入团者的自我评价分享
2013/12/02 职场文书
大学运动会通讯稿
2014/01/28 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
职工宿舍管理制度
2015/08/05 职场文书